조반짝의 도전일지

● slick 사이트 : 이벤트 코드를 복사해서 이용할 수 있는 사이트 https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io get it now > download now 해서 다운로드를 받는다 두개의 파일을 복사해서 작업하고있는 비주얼 스튜디오 코드 파일에 javascript 파일은 js 파일(새로만들기)에 붙여넣는다. slick.css 는 cs..

셀렉트 ● label: 이름을 달아주는 태그 for : label 와 select가 세트라고 알려줌 select > option seleted="selected"지정해서 항상 위에 위치하도록 함 value = "" 밸류값으로 사이트 링크 걸어줌 seleted에 script를 넣어주어야한다. ●onchange= "" Family Map 네이버 다음 구글 네이트 만약 this에 밸류값이 있으면 윈도우를 오픈해줘라 선택한 아이의 밸류값을; 검색사이트 Family Map 네이버 다음 구글 네이트

html 골격만들기 css 로 박스 편집 자바스크립트로 박스 스타일 편집하기 박스 변수 지정해주기 style 편집해주기 배경색 변경 border 편집 transform 여백적용 id.style.명령어 = 로 스타일을 편집할 수 있다. 카멜표기법 : 두번째 단어에 대문자를 넣어주는 표기법 ex) fontSize, textAlign

네비게이션 html 골격만들기 전체메뉴는 안보여도 되지만 ir_pm > 이미지를 대체할 때 사용할 때 ir_su : 아무것도 안들어가도 됨 h2에 class ir_su를 넣어서 전체메뉴가 안보이도록한다. 메뉴 만들어주기 css .nav편집 컬러가 있을 때는 padding 을 사용하는 것이 좋다. padding 사용했을 때 margin 사용했을 때 div float 띄우고 부모(nav)에 clearfix 주기 단 나누기 a태그에 마우스 올렸을 때 밑줄 나오게 하기 **reset.css 에서 h3 태그만의 스타일을 지정해주고 html에 class = "h3" 이름만 넣어주면 공통적으로 스타일이들어간다. .tit 편집 css에서 .tit 편집해주기 아이콘 넣어주기 ir_pm 으로 전체메뉴 글씨 없애주기 아래 ..

●input 태그 -text -password -date - color -checkbox : 체크박스는 중복으로 체크를 할 수 있다. -radio : 중복없이 선택함 -button ●placeholder: 박스 안에 텍스트 넣기 -테두리 만들기 border:0; 하면 input이 가지고 있는 테두리가 사라짐 하지만 input을 클릭하면 테두리가 나타남 ●outline: none 으로 클릭하면 나타나는 테두리 없애주기 -button 수정해주기 검색창과 검색버튼 위치 시켜주기 float: left / right 해주고 clearfix 해주는 대신 div에 overflow:hidden 해준다. 검색 [span으로 골격만들어서 검색창만들기] type, class, name 을 지정해 준다. -span 편집 : ..

html 기본 골격 ● console.log - 결과값이 잘 나왔는지 확인하는 용도 ● 주석: // h1 에 들어간 값은 웹페이지에 직접영향을 주지만, console 은 확인만 가능하다. 자바스크립트에서 변수지정해주기 console.log(title); 로 결과값 확인

바탕 이미지 고정시키기 ● background-attachment: fixed >> 큰 이미지를 사용해야한다. 웹표준 MENU [토탈 네비게이션 만들기] meta 설명 넣어주기 >> 웹페이지의 상세설명 viewport가 있어야 반응형이 적용이 된다. html 골격만들기 [skip 네비게이션] 아이디 컨텐츠 안에 섹션으로 나눠서 창을 100%사용할 수 있도록 한다. #wrap > #header, #footer > .container >.header, .footer #wrap > #contets > .cont_nav , .cont_tit, .cont_ban, .cont_cont > .container > .tit , .ban, .cont css 편집하기 아이디 먼저 넣어주고 각 아이디 안에 자식 넣어준다. ..

페이드 인 & 페이드 아웃 html 골격 만들어주기 css 편집 각 태그별 영역 잡아주기 html > 배너 이미지 넣기 ul에 class="list" class 를 지정해줘야한다. li에 class="list_img"를 지정해준다. css > banner 편집 슬라이드 배너 3장 한 위치에 겹쳐주기 fadeout / fadein 효과 주기 이미지슬라이드 효과주기 @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; color: #222; } .clearfix::after, .clearfix::before{ content: ""; display: ..

웹표준 ▶ reset. css * { } = 전체 적용됨 .mt10 은 margin-top 10 자동으로 전체 들어감. !important → 우선순위로 적용이 됨 >> reset.css 를 미리 만들어 놓고 사용하면 편리함. reset.css 를 제일 첫번째로 링크해야함. 순서를 반드시 지켜야함! ●meta 태그 : 웹페이지에대한 설명 웹폰트 적용 반드시 웹폰트를 사용해야한다. link - html에 적용 import - css 에 적용 html 골격만들기 **컨테이너를 넣는 이유 똑같은 컨테이너를 반복해서 각 영역에 넣는 이유는 각 영역의 양쪽 부분을 따로 따로 사용하기 위해서!!! css 편집하기 각 태그의 영역을 잡아준다 html 에 .container 를 각 아이디에 넣어준다. css에서 .co..

박스 3개 만들기 #wrap > .container > .box > .clock / p-clock 박스 영역 잡아주기 ● display: inline-block 인라인에는 본인 가지고 있는 여백이 있기 때문에 인라인블록을 해도 옆으로 나열되지 않음 이런 경우에는 float으로 옆으로 나열해준다. ● float을 띄우면 부모가 높이를 잃게 된다. >> 부모에 clearfix 나 overflow: hidden을 적용해준다. 박스를 개별로 수정해주기 .box:nth-child(1){} / .box:nth-child(2){} .... >> 하지만 박스 갯수가 많아지게 되면 각각 수정하기 시간이 오래걸린다. 박스를 짝수, 홀수로 수정해주기 짝수 .box:nth-of-type(2n){} 홀수 .box:nth-of-..