본문 바로가기

전체 글62

풀 다운메뉴 3차 HTML nav.menu-box-1>ul>li*4>a[href="#"]{1차 메뉴아이템$}+ul>li*4>a[href="#"]{2차 메뉴아이템$}+ul>li*4>a[href="#"]{3차 메뉴아이템$}을 tab해서 왼쪽과 같이 만들어준다. 2차메뉴 부터는 ul>li*4>a[href="#"]{3차 메뉴아이템$}이 반복되어 사용된다. CSS 1. body, ul, li, a를 노멀라이즈 시켜준다. 2. menu-box-1을 가운데로 정렬시켜준다. 3. 2, 3차 메뉴는 보이지 않도록 먼저 2, 3차의 ul에 display를 none 시켜준다. 10. menu-box-1의 자식ul안의 모든 ul을 유령화시켜주고 위치를 지정해준다. width를 100%으로 맞추어 모든메뉴의 크기를 같게해준다. 4. 모든 ul의.. 2020. 4. 26.
position, z-index HTML article>section*2>div*3 tab로 하나의 article안에 두개의 section으로 나눈후 div를 각각 세개씩 만들어준다. CSS 1. article을 10px의 검정테두리를 만들고 넓이, 높이를 80%준다. 2. position을 absolute로 지정해주어 유령화를 시켜주고 위에서 10%, 왼쪽에서 10%로 위치를 지정해준다. top과 left는 position을 사용할때만 가능하다. 3. article안의 section의 높이와 넓이를 50%, top, left는 0으로 위치지정해준다. 4. 두개의 section중 두번째 section의 위치를 조정해준다. left를 auto로 준것은 두번째section의 위치가 article안의 맨 오른쪽으로 이동시키기 위함이다. au.. 2020. 4. 26.
ul, li로 메뉴만들기 HTML nav.menu-1>ul>li*3>a[href-="#]{메뉴아이템$}으로 메뉴아이템을 3개인 메뉴바를 만들어준다. ul, li는 순서없는 목록을 의미한다. CSS 1. body, ul, li를 노멀라이즈 해준다. 2. a도 노멀라이즈 해준다. 3. .menu-1을 가운데로 정렬시켜준다. 4. .menu-1의 자식 ul에 배경색을 넣어주고 글자화 시켜준다. 5. padding으로 위아래를 제외한 양쪽에 여백을 넣어준다. 6. border-radius로 둥글게 만들어준다. 7. li를 글자화 시켜주고 넓이를 200px로 잡아준다. 8. a의 display를 블럭으로 잡아주어 블록화 시켜주고 안쪽여백을 10px로 잡아준다. 9. 메뉴아이템에 마우스를 올렸을때 글자는 흰색, 배경은 검정색으로 바뀔수 있.. 2020. 4. 26.
a 노멀라이즈 HTML nav>section>div*4>a[href="#"]{메뉴아이템$}을 한 후 tab를 눌러 정리해준다. CSS 1. a를 노멀라이즈해준다 --> 노멀라이즈 : 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애 다시 평범하게 만든다 2. nav 태그를 가운데로 정렬시켜준다 3. section태그를 글자화, 배경색 변경, 모서리 둥글게 해주고 padding으로 위아래는 0으로 양옆은 10px만큼 늘려준다 4. div태그의 display를 글자화시켜준다. 5. nav>section>div>a 태그를 padding을 20px 넣어준다. padding을 div가 아닌 a태그에 넣어주는 이유는 마우스를 올렸을 때 메뉴의 크기에 맞게 배경색이 바뀔 수 있게 해야하기 때문이다. 6. padding을 사용.. 2020. 4. 19.

티스토리툴바