CSS

parang·2025년 3월 26일

CSS란?
HTML 문서의 디자인을 지정할 때 사용하는 언어.

1. 선택자를 찾는 것이 가장 중요하다. (위치)

선택자가 중요한 이유는 해당 HTML 요소를 선택해서 적용해야 하기 때문이다.

전체 : *
태그 : 태그명
클래스 : .
아이디 : #
속성 : [속성명], [속성명=속성값]
하위-자식 : >
형제 : ~ 
인접 형제 : +
가상 : :nth-child(숫자) {}
      :nth-of-type(2) {}
      :checked  :hover  :focus

선택자를 연습하는 좋은 사이트 하나를 소개한다.

https://flukeout.github.io/

어떤 귀한 분께서 만드신 사이트인데 탁자에 움직이는 물건들을 선택할 수 있도록 선택자를 입력할 수 있게끔 만들어 놓았다. 마치 게임 같아서 선택자를 더 쉽게 이해하고 접근할 수 있다!

2. 우선 순위로 !important 속성을 사용할 수 있다.

CSS에는 우선 순위가 존재한다. 그렇지만 위의 표현을 이용하면, 최우선순위로 만들 수 있다.

3. CSS Layout

Layout이란 HTML 요소 간 위치를 제어할 수 있는 것을 말한다.

가장 많이 사용하는 것은 아래와 같다.

  1. display - block, inline-block
  2. position - justify-content, align-items

선택자와 마찬가지로 레이아웃 선택 문법을 연습하는 좋은 사이트 하나를 소개한다.

https://flexboxfroggy.com/#ko

개구리를 풀잎 위로 안착시키는 게임이다. 이론만 주구장창 보는 것 보다 한번 써 보는게 이해가 더욱 빠르다. 추천!

profile
파랑입니다.

0개의 댓글