조반짝의 도전일지

화면이 움직이면 글자가 바운딩해서 나타남 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 마크업 css 편집 #contents css 편집 #header css 편집 #nav css 편집 dot 위치시키기 dot 모양 만들기 **parallax를 사용하지 않아도 링크를 걸면 해당 화면에 페이지로 이동하는 것을 볼 수 있다. @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; } /* header */ #header{ position: fixed; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.3); } #head..

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..

Notice 3 만들기 column col2 편집 css 편집 .notice3 이미지 사이즈와 li 위치 잡아주기 li에 패딩값을 주어 위치를 잡아준다. (좌표값을 계산해서 잡아주어야한다.) a, span 태그가 인라인 구조여서 한 줄로 나열이 된다. 줄이 떨어지기 위해서 블럭구조로 바꾸어 행이 바뀌도록한다. html에 더보기 넣기 a태그로 더보기 만들어주기 더보기 css 위치 잡기 더보기 a태그 블럭구조로 변경해주고 크기를 지정 백그라운드 이미지 백그라운 포지션을 넣어 이미지를 배치해준다. clumn col5 편집 제목 써주고 ir_su로 글씨 감추어주기 탭메뉴 만들기 ul > li 로 목록 만들고 li 중 한개 의 li 에 class= "active" 를 지정해준다. 공지사항1 ul > li안에 내용..

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..