지금까지 우리는 우리만의 웹페이지를 만들었습니다.
이제는 그 웹페이지에 글만 쓰는게 아니라 강조하고 싶은 부분이나 조금 더 다르게 표현하고 싶은 부분은 어떻게 해야 하는지 우리는 이것을 태그라고 부르도록 하겠습니다.

그 전에 간단한 단축키 부터 몇가지 알아보고 가겠습니다.

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> 
(툴팁) 클릭 전 이 링크가 무엇인지 알려주고 싶을 때 사용하는 기능.

Author And Source

이 문제에 관하여(코딩의 기본 문법 - 태그 <atom , vscode>), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ayj6449/코딩의-기본-문법-태크

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

코딩의 기본 문법 - 태그 <atom , vscode>

자주쓰는 태그들

<strong>

<u>

<h1 to h6>

h1글씨

h2글씨

h3글씨

<p>

<img> 이미지 수치 단위 및 삽입 방법

<li / ul / ol>

<title> / <UTF-8>

<head> / <body>

<html> / <doctype html>

<a> 링크 태그