조반짝의 도전일지

ajax 통신활용 1. HTML 데이터 data.html 파일 새로만들기 id result 안에 html 형식이 들어온다. 프론트 웹에서는 .txt 파일은 문자열을 로우데이터로 불러오고 , 이번에는 html 형식을읽어오는 것이다. 검사창에서 HTML데이터 클릭하면 KBS URL 이 없다가 나타난다. 문자열 데이터 HTML 데이터 data2.html KBS 한국방송공사 2. XML 데이터 xml은 대소문자를 구분한다. xml은 태그(묶어주는 태그, 기준)가 꼭 있어야한다. 웹으로 되어있고 형식이 자유롭다 url: "data3.xml" 와 같은 이름으로 data3.xml 파일을 새로 만든다. append : 기존에 데이터에 추가된다. 문자열 데이터 HTML 데이터 XML 데이터 문자열1-1 문자열1-2 문자..

내부 css 와 html 마크업하기 usemap으로 #intro 설정, map id = intro로 설정하여 이미지와 맵을 연동한다. 영역 지정 ●area : 영역 지정 shape: 모양 coords : 좌표값 좌표값을 잡으면 포인터커서로 변경된다. 이벤트 넣기: onclick = "window.close();" 라는 명령어를 주면 작은 사각형을 클릭하면 윈도우 창이 닫힌다. 링크에 네이버 주소를 넣고 onclick에 alert 를 넣으면 네이버창이 열린다. target="_blank"는 새창을 열어주는 명령어

html mark up css edit h1태그의 가상요소 만들기 폰트어썸 링크걸고 폰트어썸 넣기 폰트어썸 css edit main html mark up article 20개 만들기 article css edit 플러그인 사용 isotope 홈페이지 접속 Isotope · Filter & sort magical layouts (metafizzy.co) Isotope · Filter & sort magical layouts Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --s..

뮤직플레이어 만들기 ●figure/ figcaption: 이미지와 이미지설명 태그 ●h1 은 한번만 쓰자. 가장 큰 타이틀은 로고라고 생각하고 한번만 사용 ●strong: 강조태그 ●b: bold 글씨 진하게 html mark up fontawesome 에서 bar 아이콘 넣기 css reset css edit 폰트어썸밖에 a태그로 감싸주고 class 지정 박스 만들기 section > article > .inner 8개 생성 css edit vh, vw 로 사이즈 설정시에 화면창에 따라 크기가 변하기 때문에 반응형이 따로 필요 없다 하지만 세부적인 작업과 컨트롤하기 어렵다는 단점이 있음! 정중앙에 section(box) 위치시키기 border-radius 적용, section 테두리 지우기 45도씩 박..

한 글자씩 애니메이션 적용 html markup article > div > h2안에 span 사이에 한 글자씩 넣기 article 6까지 마크업한다. css 편집 #header css edit transiton : all 은 모두 움직이는 속도를 주지만 움직이고 싶은 명령어만 지정해서 속도를 넣을 수 있다. #dot edit @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } ol,li,ul,dd,dt,dl{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both..

https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developers Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil cdnjs.com parallax08 이어서 하기 css animation..

화면이 움직이면 글자가 바운딩해서 나타남 html mark up css 편집 #header 편집 #dot 편집 #header 편집 @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; color: #222; } li{ list-style: none; } .clearfix::after,.clearfix::before{ display: block; content: ""; clear: both; } #contents{ text-align: center; } #contents > div{ width: 100%; height: 100vh; display: flex; align-items: cent..

.face3 html 마크업 .face3 css 편집 .pic에서 공통된 속성을 적용해주고 nth-of-type으로 각각 사진만 넣어준다. Co Company Android Apple Twitter Facebook YouTube Google What's New New n Articles What is Lorem Ipsum? Lorem: 텍스트 자동 완성 기능 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numqua..

탭메뉴(영화차트 스와이퍼) 복습 swiper 접속 layout copy chart1 중간에 붙여넣기 swiper script 붙여넣기 위에서 이미 swiper const 지정을 했기 때문에 const 대신에 let swiper로 변경한다. 이미 지정된 const swiper는 const 삭제한다. loope 빼고 밑에 다 삭제하고 '.swiper' >' .swiper2 '로 변경 swiper-wrapper 마크업 reset.css에 여백초기화 부분에 figure, figcaption 추가하기 reset.css 에 .icon 스타일 추가하기 html 에 icon 이름을 넣어주면 reset에 넣은 icon 이미지가 들어간다. .chart1 css 편집 img를 100%로 지정하고 포스터를 기준으로 rank가..

닷메뉴_ active 값에 변화주기 css reset #header css편집 h1 편집 #contents css 편집 #dot css 편집 active 활성화 @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; color: #222; } #header{} #header h1{ width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.5); position: fixed; left: 0; top: 0; text-align: center; line-height: ..