CSS (1) Basic

CSS(Cascading Style Sheets)
 - 구조화된 문서(HTML)에 어떤식으로 랜더링 할 것인지를 정의하는 언어
 - CSS는 HTML등 각 요소의 스타일을 정의하여 화면에 어떻게 랜더링하면 되는지 브라우저에게 설명해주는 언어(스타일시트)

 

CSS 관련 용어

 1. 셀렉터(선택자)
    - CSS를 통해 HTML 요소의 스타일을 적용하고자 할 때 그 해당요소를 선택하는 방법이자 수단

  ⓐ 선택자의 종류
    1) html 선택자 - 태그명 그 자체를 작성
    2) id 선택자(단수) - #ID명
    3) class 선택자(복수) - .class명
    4) 그룹선택자 - 여러개의 태그, id 클래스 작성후로 구분

 

 2. CSS문법

// 선택자 선언시작     속성명(프로퍼티)   선언구분자  속성값     선언구분자  선언끝
h1           {      background-color        :         blue          ;        }

  ⓐ. 프로퍼티(속성)
    - 셀렉터로 HTML요소를 선택하고 블록 내에 프로퍼티값을 지정하는 것으로 HTML 요소에 스타일을 부여할 수 있음
      (이미 지정된 프로퍼티명의 사용이 필요하다)

 3. css의 적용
  ⓐ. 인라인 선택자(인라인 스타일 / 인라인 시트)
    - html 태그 내에 style을 부여하는 방법
    - 해당 태그에만 스타일을 부여할 수 있고 꼭 필요한 경우에만 사용
  ⓑ. 내부 선택자(내부 스타일 / 내부 시트)
    - html 문서 내에 style 태그를 사용해서 스타일을 부여하는 방법
  ⓒ. 외부 선택자(외부 스타일 / 외부 시트)
    - .css확장자 파일을 링크해서 하나의 파일에서 스타일을 부여하는 방법

 

 

 

※ 스타일 적용의 우선순위     인라인 > 내부 > 외부 > 기본   - 내부 스타일 시트 위치에 따라 외부 스타일시트가 먼저 적용되는 사례가 발생
EX)    <style>         body{            background-color: red;         }     </style>     <link rel="stylesheet" href="style.css">	<link rel="stylesheet" href="style.css"> <style>       body{          background-color: red;       }  </style>
css에는 background-color: blue; 적용 시 왼쪽에는 blue가 / 오른쪽에는 red가 적용되었다.