fit-content : width / heihgt를 얼마나 해야할지 모를때, 넓이높이를 자식 요소에 맞춰 감싼다.
overflow:hidden;은 컨텐츠 벗어난 부분을 숨기는데 fit-content는 안숨긴다. ex) width: fit-content;
:not(선택자) : 괄호 안에 있는 선택자를 제외한 나머지 형제나 자식을 선택함.
cursor: pointer; : 마우스를 올렸을 때 클릭할 수 있는 모양의 마우스 커서로 바꾼다.
1. 1차메뉴만 있는 header
nav 메뉴들은 클릭하면 다른 페이지로 이동해야하니깐 각각 a태그를 연결해준다.
( <li> <a href="#"> 메뉴이름 </a> </li> )
아이콘은 불러오는 방법이 다양한데, 여기선 이미지로 불러와준다.
html ↓
Logo에서 / 는 '메인페이지'라는 뜻이다.
a 태그에 / 를 써주면 클릭하면 메인페이지로 넘어간다.
<h1><a href="/">KaKao</a></h1>
웹폰트 불러와주고
a태그의 밑줄과 파란 글씨를 초기화 시켜준다.
a 태그 밑줄 초기화 → text-decoration: none;
로고와 메뉴를 하나로 묶은 header_con으로 실질적인 컨텐츠 넓이를 잡아주고,
로고와 메뉴 아이콘등을 가로로 정렬하기 위해 dispay:flex를 걸어준다.
* dispay: flex;는 자손한테만 적용된다.
그래서 후손인 li와 아이콘들에게는 적용이 안되고 직접적인 자손들인 h1, ul, icons 들에 적용된 모습.
fit-content : width / heihgt를 얼마나 해야할지 모를때, 넓이높이를 자식 요소에 맞춰 감싼다.
overflow:hidden;은 컨텐츠 벗어난 부분을 숨기는데 fit-content는 안숨긴다
:not(선택자) : 괄호 안에 있는 선택자를 제외한 나머지 형제나 자식을 선택함.
아이콘같은 요소들은 padding으로 가운데 정렬해준다.
box-sizing: border-box;로 해준다음에 padding으로 맞춰준다.
마우스를 올렸을 때 hover 뒤에 회색 동그라미가 뜨도록 효과 넣어주고
클릭할 수 있는 마우스 커서로 바꿔준다.
cursor: pointer; : 마우스를 올렸을 때 클릭할 수 있는 모양의 마우스 커서로 바꾼다.
+ 2차 메뉴가 포함된 메뉴를 만들 땐 ,
li 안에 또 다시 ul 과 li를 만들어주면 2차 메뉴를 만들 수 있다.
이때 2차 메뉴를 누르면 다른 페이지로 넘어가게 할려면 a태그를 안에 넣어줘야한다.
<li><a href="#">menu</a></li>
+ 로고가 글자가 아닌 이미지일때 위아래 가운데로 배치하려면,
padding으로 가운데를 맞춰줘야한다. 이때 padding을 주기위해서 box-sizing: border-box;를 해주고 padding값을 주어야한다.
'예제 실습' 카테고리의 다른 글
| 실습) split shire 사이트 클론 코딩 (0) | 2024.06.25 |
|---|---|
| 실습) Google (0) | 2024.06.24 |
| 실습) 네이버 회원가입 창 (0) | 2024.06.21 |
| 실습) table 게시판 만들기 (0) | 2024.06.19 |
| 2차 메뉴가 있는 header 구성해보기 (0) | 2024.06.18 |
