보충 설명

오전 수업

1. 태그[속성 이름]

예시 :
div[class]
->div 태그안에 class라는 속성을 갖는 요소를 선택하겠다는 뜻 입니다.
a[href]
->a태그 중 href속성을 가지는 요소를 선택을 하겠죠.

2.태그 [속성이름="값"]

위의 방법의 응용버전인데 "값"으로 들어가는 부분이 정확히 일치를 해야 됩니다.
예를 들어서
<style> div[class="red"]{} </style>
<div class="red"></div>라는 태그가 있으면 적용이 되겠지만,
<div class="red blue"></div>이런 class 값에는 적용이 되지 않습니다.

3.태그[속성이름 ~="값"]

이 방법은 위의 응용버전과 다르게 정확히 일치 하지 않아도 적용이 됩니다.
하지만 띄어쓰기나 기호와는 구분이 되어야 합니다.
<style> div[class~="코딩"]{} </style>
<div class="코딩 너무 재밌어"></div>이런식으로 작성을 할 경우 적용이 되지만
<div class="코딩너무재밌어"></div>이렇게 띄어쓰기를 무시하거나
<div class="코딩-너무-재밌어"></div>하이픈을 사용할 경우 적용이 되지 않습니다.

4.태그[속성 이름 *= "값"]

이 방법은 사용하기에 따라서 좋을 수 있을 것 같습니다.
위에서 제가 말한 내용들이 귀찮다 하시는 분들은 사용 하셔도 될 것 같습니다.
<style> div[class*="귀찮으면"]{} </style>
<div class="귀찮으면 아무것도 할 수 없습니다"></div>
<div class="귀찮으면-아무것도_할__수없습니다"></div>
<div class="귀찮으면아무것도할수없습니다"></div> 이런 식으로 작성을 해도 문자열에서
찾아서 적용되는 방식이여서 모든 태그가 적용이 됩니다.

---

CSS 우선 순위 계산법

ID=100점 , class =10점 , tag =1점

예시.
#id .class tag{}

#id .class {}

#id tag{}

Box model

1. Padding은 width나 height에 영향을 주지 않고 밖으로 뻗어나갑니다.
2. Margin은 보이지 않는 영역(박스들 끼리의 영역)을 조절할 수 있습니다.
3. Box-sizing=border-box
   -> border의 크기는 정해진 width와 height의 값 즉 contents의 크기
   안쪽으로 들어오게 만듭니다.

Border의 종류

Border type MDN

MDN에서 필요 할때 마다 찾아보는 걸 추천 드립니다.

라인언 따라 만들기

✍ 전체적인 모습을 만들기 위해서는
Position= relative
Position = absolute 를 알아야 됩니다.
👉 [라이언 형광봉 입니다.]

Margin [위 오른쪽 아래 왼쪽]

👉margin과 padding은 12시부터 시계 방향으로 돌아가면서 값을 설정 해준다고 생각하시면 됩니다.

overflow : hidden

이 기능은 float을 사용 하기 위해서만 사용되는 줄 알았습니다.
하지만 오늘 강사님의 홈페이지에서 스크롤 효과에서 사용할 수 있다는 것을 보니
나중에 실무에서도 사용 할 수 있겠구나 라는 생각이 드네요.

나중에는 이런 이미지도 구현이 가능하지 않을까 생각해 봅니다.