🌎 Web/CSS

[CSS] CSS란?

오늘 ONEUL 2022. 3. 20. 22:25

CSS란?

CSS (Cascading Style Sheets)

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. 오로지 디자인을 위한 언어이기 때문에 HTML을 이용하여 스타일 작업을 하는 것보다 훨씬 효율적이고, 유지보수에 용이하다.

 

 

 

 

CSS 문법

/* 예시 */

p {
  color: red;
  text-align: center;
}

예시) 모든 <p> 요소는 빨간색 텍스트 색상으로 가운데 정렬된다.

 

 

 

 

CSS 선택자

스타일 작업은 문서의 상단부터 하단 순서로 적용되기 때문에 선택자의 활용을 어떻게 하느냐에 따라 코드의 효율성이 달라진다. 스타일을 적용할 HTML 요소를 가리키는 선택자(selector)는 다음과 같다.

  1. 단일 선택자(태그 선택자, class 선택자, id 선택자)
  2. 결합, 조합 선택자
  3. 의사 선택자
  4. 속성 선택자

 

 

 

 

CSS 주석(Comments)

/* 이것은 한줄짜리 주석이다. */

p {
  color: red; /* 원하는 곳에 추가할 수 있다. */
}

/* 
이것은 두 줄짜리 주석이다.
몇 줄이라도 가능하다.
*/
  • 코드에 대한 설명이나 디버깅을 위해 작성한 구문을 의미한다.
  • 웹 브라우저에 해석되지 않는다.
  • 절대로 주석 내부에 또 다른 주석을 넣어서는 안 된다.
  • 특정 부분 CSS 주석 단축키는 Ctrl + Shift + /

 

 

 

 

CSS 적용

  1. 인라인 스타일(Inline style) - HTML의 style 속성을 이용하여 개별적으로 태그에 스타일을 적용하는 방법
  2. 내부 스타일 시트(Internal style sheet) - HTML 문서 내의 <head> 태그에 <style> 태그를 이용하여 특정 문서의 스타일을 적용하는 방법
  3. 외부 스타일 시트(External style sheet) - 외부에 작성된 스타일 시트 파일(.css 확장자)을 이용하여 웹사이트의 전체적인 스타일을 적용하는 방법

 

 

 

 

※ 참고자료

http://www.tcpschool.com/css/intro

https://www.w3schools.com/css/default.asp

 

저작자표시