[코드스테이츠 43기/2022.12.22.] CSS 기초
CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 파일을 연결한다.
1
<link rel="stylesheet" href="index.css" />
CSS 스타일을 적용할 수 있는 방법
그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일,
CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 내부 스타일 시트,
그리고 앞서 설명한 외부 스타일 시트입니다.
*인라인 스타일 예제
1
<nav style="background: #eee; color: blue">...</nav>
<Class>
여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분한다.
* 요소를 만들거나, 요소에 스타일링을 적용할 때는 항상 이름과 목적이 일치하는지 잘 살펴보세요.
1
<li class="menu-item selected">Home</li>[코드] 하나의 요소에 여러 class를 적용하는 방법
<글꼴>
글꼴의 속성은 font-family입니다.
1
2
3
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}[코드] font-family 속성을 통해 글꼴(폰트)을 설정할 수 있습니다.
글꼴의 이름은 따옴표를 붙여서 적용할 수 있습니다. 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있습니다. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있습니다. fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책입니다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있습니다. 입력된 순서대로 fallback이 적용됩니다.
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
<center> <font>를 사용하지 말아야 하는 이유
HTML의 초기에는, 스타일을 별개로 정의한다는 컨셉이 없었습니다. 그래서 <center>가운데 정렬</center> 혹은 <font color="#ff0000">빨간 글자</font>와 같이 사용했습니다. 그러나 지금은 관심사 분리라는 패러다임을 적용하여, 더 이상 이 태그(<center></center>, <font></font>)를 사용하지 않습니다. HTML 파일로는 구조를 설계하는 일에만 신경 쓰고, CSS 파일로는 스타일링만 담당하게 작성해 주세요.
block과 inile
block inline-block inline
| 줄바꿈 여부 | 줄바꿈이 일어남 | 줄바꿈이 일어나지 않음 | 줄바꿈이 일어나지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
* block 요소의 대표적인 예는 <div>, <p> 입니다.
* inline 요소의 대표적인 예는 <span>입니다.
기억하면 됩니다.
[그림] border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.
* margin은 상단부터 시계방향으로 적용되니 주의할것