조반짝의 도전일지

● A = 10 : 대입 ● A == 10 : 값(숫자), 문자 모두 같아야 참 ● A === 10 : 숫자 문자 타입 까지 모두 같아야 참 ● A ! = 10 : 같지 않다는 표시, ≠ 로 10이 아닐 때 참 ● if (조건1 && 조건2) : 2개의 조건이 모두 만족될 때 참 ● if(조건1 || 조건2) : or 2개중 하나만 만족해도 참 ● ! 조건: 조건이 반대일 때 참 ● && 는 곱했을 때 참이나오면 참 ● ||(or) 둘다 거짓일 때만 빼고 다 참 ● !(not) 반대일 때 참 ● 10진법 : 0-9 ● 2진법 : 0,1 ● 8진법 : 0-7 ● 16진법 : 0-9, A-F A=10 B=11 C=12 D=13 E=14 F=15 G=16 10 진법을 2진법으로 변환하기 ex) 16을 2로 나..

스크롤 시 네비게이션 보이기 html 마크업 css reset css 편집 #nav nav position: absolute 띄워주기 nav를 숨겨놨다가 on을 만나면 나오게 되고 고정해줌 #contents @charset "utf-8"; *{ margin: 0; padding: 0; /* margin, padding 사이즈 반영이 안되서 높이, 너비값으로 직접 적용 */ box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both; } #nav{ position: ..

● 파비콘 링크하기 header 영역 html 마크업 h1 > a > em / strong 마크업 nav 마크업 (nav 두개 만들예정 , pc네비게이션, 모바일 네비게이션) css편집 #header .container .row 모바일 네비게이션 편집 #mNav 편집 .ham span 편집 .ham span 가상요소 만들기 #mNav display:none; 숨겨놓기 반응형 로고 만들기 .header .logo 편집 .nav (pc버전)편집 nav float 띄우기 > html > header에 clearfix 넣기 반응형 적용하기 media.css 만들기 max-width: 1290px .container max-width: 1024px .header .nav 숨겨주기 햄버거 메뉴 나오게하기 max-w..

html 마크업 네비게이션 마크업 모바일 바 마크업 CSS 편집 ●row 넣는 이유는 완충작용으로 여백에 여유를 주어 다양한 크기의 디바이스에 글씨가 잘리지 않도록함 ●반응형 크기적용하기 ● container width: 100% 설정 해야 화면 조정시 같이 크기가 변함 row값은 화면 크기에 따라 다르게 설정한다. 화면 크기가 작을수록 작게 설정 [ min-960px media 설정] 네비게이션 스타일설정 navBG 의 기준점을 container로 잡는다. 네비게이션 마우스오버 시 하단 바 나오게 하기 네비게이션 슬라이드 다운 효과 960px 이상일 때 네비게이션 슬라이드 효과 지정 ●.width() : 요소의 너비값만 구할 경우 ●.innerWidth() : 요소의 너비 값 + padding을 더한 ..

html 마크업 #contents css편집 한 페이지당 h2가 들어가도록 편집 h2 그라디이션으로 배경 넣기 #nav 편집 nav z-index : 100; cursor : 1000; 지정한다. h1 편집 .menu 편집 @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; color: #222; } .clearfix::before, .clearfix::after{ content: ""; display: block; clear: both; } #contents{ text-align: center; height: 100vh..

모바일 네비게이션 01 html 마크업 css 편집 #contents 편집 ●vw : 세로로 잘라서 나눠서 쓰겠다. ●vh : 가로로 잘라서 나눠서 쓰겠다. #nav 편집 h1, nav float left/ right 줌 nav 포지션 픽스를 해주어 고정시키고 포지션을 띄우면 너비값을 잃기 떄문에 w:100%를 줌 menu 를 옆으로 나열하기 위해 inline 구조로 변경하고 active는 인라인구조와 블럭구조의 성질을 가지게한다. active a 를 만들어서 컬러값을 넣어야 변경됨 반응형 적용하기 #nav .mNav 편집 햄버거메뉴 만들기 - 영역 잡기 햄버거메뉴 위치 잡기 햄버거 메뉴 바 만들기 햄버거 메뉴 바 2 , 3 만들기 **실무팁 나중에 디자인된 부분을 보고 할 때는 포토샵 파일을 참고해서 ..

html 마크업 css 편집_contents css 편집_nav ●.each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드 header 높이값 if문을 이용하여 nav 액션주기 처음에는 nav가 밑에 있고 스크롤을 내리면 nav가 위로 올라가는 액션이다. this 는 nav 이다. JHH's Website menu1 menu2 menu3 menu4 menu5 menu6 열심히 합시다. 졸지 마시고 자십시오 무슨 일 이든 안되면 반복하세요 오늘 비가 너무 많이 오네요 평양냉면 먹고싶다. 돈 많은 백수가 됐으면 좋겠다. @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-styl..

html 마크업 #wrap article css 편집 자바스크립트로 박스안에 아쿠아색 클릭했을 때 핑크로 변경하기 변수 지정 아쿠아를 클릭하면 핑크로 변경된다. addClass = classList >> 클래스를 추가한다. click하면 "on"이 발생하도록한다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); }); 클래스가 없기 때문에 false가 뜬다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); let isOn = wrap.classList.contains("on"); console.log(isOn); }); 클래스를 추가하면 true가 된다. if문을 이용해서 자바스크..

01 자식 요소의 순서를 지정하자 html 마크업 css편집 ●order: 나열되어있는 자식들에게 order로 순서값을 변경해 줄 수 있다. 1 2 3 02 요소의 안쪽 여백 확대하기 ●flex-grow:1; 모든 article이 똑같은 사이즈로 넓이값이 지정됨 article 중 하나만 2를 넣었을 때 ●flex-grow:2; FLEX GROW_1 FLEX GROW_2 FLEX GROW_3 03 요소의 안쪽 여백을 축소하기 ●flex-shrink: 여백을 축소한다. FLEX shrink FLEX shrink FLEX shrink

html 마크업 css 편집 사이드 메뉴 스타일 지정 open 버튼 만들기 클릭이벤트 액티브 이벤트 open 단추 활성화하기 사이드 네비게이션 숨겨져 있을 때 open 버튼 클릭하면 나타나게 하기 open 클래스와 nav가 만나게 해야한다. 스르륵 open 되기 위해서 시간을 더해주면 된다. 하지만 .css 는 open만 되고 닫히지 않는다. .toggleClass("Open"); 을 한다. 만약에 open이라는 클래스를 갖고 있을 때와 안 갖고 있을 때 if문 : 모든 조건을 다 수용할 수 있다. ● hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드 ●text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드 We..