내용 정리 CSS - 선택자와 스타일링.

이유승·2023년 7월 25일
0

내용 정리

목록 보기
3/31
post-thumbnail

1. 선택자(selector)란?

CSS의 효과가 적용될 태그를 지정해주는 요소.

  • ID 선택자, 전체 문서에서 하나의 태그를 식별하기 위해서만 사용하는 선택자.

-> 우선순위가 가장 높음.

-> css 선택자에서는 #을 사용해서 id임을 표시.

-> 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함.

  • Class 선택자, 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용하는 선택자.

-> -> class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음.

-> css선택자에서는 '.'을 사용해서 class임을 표시.

  • Type 선택자, 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용하는 선택자.

-> css선택자에서는 태그의 이름을 사용함.

  • 선택자의 특징.
  1. 특정 엘리먼트의 하위에 나오는 엘리먼트를 선택할 수 있다.

  2. 하나의 css선언을 여러 엘리먼트 셀렉터에 적용할 수 있다.

  3. 특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 수 있다.



2. 스타일링

  • 텍스트 스타일링

-> font-family, 글꼴을 종류를 정의하는 속성.

-> font-size, 글꼴의 크기를 정의하는 속성.

-> color, 글자에 컬러를 부여하는 속성.

-> left, right, center, justify 글자의 위치를 정렬하는 속성.

-> text-decoration, 글자에 밑줄을 부여하는 속성.

-> line-height, 행간격을 지정하는 속성.

-> letter-spacing, 문자와 문자사이의 간격을 지정하는 속성.

-> vertical-align, 텍스트의 수직 정렬을 지정하는 속성.

-> white-space, 줄바꿈되는 방식을 지정하는 속성.

  • 링크 스타일링
  • 표 스타일링
  • 배경 스타일링

등등.. 이 외에도 수많은 속성들이 존재한다.



0. 참고자료

생활코딩, CSS

유노코딩, 입문자를 위한 CSS 기초 강의

profile
프론트엔드 개발자를 준비하고 있습니다.

0개의 댓글