코드잇 수업자료 참조
<!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>!
<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>
길이를 픽셀 말고 퍼센트(%
)로 설정할 수도 있습니다.
<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;
}
<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
에 스타일을 입혀주면 됩니다. 클래스 이름이라는 걸 나타내는 '.
(마침표)'를 잊지 맙시다!
<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
에 스타일을 입혀주면 됩니다. 클래스 이름을 나타내기 위해 '.
(마침표)'를 붙인 것처럼 아이디를 나타내기 위해서는 '#
(샾 표시)'를 써줘야 합니다.
클래스와 아이디. 얼핏 보기에는 똑같아 보이는데요. 핵심적인 차이점 몇 가지가 있습니다:
<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 스타일을 입혀주기 위해서 <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 코드에 스타일을 입히는 방법에는 세 가지가 있습니다.
<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>
<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>
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 파일로 옮기는 방법도 있습니다!
<!-- 첫 번째 영화: 굿 윌 헌팅 (Good Will Hunting) --><div class="movie">
<!-- 내용 -->
의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'입니다.
/* 영화 제목 */.movie h2 {
color: #4d9fff;
text-align: center;
font-size: 48px;
}
/* 내용 */
의 형태로 되어 있는 부분이 CSS의 '코멘트(comment)'입니다.
(CSS text-decoration property)
(Stack Overflow - Where Developers Learn, Share, & Build Careers)
(JSFiddle)
텍스트의 색을 지정해주기 위해서는 color
속성을 사용하면 되는데요. CSS에서 색을 표현하는 방식이 세 가지가 있습니다.
CSS에서 정해준 색 이름 중 하나를 쓰는 방법이 있습니다. 모든 색이 있지는 않지만, 무려 140개의 색이 대부분 브라우저에서 지원된다고 하네요!
모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있습니다. 이 표현 방식이 바로 'RGB'입니다. 이런 사이트에서 원하는 색을 찾아보세요.
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
값을 사용하면 밑줄이 그어집니다.
h1 {
text-decoration: underline;
}
overline
값을 사용하면 글 위에 줄이 그어집니다.
h1 {
text-decoration: overline;
}
line-through
값을 사용하면 줄이 글을 관통합니다.
h1 {
text-decoration: line-through;
}
none
값을 사용하면 아무 줄도 없습니다. 이게 기본 값입니다!
h1 {
text-decoration: none;
}
<a> 태그와 사용
사실 제가 text-decoration
을 가장 많이 사용하는 경우는 텍스트를 꾸미기 위해서가 아니라 꾸밈을 없애기 위해서입니다. <a>
태그는 기본적으로 밑줄이 그어져 있는데, 이걸 없애기 위해서 text-decoration: none;
을 사용합니다.
<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>
태그의 내용물도 정렬을 할 수 있습니다!
<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
속성을 '완벽하게' 이해하려면 타이포그래피 지식이 조금 필요한데요. 우선은 아주 간단하게만 설명드리겠습니다.
위 사진에 파란 줄 보이시죠? 이 파란 줄 사이가 실제 내용이 들어가 있는 '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
의 공간이 줄어듭니다.
<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;
}
한국어:
베타 폰트 지원
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: "글씨체";
}
한 블록 안에 특정부분만 변화를 주고 싶을 때 사용한다.
div를 사용하면 별개의 다른 블록이 되어 분리된다.