지금까지 우리는 우리만의 웹페이지를 만들었습니다.
이제는 그 웹페이지에 글만 쓰는게 아니라 강조하고 싶은 부분이나 조금 더 다르게 표현하고 싶은 부분은 어떻게 해야 하는지 우리는 이것을 태그라고 부르도록 하겠습니다.
그 전에 간단한 단축키 부터 몇가지 알아보고 가겠습니다.
- Ctrl + S = 저장
- Ctrl + O = 새로운 탭에 내 파일 불러오기
- Ctrl(누른상태)+마우스 왼쪽 = 한번에 여러개 선택해서 똑같이 입력하기
- 내가 원하는 글들 선택 후 Tab 키를 누르면 안쪽으로 들여쓰기가 된다.
(->) 방향으로
자주쓰는 태그들
<strong>
<strong> ~~ </strong> = 글씨체 진하게Before -> 진하게
After -> 진하게
<u>
<u> ~~ </u> = (underline) 밑줄Before -> 밑줄
After -> 밑줄
<h1 to h6>
<h1~6> ~~ </h1~6>= (headings) 제목 -> (숫자가 커질 수록 글씨가 작아진다.
일방적인 텍스트 글씨보다 글씨가 두껍다. / 줄바꿈 가능h1글씨
h2글씨
h3글씨
<p>
<p>~~ </p> = (paragraph) = 단락을 표현할 때 사용
단락 마다 의미론적으로 표현 가능
# css 기능 추가 가능 = <p>~~</p> (1단락)
ex) <p style="margin-top:40px"> ~~ </p> -> ~~px(cm)
라고 생각하고 단락 사이 정교하게 조정가능<img> 이미지 수치 단위 및 삽입 방법
HTML 글자 크기를 지정하는 수치 단위 - >px,pt,%,em
px(Pixel/픽셀) : 모니터의 가로,세로로 이루어진 하나의 격자.
모니터의 격자 간격을 픽셀피치 라고 하며 1px은 격자 하나의 크기를 뜻한다.
pt(point/포인트) : 인치(inch)의 개념이고 1인치는 2.54cm이다.
포인트는 1pt~72pt 까지 있다.
%(percent/퍼센트) : 백분율이며 상위요소에 대한 상대적인 비율을 뜻한다.
50% 절반 100% 부모요소와 크기가 같음을 뜻한다.
em(이엠) : 기본적으로 %와 같은 개념, 즉 1em은 현재 지정되어 있는 글자 크기와 같은 크기를 뜻하고
0.5em은 현재 적용되어 있는 크기의 절반 크기 (50%)를 뜻하고 1.5em은 현재 크기의 1.5배 (150%)와 같은 크기다.- 기타 이미지 속성 설정하기.
- src = 이미지 주소 URL
- style = 여백,정렬,너비,높이 등 속성 지정
- border = 이미지 테두리 속성 지정
- alt = 이미지 설명 문구 지정
- 이미지 크기 조절 및 정렬
<img src="~~.jpg" width="100%"> = (image) 이미지(사진)을 ATOM에서 만든
웹페이지에 포함시킬 때 이용하는 기능<src> = (source) = 웹브라우저에 적혀있는 주소를 위치에 이미지로 표현해주는 기능 <width=100%> = 사진 너비를 웹사이트 크기에 알맞게 맞출 때 사용하는 기능<height:100%> = 사진의 높이를 웹사이트 크기에 알맞게 맞출 때 사용하는 기능ex) < img src="이미지주소" style="width:XXpx; height:XXpx;"/>
<div style="text-align : center;> <img src="이미지주소"> </div> = 이미지 가운데 정렬
<div style="clear:both;"></div> = 아래쪽 내용이 따라 올라가지 않게 함.
<img src="이미지주소" style=display:block; margin:0 auto; width:XXpx; height:XXpx;/>
= 이미지를 가운데 정렬 (margin을 0으로 했기 때문에 이미지 위 아래 여백이 0이다.)
* 이미지의 위 아래 쪽 여백을 설정하려면 margin: 20px auto 20px auto; 와 같이
아래쪽 여백에 수치를 지정하면 된다. = (이미지 위 아래 쪽 여백 설정)
* display: block; 속성을 준 것은, 이미지를 하나의 블록(영역)으로 잡아주기 위한 것
<img src="이미지주소" style=float:left(왼쪽) or right(오른쪽);width:XXpx;height:XXpx;/>
= 이미지 왼쪽 or 오른쪽 정렬
<img src="이미지주소" style=float:left; margin-right: XXpx; margin-bottom; 10px;width:XXpx;height:XXpx;/>
= 이미지 왼쪽 정렬(float) + 오른쪽과 아래쪽에 여백(margin) 설정
<img src="이미지주소" style=float: left; clear:both; width:XXpx; height:XXpx/>
= 이미지 왼쪽 정렬(flaot) + 아래쪽 내용이 따라 올라가지 않게 함 (clear:both;)- 사진은 unsplash.com 라는 사이트에서 저작권 없이 자유롭게 다양한 사진 인용 가능합니다.
- 저장된 사진 이름은 편한걸로 바꿔서 src에 이용이 가능합니다.
<li / ul / ol>
- < li > 와 < ul > 태그는 서로 부모와 자식같은 관계이다.
- < li > 태그가 소문단의 정리를 위한 태그라면
< ul > 태그는 그 소문단을 문단별로 정리하기 위한 태그라고 생각하시면 됩니다. - < ol > 태그는 < li > < ul > 태그 안에 숫자 정렬을 잘못 했을시
< ul >태그를 < ol > 태그로 바꾸면서 잘못된 부분을 지우면 자동으로 숫자들이 정렬이 됩니다.
<li> ~~ </li> = (list) = 목차 (제목들 나열) 쓸 때 사용하는 기능<ul> = (Unordered List) = li 목차나 글들의 문단을 나눌 때 사용하는 기능<ol> = (Ordered List) = li , ul에 적혀져 있는 번호(숫자)를 한개 씩 미뤄야 할 때
-> 앞에 숫자를 지우고 ul
-> ol로 바꾸면서 숫자를 지우면 자동으로 넘버링 됨<title> / <UTF-8>
<title> ~~ </title> : 웹페이지의 제목을 나타내는 기능<meta charset="UTF-8"> : Atom의 오른쪽 밑을 보면
다른 채널 및 *UTF-8* 이라는 채널로 저장 돼 있다.
Atom에서 바로 수정을 하고 웹페이지로
바로 옮길 때 글씨가 안깨지게 방지하는 기능<head> / <body>
<head> ~~ </head>* : 타이틀, 즉 본문을 설명해주는
제목부분을 묶을 때 무조건 적어줘야 하는 기능. <body> ~~ </body>* : 본문, 즉 내용 부분을 묶을 때 무조건 적어줘야 하는 기능.<html> / <doctype html>
<html> ~~ </html> : 타이틀과 본문 전체를 묶을 때 무조건 적어줘야 하는 기능.<!doctype html> : 이 문서는 html 이다.
라는 뜻에서 문서의 맨 위에 무조건 적어줘야 하는 기능. - doctype html / html / head / body 태그들의 사용 예시
<a> 링크 태그
<a> 문서 안 링크를 걸 내용 </a> : (anchor) = 링크 걸기
(이 태그만으론 정보가 부족해 링크가 걸리지 않는다.)<a href="링크 주소"> 문서 안 링크를 걸 내용 </a>
(HyperText Reference)
<a> 태그의 시작점에 링크에 걸맞는 정보와 주소를 넣을 때 사용하는 기능.<a href="링크 주소" "target="_blank"> 문서 안 링크를 걸 내용 </a>
새로운 탭으로 열고 싶을 때 사용하는 기능. (*새 탭 추가)<a href="링크 주소" "target="_blank" title="파일명 or "> 문서 안 링크를 걸 내용 </a>
(툴팁) 클릭 전 이 링크가 무엇인지 알려주고 싶을 때 사용하는 기능.