오늘보다 더 나은 내일

[수업노트](20.10.20)D+8 border-radius/inherit/상단메뉴 만들기 본문

국비지원 UX UI 디자인/코딩 수업

[수업노트](20.10.20)D+8 border-radius/inherit/상단메뉴 만들기

papiliofly 2020. 11. 1. 00:25
728x90

1. (css) border-radius
 - 외곽을 둥글게 만들어주는 속성



2. (CSS) inherit
 - 부모엘리먼트에 지정된 속성이 자식엘리먼트에 상속되어 나타나는 속성

 - 기본 속성값 inherit: color, font-size, letter-spasing, font-weight, text-align

 - 기본 속성값이 inherit 아닌것: display, margin, padding, backgroud-color(기본값 투명),width(기본값 오토), height(기본값 오토),border, border-radius


3. 상단메뉴 만들기
1. 메뉴박스(nav), 메뉴(section), 메뉴아이템(div), 메뉴아이템 텍스트(a)로 마크업, 이유 : 모든 작업의 시작은 HTML 구조를 세우는 것 부터 입니다.
2. a의 노말라이즈, 이유 : a에 색상이 거슬려서
3.  메뉴(nav > section)에 배경색 삽입, 이유 : 시안과 비교 했을 때 차이점으로 포착, 왜 이것 부터 할까요? : 거시적인 부분부터 차이점을 제거하는게 관례, 처리후 해야하는 생각 : 시안의 메뉴는 가로가 최소화 되었는데, 우리 메뉴는 최대화 되어있다.
4. 메뉴(nav > section)의 너비 최소화, 처리 후 해야하는 생각 : 메뉴를 가운데로 보내야 겠다.
5. 메뉴 박스(nav)에 text-align:center;, 처리 후 해야하는 생각 : 메뉴 수준에서는 어느정도 차이점을 제거 했으니, 메뉴아이템 수준으로 넘어가자
6. 메뉴 아이템(nav > section > div)의 배열을 가로로 변경처리 후 해야하는 생각 : 메뉴 아이템 수준에서는 어느정도 차이점을 제거 했으니, 메뉴 아이템 텍스트 수준으로 넘어가자.
7. 메뉴 아이템 텍스트(nav > section > div > a)에 배경색 넣기, 이유 : 작업을 진행하는데 있어서 실수를 줄이려고
8. 메뉴 아이템 텍스트(nav > section > div > a)에 padding:20px;, 이유 : 시안에서는 텍스트 버튼의 크기가 크다.
9. 메뉴 아이템 텍스트(nav > section > div > a)에 display:block; 이유 : a의 기본 display가 inline 이다.
10. 메뉴 아이템 텍스트(nav > section > div > a)에 배경색 빼기, 이유 : 작업 진행이 끝났기 때문에
11. 메뉴 아이템에 마우스 올리면 자식인 메뉴 아이템의 배경색과 글자색 변경
12. 메뉴(nav > section)에 padding:0 20px; border-radius:10px; 이 작업을 마지막에 한, 이유 : 어느정도 작업 후, 세밀한 차이점 맞추는 차원에서 진행(처음에 해도 됨)

728x90