[CSS] 기초 공부 2

폰트

폰트(글씨체)는 폰트명을 직접 작성함으로써 지정한다. 하나의 글씨체 이름이 여러 단어로 이루어져 있다면 쌍따옴표로 묶어주고 아니면 그냥 기술한다. 또한 가장 먼저 서술된 폰트가 없다면 그 뒤의 폰트가 적용되도록 설정된다. 내가 지정한 폰트가 다 없을 경우 알아서 선택되도록 serif, sans-serif, cursive, monospace 중 특성을 가진 폰트를 알아서 선택하도록 할 수 있다.

 

font-family : "Times New Roman", Times serif;

 

font-family : 돋움, 굴림, 고딕, 궁서

 

접속하는 사용자의 컴퓨터에 따라 없는 폰트가 있을 수 있느니 잘 확인해서 써야한다. 특히 영문 폰트는 쉽게 적용이 가능하지만 한글 폰트는 제약이 많다.

---

크기의 단위

글씨나, 컨테이너의 크기를 결정할 때 기본 단위는 px, pt, em, % 등이 있다.

• px : 화면의 pixel 개수의 단위, 해상도에 따라 화면에 보이는 실제 크기가 다를 수 있다.
• pt : 포인트 단위로 1 포인트는 1/72 인치 기준으로 인쇄시에도 비슷한 크기로 인쇄된다.
• em : 상대 크기, (부모 요소에서) 기존에 사용된 크기에 비해 얼마의 비율의 크기로 결정할지(1.0em = 100%)
• % : 상대 크기, 부모 요소의 컨테이너 크기에 비해 얼만큼의 크기를 차지할지

---

문장, 문단과 관련된 스타일

text-align, text-indent, text-decoration

• text-align : 정렬 방식, left, right, center, justify 중 선택
• text-indent : 첫 글자 들여쓰기 수준, px 등을 이용해서 들여쓰기 적용
• text-decoration : 글자 장식, underline, overline, line-through 적용

---

크기 속성

• width : 너비 값
• height : 높이 

{
    width : 200px;
    height : 100px;
}

 

% 로 크기로 지정한다고 했을 경우, 부모 요소가 500px이면 자식 요소에 50% 크기가 적용돼서 250px가 된다.

---

CSS 셀렉터

내부 / 외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법

• tag 선택자 : html 문서의 모든 특정 태그를 선택할 때 사용
• id 선택자 : html 문서의 하나의 요소를 특정해서 선택할 때 사용
• class 선택자 : html 문서의 여러 요소를 그룹으로 선택할 때 사용

---

 tag 선택자

• html 태그의 이름으로 바로 선택할 수 있다.
• 어떠한 기호로 붙이지 않고 태그 이름을 바로 사용한다.
• 모든 문서 내 태그에 적용된다.

<p> ... </p> → p {
                      ... css 속성 선언 ...
                }

---

id 선택자

• html 태그의 속성으로 id를 지정/선언할 수 있다.
• 하나의 id는 문서 내 하나만 존재해야 한다.
• # 기호로 표현한다.

<p id="description-text-1"></p>
			↓
# description-text-1 {
	... css 속성 선언 ...
}

---

class 선택자

• html 태그의 속성으로 class를 지정할 수 있다.
• 하나의 class는 문서 내 여러 개에 지정할 수 있다.
• . 기호로 표현한다.

<p class="description-text"></p>
<p class="description-text"></p>
<p class="description-text"></p>

		↓
        
 .description-text {
 	... css 속성 선언 ...
}