DAY-32. CSS 기초 태그

🎨 2022-04-18

CSS 기초

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

🔔css

• 웹 페이지를 이루는 html 요소들의 스타일을 꾸며줄 수 있는 기능 -> html 요소들이 사용자들에게 어떤 식으로 보일지를 결정해주는 기능

css 방식

• inline 방식 : html 요소의 태그 자체에 style 속성을 부여하는 방식

• 내부 스타일 시트 : 하나의 html 파일 안에서

• external 방식 : 외부에 독자적인 stylesheet 파일을 만들어서 스타일 속성값을 별도로 모아두고, 그 파일을 import

🔔css 적용 우선순위(중요도 / 명시도 / 선언순서)

1. 속성값 뒤에다가 !important
2. inline 방식으로 적용된 style
3. #id 선택자
4. class, 가상 클래스 선택자
5. tag 요소 선택자 (p, div, span)

font

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔선택자

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

태그 선택

• 기본 속성 선택자 : 태그 선택자와 함께 사용, 태그 선택자[] 속성 표시

• 문자열 속성 선택자 : 속성 값에서 특정한 문자열을 확인 스타일 적용

• 태그 선택자[속성~=값] : 속성 값이 특정한 값을 문자열로 포함하는 경우 선택 (띄어쓰기 기준)

• 태그 선택자[속성|=값] : 속성 값이 특정한 값을 문자열로 포함하는 경우 선택 (- 기준)

• 태그 선택[속성^=값] : 속성 값이 특정한 값으로 시작하는 태그를 선택

• 태그 선택[속성$=값] : 속성 값이 특정한 값을 끝나는 태그를 선택

• 태그 선택[속성*=값] : 속성 값이 특정한 값을 포함하는 태그를 선택

• not() 부정 선택자 : ()의 값이 아닌 경우 선택

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

<💡diner문제 26~32번>

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

자식 및 후손 선택자

• 자식 선택자 : 부모요소를 기준으로 바로 아래 요소들 선택
  • 사용법 : 부모선택자 > 자식선택자 {설정 내용;}
• 후손 선택자 : 부모요소를 기준으로 아래의 모든 요소를 선택
  • 사용법 : 부모선택자 자식 선택자 {설정 내용;}
• 자식을 제외한 후손 선택
  • 사용법 : 부모선택자 * 후손선택자 {설정 내용;}
• 스타일 속성 중에서 몇몇 속성의 경우에는 상속이 적용돼서 부모에게 적용된 속성이 자식 요소한테도 모두 적용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

❗ 자식 요소를 기준으로 해서 사용 (부모인 test에 하는게 아님)

1. first-child
2. last-child
3. nth:child()

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

동위 선택자

동위 관계에 있는 태그들을 선택할때 사용

• 동위선택자a + 동위선택자b : a선택자를 통해 선택된 태크 바로 뒤에 있는 b선택자 태그만 선택
• 동위선택자a~동위선택자b :a선택자를 기준으로 뒤에 오는 모든 b선택자에 해당하는 태그를 선택

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

반응 선택자

사용자의 움직임에 따라서 달라지는 선택자

선택자:active -> 사용자가 해당 태그에 마우스를 클릭했을 때 선택

선택자:hover -> 마우스가 요소에 올라가 있을때

선택자:focus -> 해당 요소가 활성화된 상태이거나 클리이 될 때

선택자:disabled -> 해당 요소가 비활성화된 상태라면

input:checked 기본 체크 크기였다가 체크하면 커짐

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔float

요소들을 공중에 띄우는 속성 div의 block 속성 무시

레이아웃

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.