본문 바로가기
728x90

분류 전체보기463

비주얼 스튜디오 코드 61 _ 비교연산자 ● 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로 나.. 2023. 7. 4.
비주얼 스튜디오 코드 60_ parallax 06 스크롤 시 네비게이션 보이기 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: .. 2023. 7. 4.
비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기 ● 파비콘 링크하기 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.. 2023. 7. 3.
비주얼 스튜디오 코드 58_햄버거 메뉴 복습 html 마크업 네비게이션 마크업 모바일 바 마크업 CSS 편집 ●row 넣는 이유는 완충작용으로 여백에 여유를 주어 다양한 크기의 디바이스에 글씨가 잘리지 않도록함 ●반응형 크기적용하기 ● container width: 100% 설정 해야 화면 조정시 같이 크기가 변함 row값은 화면 크기에 따라 다르게 설정한다. 화면 크기가 작을수록 작게 설정 [ min-960px media 설정] 네비게이션 스타일설정 navBG 의 기준점을 container로 잡는다. 네비게이션 마우스오버 시 하단 바 나오게 하기 네비게이션 슬라이드 다운 효과 960px 이상일 때 네비게이션 슬라이드 효과 지정 ●.width() : 요소의 너비값만 구할 경우 ●.innerWidth() : 요소의 너비 값 + padding을 더한 .. 2023. 7. 3.
비주얼 스튜디오 코드 57 _ parallax 05 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.. 2023. 6. 30.
비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) 모바일 네비게이션 01html 마크업css 편집#contents 편집●vw : 세로로 잘라서 나눠서 쓰겠다. ●vh : 가로로 잘라서 나눠서 쓰겠다.#nav 편집h1, nav float left/ right 줌nav 포지션 픽스를 해주어 고정시키고 포지션을 띄우면 너비값을 잃기 떄문에 w:100%를 줌menu 를 옆으로 나열하기 위해 inline 구조로 변경하고 active는 인라인구조와 블럭구조의 성질을 가지게한다. active a 를 만들어서 컬러값을 넣어야 변경됨 반응형 적용하기#nav .mNav 편집햄버거메뉴 만들기 - 영역 잡기햄버거메뉴 위치 잡기햄버거 메뉴 바 만들기햄버거 메뉴 바 2 , 3 만들기**실무팁나중에 디자인된 부분을 보고 할 때는 포토샵 파일을 참고해서 위치를 넣어야한다. (포토샵.. 2023. 6. 30.
728x90
반응형

티스토리툴바