[웹코딩] 7일차, CSS, border / inherit / 노말라이즈 / 메뉴만들기
- border-radius : 모서리 둥글게
border-radius : 20px;  직사각형에서, 입력한 픽셀만큼 떨어진 점을찍고 곡선으로 이어주는 것이다. |
|
| 직사각형에 50% -> 타원 height : 70px; width : 120px; border-radius:50%; |
|
| 정사각형에 50% -> 정원 height : 70px; width : 120px; border-radius : 50% ; |
border-radius 응용) 동그라미 선택 박스 만들기
| /* 마우스를 올렸을 때 커서를 포인터로 바꾼다. */ cursor : pointer ; |
- inherit이 기본값인 게 있다.
아닌것은 inherit을 직접 줄 수 있다.
| 기본 속성이 inherit인것 | 기본 속성이 inherit이 아닌 것 |
|
|
- a의 노말라이즈
a {
color:inherit;
text-decoration:none;
}
웹 디자이너가 가장 먼저 해야할 일
이 세상의 모든 a 엘리먼트를 평범하게 만든다.
- body 노말라이즈
margin: 0;
(a노말라이즈와 세트로, 항상 해주기)
노말라이즈는 건들지 말기. 다른 것 추가하면 안됨.
- 메뉴 만들기
만들것과 '차이점'을 하나하나 고쳐 나는 것
거시적인 관점으로 보는 것
메뉴는 1개이고, 메뉴를 구상하는 메뉴아이템이 4개인 것.
메뉴는 1개이다 : nav
-> 메뉴를 1개 만들고(nav), 메뉴아이템을 4개 만들어야겠다. : nav>div
nav>div*4>a[href=""]{메뉴아이템$} -> 만들줄 알아야함
-> 메뉴아이템을 구상했으니, 메뉴아이템의 텍스트가 필요 : nav>div>a
-> a가 나왔으니, 숨쉬듯이 a 노말라이즈 자동입력해야함
->
section > nav > div > a {
padding : 20px;
}
-> 결국 클릭하는 것은 a이니, a부분에 여백을 줘야함
하지만, a부분이 회색박스 밖으로 튀어나감. 왜? a는 inling-block이라서 padding이 제대로 작동하지 않기 때문.
-> section > nav > div > a 에 display: block; 주기
* 일주일내로 5분안에 코드 완성할 수 있도록 연습하기