2024.11.15 [html, css]

노트로 돌아가기

 

이전글 2024.11.14 [html, css]

다음글 2024.11.18 [html, css]

---

 

문제 - 무지개를 만들어주세요.

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

margin 개념

-block 요소를 정렬 하는 속성이다.

-margin-left 는 0이 기본 값이다.

-margin-left값을 auto로 풀어주지않으면, margin-right값은 적용할 수 없다.

-margin-left margin-right를 둘다 auto로 하면 개체는 화면 가운데로 이동한다.

 

 

문제 - bnx 사이트의 상단 이미지 4개 까지만 구현해주세요.

See the Pen 문제 - bnx 사이트의 상단 이미지 4개 까지만 구현해주세요. by se.eun (@se-eun) on CodePen.

 

See the Pen 문제 - bnx 사이트의 상단 이미지 4개 까지만 구현해주세요. by se.eun (@se-eun) on CodePen.

child를 활용한 풀이

- child를 활용한게 더 간단하고 좋은 것 같다.

 

 

class 는 .name 으로 선택하고

id는 #name 으로 선택할 수 있다.

class와 id 중에 id 가 더 상위의 개념이다.

 

border-radius 속성

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

색상 코드 기본개념

#ffffff	#000000	#ff0000	#00ff00	#0000ff
white	black	red	green	blue

 

 

text의 기본 color 값은 black이 아닌 inherit "상속"이다.

즉 지정된 값이 없으면 부모의 값을 따라서 적용된다.

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

html normalize

See the Pen a태그 노멀라이징 by se.eun (@se-eun) on CodePen.

 

body에는 기본적으로 margin값이 들어가 있다.

따라서 margin: 0;을 넣어 여백을 없애준다.

a태그에는  color: inherit;을 적용시킴으로써 body의 컬러 값을 따라가게 된다.

 

 

문제 - 메뉴를 구현해주세요.(1차 메뉴까지만, width, height 사용금지)

 

-조건

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;, 이 작업을 마지막에 한, 이유 : 어느정도 작업 후, 세밀한 차이점 맞추는 차원에서 진행(처음에 해도 됨)

See the Pen Untitled by se.eun (@se-eun) on CodePen.