일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트함수
- 디스톨트
- 자바스크립트매개변수
- 아이콘가이드
- 일러스트아이소메트릭
- 일러스트기초
- CSS
- 포토샵기초
- 일러스트 기초
- 웹디자인 기초
- css diner
- html기초
- 포토샵
- 아이드로퍼툴
- 통계사이트
- 자바스크립트
- 자바스크립트기초
- IT
- 레이어그룹
- 일러스트 브러쉬
- 자바스크립트 변수
- flexbox froggy
- 일러스트 블렌드
- 사진보정
- 스마트오브젝트
- 웹디자인
- flexbox defense
- html
- 인포그래픽
- 일러스트3d
- Today
- Total
오늘보다 더 나은 내일
[수업노트](20.10.20)D+8 border-radius/inherit/상단메뉴 만들기 본문
[수업노트](20.10.20)D+8 border-radius/inherit/상단메뉴 만들기
papiliofly 2020. 11. 1. 00:251. (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; 이 작업을 마지막에 한, 이유 : 어느정도 작업 후, 세밀한 차이점 맞추는 차원에서 진행(처음에 해도 됨)
'국비지원 UX UI 디자인 > 코딩 수업' 카테고리의 다른 글
[수업노트](20.10.22)D+10 CSS DINER 22단계까지/풀다운 메뉴 만들기 (0) | 2020.11.01 |
---|---|
[수업노트](10.10.21)D+9 class/h1 ~ 6/ul, ol, li (0) | 2020.11.01 |
[수업노트](20.10.19)D+7 block요소 중앙정렬/class,id (0) | 2020.11.01 |
[수업노트](20.10.16)D+6 padding/margin/img/nth-child,first-child,last-child (0) | 2020.11.01 |
[수업노트](20.10.15)D+5 normalize/상단메뉴구현 (0) | 2020.11.01 |