kimgusan / CSS

CSS란?

CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 태그들이 각종 미디어에서 어떻게 보이는지를 정의하는데 사용됩니다. 스타일을 HTML 문서로부터 분리하여 관리할 수 있게 해줍니다.

CSS를 사용하는 이유

HTML만으로 웹 페이지를 제작할 경우, 각 태그의 세부 스타일을 일일이 지정해주어야 하며, 완성 후에도 스타일의 변경 및 유지보수가 어렵습니다.
이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다.
CSS를 사용함으로써 웹 페이지의 스타일을 별도의 파일로 저장하고 쉽게 제어할 수 있게 됩니다.
이는 웹 사이트의 스타일을 일관성 있게 유지하고 유지보수를 용이하게 합니다.

CSS 문법

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

   	---  ----------  ------     -----    -----
     [선택자]  속성명  속성값    속성명   속성값
  	----------------------------------
        	[선언부]

1. CSS의 문법은 선택자와 선언부로 구성된다.

2. 선택자는 CSS를 적용하고자 하는 HTML 태그를 가리키고 선언부는 중괄호({})를 사용하여 전체를 둘러싼다.

3. 각 선언은 CSS 속성명과 속성 값을 콜론(:)으로 연결한다.

4. CSS 선언은 언제나 마지막에 세미콜론(;)으로 끝마친다.

# CSS 주석

CSS에서 주석을 사용할 때에는 /* */ 사이에 내용을 입력합니다.

예시:

p {
    color: blue;
} /* p 태그의 글자 색상은 파란색입니다. */

CSS 선택자

1. 전체 선택자

   • 스타일은 모든 요소에 적용할 때 사용한다.
   • 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며, 전체 선택자는 asterisk(*) 기호를 사용한다.

2. 태그 선택자

   • 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
   • 선택자 위치에 태그명을 작성하면 사용된 모든 해당 태그에 동일한 스타일이 적용된다.

3. 클래스 선택자

   • 클래스 선택자는 특성 집단의 여러 요소를 한 번에 선택할 때 사용한다.
   • 같은 클래스 이름(class="")을 가지는 요소들을 모두 선택해주고, 스타일 적용 시 선택자에 ".클래스명"을 작성해준다.

4. 아이디 선택자

   • 아이디 선택자는 특정 요소를 선택할 때 사용한다.
   • 스타일을 지정할 때 사용되며, 선택자 부분에 "#아이디명"을 작성한다.

5. 그룹 선택자

   • 여러 선택자에 같은 스타일을 적용할 경우 쉼표로 구분해서 여러 선택자를 나열한 후, 스타일은 한 번만 정의한다.

캐스케이딩(Cascading)

하나의 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이 때 충돌을 피하기 위해서 CSS 적용 우선순위가 필요하다.

1. 중요도:

   • CSS가 어디에 선언되어 있는지에 따라서 우선순위가 달라진다.
     1. 인라인 스타일 (HTML 태그 내부에 style 속성으로 사용)
     2. 내부 스타일 시트 (HTML 문서의 style 태그 안에 위치)
     3. 외부 스타일 시트 (CSS 파일을 외부에 따로 만들어서 불러오는 방법)
     4. 웹 브라우저 기본 스타일

2. 명시도:

   • 명확하게 특정할 수록 우선순위가 높아진다.
     1. !important
     2. 인라인 스타일
     3. 아이디 선택자
     4. 클래스 선택자
     5. 태그 선택자
     6. 전체 선택자
     7. 상속받은 속성

3. 선언 순서:

   • 나중에 선언된 스타일이 우선 적용된다.

시맨틱 태그

시맨틱(Semantic): "의미가 있는"

HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다.

태그의 종류

• <div>: non-semantic 태그, 안에 들어간 내용의 의미를 유추하기 어렵다.
• <header>: semantic 태그, 상단, 헤더를 의미하는 태그
• <nav>: semantic 태그, 메뉴, 네비게이션을 의미하는 태그
• <main>: semantic 태그, 내용의 중심을 의미하는 태그
• <aside>: semantic 태그, 사이드에 위치하는 공간을 의미하는 태그
• <section>: semantic 태그, 여러 중심 내용을 감싸는 공간을 의미하는 태그
• <article>: semantic 태그, 글자가 많이 들어간 부분을 의미하는 태그
• <footer>: semantic 태그, 하단, 푸터를 의미하는 태그