정리/FrontEnd

[CSS] CSS5

개발아기 2023. 3. 10. 17:38

CSS

  • Cascading Style Sheets
  • 스타일을 사용하는 이유
    • 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있음
    • 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있음
  • 웹 페이지를 표현하기 위한 스타일 규칙을 모아놓은 문서

구성

  • 선택자 (Selector), 선언 (Declaration) 두 부분으로 구성됨
  • 선택자는 규칙이 적용되는 Element
  • 선언 부분에는 선택자에 적용될 스타일을 작성
  • 선언은 중괄호로 감싸며, 속성(Property)과 값(Value)로 이루어짐
.Selector{Declaration1: value1; Declaration2: value2;}
  • 속성(Property)은 선택자에서 바꾸고 싶은 요소
    • (color, font, width, height, border, …)
  • 값(value)은 속성에 적용할 값
  • 선택자 그룹화 - 여러 선택자에 동일한 스타일을 적용할 때, comma(,)로 구분하여 나열
  • 선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon(;)으로 구분
  • 주석 : /* 내용 */

스타일 시트 적용

  • 적용 우선 순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일

외부 스타일 시트 적용

  • link tag
    • <link>를 사용하여 외부 스타일 시트를 적용
    • <link>는 <head>안에 작성하며 rel, type, href 3가지 속성을 주로 사용
    • rel은 HTML 페이지와 링크된 파일간의 관계를 의미
    • href는 CSS File 경로
  • style tag
    • <style> tag로도 외부 스타일 시트를 적용 가능. 이는 css 파일 내부에서도 사용 가능하다는 의미
    • @import는 스타일 시트 중 최상단에 위치해야 함
    • @import url("file path"); 또는 @imporot "file path"; 형태로 사용
    • <link>와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입을 설정

내부 스타일시트 적용

  • style tag
    • <style>을 사용하여 내부 스타일 시트를 적용
    • <style> tag 내부에 CSS 규칙을 작성
    • 외부 스타일 시트보다 우선적으로 적용됨
    • <head> tag 내부에 작성해야 함

인라인 스타일 적용

  • 개별 element마다 스타일을 지정하므로 유지보수에 용이하지 않음
  • Style 속성을 사용하고 속성값으로 CSS 규칙을 작성

CSS 상속

  • CSS는 상속을 통해 부모의 속성을 자식 요소에게 상속시킴
  • 모든 속성(프로퍼티)이 상속되는 것은 아님
  • 상속되는 속성
    • Text 관련 속성 : font-family, font-size, font-weight, line-height, text-align
    • opacity, visibility, color, list-style, white-space
  • 상속되지 않는 속성
    • Box Model 관련 : width, height, margin, padding, border, box-sizing, display
    • Position 관련 : position, top/right/bottom/left, z-index, overflow, fload
    • background, vertical-align, text-decoration
  • 상속되지 않는 속성을 상속받는 방법
    • inherit를 사용
      • ex) margin: inherit