[코드스테이츠 43기/2022.12.22.] CSS 기초

CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 파일을 연결한다.

1
<link rel="stylesheet" href="index.css" />

 

<link> 요소는 HTML 파일과 다른 파일을 연결하는데 사용한다.

<link> 요소의 rel - 연결하고자 하는 파일의 역할이나 특징

href 속성에 파일의 위치를 추가

한 폴더 내에 있으므로 파일 이름만 입력, 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결

 

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은 상단부터 시계방향으로 적용되니 주의할것