코딩하는 몽구리

HTML/CSS 시작하기 본문

HTML&CSS

HTML/CSS 시작하기

코딩구리 2022. 12. 17. 18:38

 

<!DOCTYPE html>

<title> My First Website </title>

<h1> My First Page </h1>

<h2> I love HTML! </h2>

<h3> Hello world! </h3>

<p> Hello <b>Codeit</b> </p>

 

1. HTML 태그 정리

<!DOCTYPE> 선언

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

 

<title> 태그

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

 

<h1>~<h6> 태그

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

 

<p> 태그

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

 

<b> 태그

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

 

<i> 태그

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

 

Phrase Tags

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

 

<strong> 태그

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

 

<em> 태그

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

<meta charset= "utf-8">

한글이 깨지는 것을 방지해줍니다. 

 

2. 기본CSS속성 정리

폰트 크기

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

텍스트 정렬

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

<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&CSS' 카테고리의 다른 글

텍스트 색정리  (0) 2022.12.18
코멘트 정리  (0) 2022.12.18
스타일을 적용하는 방법들  (0) 2022.12.18
클래스(class)와 아이디(id)정리  (0) 2022.12.17
옵셔널 태그  (0) 2022.12.17
'HTML&CSS' Related Articles more