오전 수업
예시 :
div[class]
->div 태그안에 class라는 속성을 갖는 요소를 선택하겠다는 뜻 입니다.
a[href]
->a태그 중 href속성을 가지는 요소를 선택을 하겠죠.
위의 방법의 응용버전인데 "값"으로 들어가는 부분이 정확히 일치를 해야 됩니다.
예를 들어서
<style> div[class="red"]{} </style>
<div class="red"></div>
라는 태그가 있으면 적용이 되겠지만,
<div class="red blue"></div>
이런 class 값에는 적용이 되지 않습니다.
이 방법은 위의 응용버전과 다르게 정확히 일치 하지 않아도 적용이 됩니다.
하지만 띄어쓰기나 기호와는 구분이 되어야 합니다.
<style> div[class~="코딩"]{} </style>
<div class="코딩 너무 재밌어"></div>
이런식으로 작성을 할 경우 적용이 되지만
<div class="코딩너무재밌어"></div>
이렇게 띄어쓰기를 무시하거나
<div class="코딩-너무-재밌어"></div>
하이픈을 사용할 경우 적용이 되지 않습니다.
[속성 이름 *= "값"]
이 방법은 사용하기에 따라서 좋을 수 있을 것 같습니다.
위에서 제가 말한 내용들이 귀찮다 하시는 분들은 사용 하셔도 될 것 같습니다.
<style> div[class*="귀찮으면"]{} </style>
<div class="귀찮으면 아무것도 할 수 없습니다"></div>
<div class="귀찮으면-아무것도_할__수없습니다"></div>
<div class="귀찮으면아무것도할수없습니다"></div>
이런 식으로 작성을 해도 문자열에서
찾아서 적용되는 방식이여서 모든 태그가 적용이 됩니다.
ID=100점 , class =10점 , tag =1점
예시.
#id .class tag{}
#id .class {}
#id tag{}
MDN에서 필요 할때 마다 찾아보는 걸 추천 드립니다.
✍ 전체적인 모습을 만들기 위해서는
Position= relative
Position = absolute 를 알아야 됩니다.
👉 [라이언 형광봉 입니다.]
👉margin과 padding은 12시부터 시계 방향으로 돌아가면서 값을 설정 해준다고 생각하시면 됩니다.
이 기능은 float을 사용 하기 위해서만 사용되는 줄 알았습니다.
하지만 오늘 강사님의 홈페이지에서 스크롤 효과에서 사용할 수 있다는 것을 보니
나중에 실무에서도 사용 할 수 있겠구나 라는 생각이 드네요.
클래스 이름이 ㅋㅋㅋ.. 정리 깔끔하게 잘하셨네요
라이언도 잘보고갑니다~