조반짝의 도전일지

화면이 움직이면 글자가 바운딩해서 나타남 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..

html에 body 셋팅해주기 container 안에 div, section, article 상관없이 넣어주어도 된다. *** 아이디와 클래스를 반드시 구분해서 넣어줘야한다. 기본 레이아웃 만들어주기 탭메뉴 영역 골격 만들어주기 active 클래스 넣어주기 css 영역 클래스 구분해주기 탭박스 만들어주기 active 영역 배경색 변경해주기 탭박스 flot을 띄워주어 옆으로 나란히 보내기 float 띄워 줄 시 clearfix를 넣어줘야하지만 부모(ul)에 overflow:hidden 을 대신 넣어줘도 된다. div 부분 안 쪽 여백 밑 줄간격 border-top으로 박스 밑에 선 넣어주기 자바스크립트 스니펫 가져와서 html에 붙여넣기 변수지정 긴 이름을 짧게 지정해주기 console.log(index)..

html 내용 넣기 컨테이너는 각 아이디안에 들어가기 때문에 반드시 클래스로 넣어야한다. .container # wrap 안에 아이디 헤더 > 클래스 컨테이너 > 클래스 헤더 아이디 배너 > 클래스 컨테이너 > 클래스 배너 아이디 컨텐츠 > 클래스 컨테이너 > 클래스 컨텐츠 아이디 푸터 > 클래스 컨테이너 > 클래스푸터 바디 기본 틀 잡아주기 [css 기본 reset 코드 ] css 각 아이디별 영역 잡아주기 .container 에 background color 를 부모(아이디)의 높이값을 종속 받는다. [탭 메뉴 넣기] 탭 안에서 구분할 부분이 버튼이고, 보여지는 부분이 컨텐츠로 1번,2번 구분해서 숨기기 효과 사용한다. active: active 이름을 가진 클래스가 색깔이 다르게 들어갈 수 있음 c..