TIL 2. HTML/CSS

epi·2021년 3월 15일

코드잇 수업자료 참조

HTML 📝

`<!DOCTYPE>` 선언

HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야 합니다. 이전의 html 버전을 사용하려면 <!DOCTYPE>을 복잡하게 써야 하지만, 그냥 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다:

<!DOCTYPE html>

`<title>` 태그

페이지의 제목은 <title> 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이 곳에 들어갑니다.

<title>My First Website</title>

`<h1>`~`<h6>` 태그

한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그 중 가장 중요한 머리말은 <h1>(heading 1), 그 다음으로 중요한 머리말은 <h2>(heading 2). 이런 식으로 <h6>(heading 6)까지 작성할 수 있습니다.

각 머리말의 크기는 나중에 마음대로 설정할 수 있지만, 따로 설정해주지 않으면 <h1>부터 순서대로 작아집니다.

`<p>` 태그

보통 문단은 <p>(paragraph) 태그 안에 넣습니다. 물론 직접 설정할 수도 있지만 <p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있습니다.

`<b>` 태그

텍스트를 굵게 쓰고 싶으면 'bold'의 약자인 <b> 태그를 사용하면 됩니다.

Hello <b>World</b>!

`<i>` 태그

텍스트를 날려 쓰고 싶으면 'italics'의 약자인 <i> 태그를 사용하면 됩니다.

Hello <i>World</i>!

Phrase Tags

<b> 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어줍니다. 둘 다 '시각적인 특징'만 갖고 있는 태그인데요. HTML에서는 시각적인 특징 뿐만 아니라 의미도 담고 있는 phrase tag가 있습니다.

`<strong>` 태그

Hello <strong>World</strong>!

<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적입니다. 지금 겉보기에는 두 태그가 똑같지만, 스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의 웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽을 수 있겠죠?

`<em>` 태그

Hello <em>World</em>!

<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적입니다. em은 'emphasized'의 줄임말입니다.

한글 지원

<meta charset="utf-8">

링크 첨부

현재 탭에서 이동

<a href="https://www.gov.kr/yearendpay_main_e2e.html">정부24</a>

새로운 탭에서 이동

<a href="https://www.gov.kr/yearendpay_main_e2e.html"target="_blank">정부24</a>

상위 폴더로 이동( ../ )

<a href="../index.html">index</a>

이미지 삽입

인터넷에서 가져올 경우

<img src="https://mblogthumb-phinf.pstatic.net/MjAxOTEwMTVfMTE2/MDAxNTcxMTQ0MjIwODE4.Yd4D6HvDtIQ600HpJJJbadGBT8aVJ91nQ4OUp6jd7oYg.uvrak7O9UOuiIKfWDh7KG906yeEYBSptki2qdXw__YMg.PNG.azzi_01/01_.png?type=w800" width="600" height="300">

저장 된 파일을 가져올 경우

<img src="폴더이름/파일이름.jpg">

사진크기 변경

<img src="폴더이름/파일이름.jpg" width="670" heigght="300">

이미지 가운데 정렬

<style>
 img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
</style>

퍼센트

길이를 픽셀 말고 퍼센트(%)로 설정할 수도 있습니다.

HTML

<img src="https://i.imgur.com/CDPKjZJ.jpg" width="100%">
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="50%">
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="25%">

img {
  display: block;
}

- HTML 요소에게 이름 붙이기

1. 클래스 (class)

HTML

<p class="big-blue-text">First</p>
<p>Second</p>
<p class="big-blue-text">Third</p>

.big-blue-text {
  color: blue;
  font-size: 48px;
}

위의 코드에서 첫 번째 p 요소와 세 번째 p 요소는 "big-blue-text"라는 클래스 이름을 갖고 있습니다. 그러면 css에서 .big-blue-text에 스타일을 입혀주면 됩니다. 클래스 이름이라는 걸 나타내는 '.(마침표)'를 잊지 맙시다!

2. 아이디 (id)

HTML

<p id="favorite-text">First</p>
<p>Second</p>
<p>Third</p>

#favorite-text {
  color: blue;
  font-size: 48px;
}

위의 코드에서 첫 번째 p 요소는 "favorite-text"라는 아이디를 갖고 있습니다. 그러면 css에서 #favorite-text에 스타일을 입혀주면 됩니다. 클래스 이름을 나타내기 위해 '.(마침표)'를 붙인 것처럼 아이디를 나타내기 위해서는 '#(샾 표시)'를 써줘야 합니다.

클래스 vs 아이디

클래스와 아이디. 얼핏 보기에는 똑같아 보이는데요. 핵심적인 차이점 몇 가지가 있습니다:

같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없습니다.
한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있습니다!)

`<div>`가 줄바꿈이 되는 이유

자동 줄바꿈이 되는 이유는 div 태그가 'block' 요소이기 때문입니다. 어떤 'block' 요소든 특별한 설정 없이는 독단적인 줄에 있으려고 하는 성향이 있죠. p 태그나 h3 태그 모두 'block' 요소이기 때문에 줄바꿈이 됩니다.

심지어 a같은 'inline' 요소들에게도 이렇게...

a {
  display: block;
}

설정을 해주면 줄바꿈 현상을 보실 수 있습니다.

`<div>`의 다른 기능

h1 태그를 쓰면 폰트가 크게 나오고, 위아래로 margin이 자동으로 설정되죠? p 태그를 써도 margin같은 기본 설정들이 있고요. h1 태그에서 그런 폰트 굵기, 크기, 여백 등 기본 설정을 빼면 그냥 div 태그나 거의 다름 없습니다. 마찬가지로 p 태그에서 그런 기본 설정을 빼면 div 태그와 마찬가지라고 볼 수 있습니다.

본론으로 돌아와서 정리하자면, div 태그는 별다른 기능이 없는 'block' 요소입니다. 하지만 별다른 기능(별다른 설정)이 없기 때문에 더 유연하게 쓸 수 있습니다.

아래의 경우를 보세요.

<div class="lecturer">
  <div class="name">박지성</div>
  <div class="age">26</div>
</div>

써놓은 세 개의 요소가 모두 div 태그입니다. 'lecturer' div는 강사에 대한 정보를 묶기 위함입니다. 'name' div와 'age' div는 그냥 텍스트를 담고 있지만, h1이나 p같은 기본 태그들이 의미적으로 적합하지 않다고 느껴져서 그냥 div 태그를 사용한 경우입니다.

CSS 🎨

사이트에 CSS 스타일을 입혀주기 위해서 <style> 태그를 사용할 수 있습니다.


<style>
/* 여기에 CSS 코드 */
</style>

아주 기본적인 CSS 속성 몇 가지만 봅시다. 그냥 간단하게 사용할 수 있는 정도로만 보고, 이후 섹션에서 각 속성을 더 자세히 살펴보겠습니다.

폰트 크기

CSS에서 폰트 크기를 표현할 수 있는 단위 몇 가지가 있는데, 그 중 픽셀(px)이 가장 많이 사용됩니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<style>
h2 {
  font-size: 72px;
}
</style>

텍스트 정렬

글은 왼쪽, 가운데, 또는 오른쪽으로 정렬할 수 있습니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1 {
  text-align: left;
}

h2 {
  text-align: right;
}

h3 {
  text-align: center;
}
</style>

텍스트 색

글에 색을 입히고 싶으면 color 속성을 사용하면 됩니다. CSS에서 색을 표현하는 방식 몇 가지가 있는데, 나중에 살펴보도록 합시다.

컬러 코드

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1 {
  color: lime;
}

h2 {
  color: hotpink;
}

h3 {
  color: blue;
}
</style>

여백

margin 속성을 사용하면 요소 사이의 여백을 설정할 수 있습니다. 여백의 크기도 픽셀(px) 단위로 설정해주시면 됩니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1 {
  margin-bottom: 80px;
}

h3 {
  margin-left: 50px;
}
</style>

스타일을 적용하는 방법

HTML 코드에 스타일을 입히는 방법에는 세 가지가 있습니다.

1. `<style>` 태그

<style>
  h1 {
    color: green;
    text-align: center;
  }

  p {
    font-size: 18px;
  }
</style>

<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

2. `<style>` 속성

<h1 style="color: green; text-align: center;">Hello World!</h1>
<p style="font-size: 18px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

3. 외부 CSS 파일 + 태그

css/styles.css

h1 {
  color: green;
  text-align: center;
}

p {
  font-size: 18px;
}

index.html

<link href="css/styles.css" rel="stylesheet">

<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

어떤 방법을 써야 할까?

일반적으로는 외부 CSS 파일에 스타일을 쓰고 HTML 코드에서 <link> 태그로 연결해주는 것이 가장 좋은 방식입니다. 하지만 조금씩 새로운 스타일을 시도해볼 때에는 간편함을 위해서 <style>태그를 쓰는 방법 또는 style 속성에서 테스트를 하고, 나중에 외부 CSS 파일로 옮기는 방법도 있습니다!

🍯TIP!

코멘트

HTML 코멘트 ( command + / )

<!-- 첫 번째 영화: 굿 윌 헌팅 (Good Will Hunting) --><div class="movie">

의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'입니다.

CSS 코멘트 ( command + / )

/* 영화 제목 */.movie h2 {
  color: #4d9fff;
  text-align: center;
  font-size: 48px;
}

/* 내용 */의 형태로 되어 있는 부분이 CSS의 '코멘트(comment)'입니다.

유용한 웹사이트

HTML,CSS 설명

(CSS text-decoration property)

가장 큰 개발 포럼

(Stack Overflow - Where Developers Learn, Share, & Build Careers)

질문할 때 유용한 웹사이트

(JSFiddle)

텍스트 색 정리

텍스트의 색을 지정해주기 위해서는 color 속성을 사용하면 되는데요. CSS에서 색을 표현하는 방식이 세 가지가 있습니다.

1.색 이름

CSS에서 정해준 색 이름 중 하나를 쓰는 방법이 있습니다. 모든 색이 있지는 않지만, 무려 140개의 색이 대부분 브라우저에서 지원된다고 하네요!

2.RGB 값

모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있습니다. 이 표현 방식이 바로 'RGB'입니다. 이런 사이트에서 원하는 색을 찾아보세요.

3.HEX 값 (16진법)

HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식입니다. 83는 16진법으로 53이고, 237는 16진법으로 ED이고, 65는 16진법으로 41입니다. 따라서 rgb(83, 237, 65)는 #53ED41과 같은 거죠.

폰트 굵기 설정

폰트 굵기를 설정하기 위해서는 font-weight 속성을 사용하면 됩니다.

사용법

사용 가능한 값은 얇은 순서로 100, 200, 300, 400, 500, 600, 700, 800, 900입니다. 100이 가장 얇고, 900이 가장 굵다는 뜻이죠.

참고로 font-weight: normal;은 font-weight: 400과 똑같고, font-weight: bold;는 font-weight: 700과 똑같습니다!

주의 사항

150, 230과 같은 값은 사용할 수 없습니다. 만약 사용한다면 그냥 기본값으로 설정됩니다.

또 주의할 점이 있습니다. 폰트나 브라우저에 따라서 지원하는 폰트 굵기 값이 다릅니다. 어떤 폰트는 100, 400, 700만 지원될 수도 있다는 뜻이죠. 잘 확인하고 사용하시길 바랍니다!

텍스트 꾸미기

text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있습니다. 사실 옵션도 몇 가지 없고 딱히 예쁘지도 않지만 한 번 살펴봅시다.

Underline

underline 값을 사용하면 밑줄이 그어집니다.

h1 {
  text-decoration: underline;
}

Overline

overline 값을 사용하면 글 위에 줄이 그어집니다.

h1 {
  text-decoration: overline;
}

Line-through

line-through 값을 사용하면 줄이 글을 관통합니다.

h1 {
  text-decoration: line-through;
}

None

none 값을 사용하면 아무 줄도 없습니다. 이게 기본 값입니다!

h1 {
  text-decoration: none;
}

`<a> 태그와 사용`

사실 제가 text-decoration을 가장 많이 사용하는 경우는 텍스트를 꾸미기 위해서가 아니라 꾸밈을 없애기 위해서입니다. <a> 태그는 기본적으로 밑줄이 그어져 있는데, 이걸 없애기 위해서 text-decoration: none;을 사용합니다.

HTML

<a href="https://www.codeit.kr">구글로 가는 링크</a>
<a class="no-decoration" href="https://www.google.com" target="_blank">구글로 가는 링크</a>

.no-decoration {
  text-decoration: none;
}

텍스트 정렬

text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있습니다.

#p1 {
  color: red;
  text-align: left;
}

#p2 {
  color: green;
  text-align: right;
}

#p3 {
  color: blue;
  text-align: center;
}

예제

<p> 태그나 헤더 태그들 뿐만 아니라 <div> 태그의 내용물도 정렬을 할 수 있습니다!

HTML

<div class="navigation">
  <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a>
</div>

.navigation {
  text-align: center;
}

폰트 크기

절대적인 방법

line-height

line-height를 사용하면 줄간격을 조절할 수 있습니다. 사실 line-height 속성을 '완벽하게' 이해하려면 타이포그래피 지식이 조금 필요한데요. 우선은 아주 간단하게만 설명드리겠습니다.

위 사진에 파란 줄 보이시죠? 이 파란 줄 사이가 실제 내용이 들어가 있는 'content area'(콘텐츠 영역)입니다. font-family와 font-size에 따라서 'content area'가 정해지고, line-height는 'content area'에 영향을 주지 않습니다.

line-height를 통해서는 각 줄이 실질적으로 차지하는 공간을 정해줄 수 있습니다. 예를 들어서 99px로 설정하면 'content area'보다 40px이 많기 때문에 위 아래로 20px의 공간이 추가로 생깁니다.

반대로 40px로 설정하면 'content area'보다 19px이 적기 때문에 위 아래로 -9.5px의 공간이 줄어듭니다.

코드 예시

HTML

<p class="p1">gallantly</p>
<p class="p2">gallantly</p>
<p class="p3">gallantly</p>

<p class="p1">gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly</p>
<p class="p2">gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly</p>
<p class="p3">gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly</p>

p {
  font-size: 40px;
  color: white;
}

.p1 {
  background-color: red;
  line-height: normal;
}

.p2 {
  background-color: green;
  line-height: 80px;
}

.p3 {
  background-color: blue;
  line-height: 30px;
}

폰트 설정

구글폰트

Google Fonts

한국어:
베타 폰트 지원
command + F를 눌러서 korean 검색

<link href="[https://fonts.googleapis.com/earlyaccess/hanna.css](https://fonts.googleapis.com/earlyaccess/hanna.css)" rel="stylesheet");>

h1 {
font-family: 'Hanna', sans-serif;
}

폰트 파일 사용하기

@font-face {
  src: url("경로");
  font-family: "글씨체";
}

p {
  font-family: "글씨체";
}

span 태그

한 블록 안에 특정부분만 변화를 주고 싶을 때 사용한다.
div를 사용하면 별개의 다른 블록이 되어 분리된다.

epi

👀

이전 포스트

TIL 1. JavaScript

다음 포스트

TIL 2. HTML/CSS

HTML 📝

<!DOCTYPE> 선언

<title> 태그

<h1>~<h6> 태그

<p> 태그

<b> 태그

<i> 태그

Phrase Tags

<strong> 태그

<em> 태그

한글 지원

링크 첨부

이미지 삽입

퍼센트

- HTML 요소에게 이름 붙이기

1. 클래스 (class)

2. 아이디 (id)

클래스 vs 아이디

<div>가 줄바꿈이 되는 이유

<div>의 다른 기능

CSS 🎨

폰트 크기

텍스트 정렬

텍스트 색

여백

스타일을 적용하는 방법

1. <style> 태그

2. <style> 속성

3. 외부 CSS 파일 + 태그

어떤 방법을 써야 할까?

🍯TIP!

코멘트

HTML 코멘트 ( command + / )

CSS 코멘트 ( command + / )

유용한 웹사이트

텍스트 색 정리

1.색 이름

2.RGB 값

3.HEX 값 (16진법)

폰트 굵기 설정

사용법

주의 사항

텍스트 꾸미기

Underline

Overline

Line-through

None

<a> 태그와 사용

텍스트 정렬

예제

폰트 크기

line-height

코드 예시

폰트 설정

구글폰트

폰트 파일 사용하기

span 태그

TIL 1. JavaScript

TIL 3. JSP

0개의 댓글

`<!DOCTYPE>` 선언

`<title>` 태그

`<h1>`~`<h6>` 태그

`<p>` 태그

`<b>` 태그

`<i>` 태그

`<strong>` 태그

`<em>` 태그

`<div>`가 줄바꿈이 되는 이유

`<div>`의 다른 기능

1. `<style>` 태그

2. `<style>` 속성

`<a> 태그와 사용`