코딩독학) CSS란? CSS 문서의 기본 형식과 선택자

CSS (Cascading Style Sheets)

 

기존의 html 문서는 디자인 요소를 넣으려면 html 문서마다 디자인 요소를 적용해줘야했다. 그러나 디자인 요소가 변경될 때마다 그 방대한 문서를 모두 수정하는 것은 불가능한 일이었고, 디자인 요소를 가진 파일만 CSS라는 문법으로 따로 분리하여 관리하니 유지 보수가 매우 쉬워졌다. 

 

CSS 파일은 .css 라는 확장자를 가진 파일로 html 문서와 연결되어 사용된다. 

link 태그를 head 영역에 넣어주며, rel 속성으로 stylesheet이라는 것을 알려주며, href 속성에 연결할 css파일의 주소를 적어준다.

<link rel="stylesheet" href="example.css">

 

CSS 파일 안에는 보통 '선택자'라고 부르는 CSS를 적용할 요소를 지정해서 중괄호{} 안에 적용할 요소를 적는다.

 

출처: w3schools.com

Selector : 선택자

Property: 속성

Value : 값

 

위의 그림에서 보면, h1 태그를 선택한 것이고 중괄호 안의 내용은 h1 태그의 속성을 컬러는 블루, 폰트 사이즈는 12px로 적용하겠다는 뜻을 CSS 문법을 사용하여 나타내고 있다. Property를 먼저 적고, : 표시 뒤에 적용할 값을 적는 방식으로 되어있다.

 

CSS 선택자를 훈련할 수 있는 아주 재밌는 게임을 드림코딩 by 엘리 선생님이 가르쳐주셨는데 마지막 레벨까지 깼다!

관심 있으신 분들은 한번 해보시길...

https://flukeout.github.io/

CSS Diner

 

출처

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

CSS Syntax

https://www.youtube.com/watch?v=gGebK7lWnCk