KDT 웹 풀스택 사전교육 DAY01(CSS)

개발자·2022년 5월 30일
0
post-thumbnail
post-custom-banner

CSS(Cascading Style Sheets)

  • HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트 에 표현되는 방법을 정해주는 스타일시트 언어.
  • CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다. 다만 예외로 마진, 패딩, 보더 등의 박스모델 관련 속성은 상속되지 않는다. 물론 inherit 값을 줘서 강제로 상속시킬 순 있다.
  • HTML5 이후, Web 어플리케이션 개발을 위해 CSS, JS 등이 등장
  • HTML로 뼈대를 만들고 CSS로 예쁘게 꾸미고, Javascript로 기능들을 구현

선택자

  • CSS는 HTML 요소의 style(design, layout etc)을 정의 하여야 하므로 CSS 사용을 위해서는 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다.
  • 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단

값(value)

  • 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위 등의 특정 단위로 지정

전체 선택자(Universal Selector)

  • 호출 방법 : *
  • HTML 문서 내의 모든 요소를 선택
  • HTML을 포함한 모든 요소가 선택

태그 선택자(Tag Selector)

  • 호출 방법 : 지정된 태그명을 입력
  • 해당 태그를 모두 호출

ID 선택자(ID Selector)

  • 호출 방법 : #
  • ID 속성 값이 같은 요소를 선택
  • 중복이 안되는 유일한 값

Class 선택자(Class Selector)

  • 호출 방법 : .
  • Class 속성 값이 같은 요소를 선택
  • Class는 중복 가능!

CSS 속성 배우기

  • color
  • backgorund-color
  • text-decoration
  • width, height
  • a:hover
profile
I DEVELOP THEREFORE, I AM 😄
post-custom-banner

0개의 댓글