CSS 문법과 박스 모델

 

 

 

 

CSS 문법

- div { background-color : blue; } 맨 앞에 요소를 선택하여 입력하고(선택자) 중괄호 내부에 세부 사항을 선언

- html 문서에 적용하는 방식

  1. 내부 : html 문서 <style></style>태그 내에 입력. 주로 head 태그 내에 입력하지만 body에 입력해도 동작은 가능.

  2. 외부 : css파일 별도 생성 후 html 문서 head 태그 내에 <link type="text/css" rel="stylesheet" href="style.css> 입력.

  3. 인라인 : <p stype="color: yellow">yellow color</p> 형태로 기술

 

 

 

선택자(selector)

- 타입 선택자 : div { background-color : blue; }

- 아이디 선택자 : #color { background-color : blue; } 요소에서 id는 하나만 호출할 수 있음.

  ex) <div id="color">

- 클래스 선택자 : .color { background-color : blue; } 요소에서 클래스는 하나만 호출할 수 있음.

  ex) <div class="color style basic">

- 이 외 전체 선택자, 속성 선택자, 의사 선택자가 있음.

 

 

 

색상 표현

- 이름 : "blue"

- 16진수 : #FF00FF (R, G, B 각 두자씩)

- 10진수 : rgb(255, 0, 0)

- 퍼센트 : rgb(100, 0%, 50%)

 

 

 

텍스트 / 폰트 스타일

- text(정렬, 간격, 그림자 등) : https://www.w3schools.com/css/css_text.asp

CSS Text

- font(폰트, 스타일, 사이즈 등) : https://www.w3schools.com/css/css_font.asp

CSS Fonts

 

 

 

박스 모델 (box model)

- 웹 브라우저는 각 HTML 요소를 사각형으로 간주하고 웹 페이지 위에 그리게 됨

- 각 요소를 박스 형태로 그리는 것을 박스모델이라고 함

- content > padding > border > margin

- margin과 padding은 투명하며, width와 height 속성을 이용해 박스 크기를 설정할 수 있음.

- padding : https://www.w3schools.com/css/css_padding.asp

- border : https://www.w3schools.com/css/css_border.asp

                https://www.w3schools.com/cssref/pr_border.asp (속성)

- margin : https://www.w3schools.com/css/css_margin.asp