[CSS] 생활코딩 CSS 수업 소개(1) - 박스모델 써먹기(9)

생활코딩 CSS 수업 소개(1) - 박스모델 써먹기(9)

---

1. CSS의 기본 문법

<style> </style>	선택자 O	디자인과 관련된 태그를 가두며 어디서부터 CSS영역인지 표시
style 속성 사용	선택자 X	css의 효과를 입력한다 ex) style = "color:black"

 

2. 선택자 (selector)

- 콤마(,)로 여러 개를 선택할 수 있다

- class를 사용하면 class명 앞에 점(.)을 찍는다 / class="클래스 명" * 클래스는 여러 개 사용이 가능하며 띄어쓰기로 구분함

- id를 사용하면 id앞에 #을 붙여 표시한다 / id="아이디 명" * id는 한 번만 사용 가능하다

- 우선 순위: id > class > tag

 

3. 선언 문법 정리

color : black	색상을 검은색으로 변경한다
text - decoration : none	텍스트를 꾸미지 않는다
text - decoration : underline	텍스트에 밑줄을 추가한다
font - size : ~px	글자의 크기를 ~px로 변경한다
text - align: right/left/center	글자를 오른쪽/왼쪽/가운데 정렬한다

 

4. 박스모델

- block level element: 화면 전체를 쓰는 태그 ex) 제목 태그

* display: inline을 사용하면 속성 변경이 가능하다

- inline element: 자신의 부피만큼 쓰는 태그 ex) 링크 태그

* display: block을 사용하면 속성 변경이 가능하다

- 박스모델 속성

padding - width : 20px	테두리와 글자 사이의 간격
margin : 0	테두리와 테두리 사이의 간격
width : 100px	해당 크기만큼 사용하는 범위가 변경됨

 

- 테두리 / border 속성

border - width : 5px	테두리 굵기를 5px로 지정한다
border - color: red	테두리 색을 빨간색으로 지정한다
border - style: solid	테두리 스타일을 일반으로 지정한다

→ 위의 세 가지 속성을 border : 5px red solid 와 같이 한 번에 표현할 수도 있다.

 

tip!!) 마우스 오른쪽 클릭 후 검사 버튼을 눌러 style이 어떻게 구성되는지 보면서 페이지를 제작하도록 한다 !!