1. 태그해부학
1) Tag
<tag>내용</tag>
꺽쇠에서 시작해서 꺽쇠에서 끝난다.
2) Attribute
<tag attr="value">내용</tag>
태그가 담지 못하는 추가적인 정보를 넣어주는 역할을 한다.
2. 제목과 문단 Headings Tag Paragraph Tag
1) Headings Tag
🎈 <h1></h1> (heading)
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
어떠한 내용에 대한 핵심을 뽑아 놓아주는 태그이다.
<h1>에서 <h6>까지 순서대로 크기가 작아지면서 마크업을 한다.
2) Paragraph Tag
🎈<p></p> (paragraph)
<p>문단</p>주제에 대해서 설명해주는 태그이다.
3. 강조 Emphasis
특별히 강조하고 싶은 부분을 표현하는 태그이다.
1) Emphasis Tag
🎈 <em></em> (emphasis)
<em>강조</em>
기울기를 표현한다.
2) Strong Tag
🎈<strong></strong>
<strong>강조</strong>
글씨체가 두껍게 표현한다.
4. 링크 Anchor
1) Anchor Tag
🎈 <a></a> (anchor)
<a href="주소" target="_blank">링크</a>
내가 보고 있는 페이지에서 다른 페이지로 이동할 때 링크를 사용하는 태그이다.
2) attribute
👉🏻 href (hypertext reference)
`<a>`를 쓸 때에 href라는 속성을 써야 한다. hypertext reference는 프로그래밍 세계에서는 주소값이라는 뜻에서 많이 사용된다.
어디로 이동해야 할지 반드시 알려줘야 되는 속성이다.
👉🏻 웹 URL
<a href="https://edu.goorm.io">서비스 바로가기</a>
웹 URL을 통해서 이동한다.
👉🏻 페이지 내 이동
<a href="#hello>hello 섹션으로 이동</a>
<section id="hello">hello 섹션입니다.</section>
상대 경로를 사용해서 이동하고자 하는 곳의 id값을 적어주면 이동이 가능하다.
👉🏻 메일쓰기
<a href="mailto:dev.leesaerom@gmail.com">롬에게 메일쓰기</a>
메일주소 앞에 `mailto:`을 적어준다.
👉🏻전화걸기
<a href="tel:01012345678">롬에게 전화걸기</a>
전화번호 앞에 `tel:`을 적어준다.
3) target
<a href="https://www.youtube.com/c/kimbug" target="_blank">김버그</a>
👉🏻 `_blank` : 새 탭을 열어서 이동하는 속성이다.
👉🏻 `_self` : 현재 창에서 여는 속성이다.
5. 이미지 Image
1) Image Tag
<img src="#" alt=""/>🎈<img/>
문서에 이미지를 넣고 싶을 때 사용하는 태그이다.
2) attribute
👉🏻 src (source)
<img src="./images/cat.png" alt="귀여운 고양이" />
이미지 파일의 상대 경로를 적거나 이미지의 주소 값을 넣어주는 속성이다. 확장자 파일을 정확하게 적어줘야 한다.
👉🏻 alt (alternative text)
봐야 할 이미지가 안 뜨는 상황일 때 이미지 대체로 텍스트를 넣어주는 속성이다. 웹을 이용하는 시각장애인들을 위한 스크린 리더라는 웹을 읽어주는 도구가 있다.
6. 목록 Lists
1. List Tag
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
목록을 표현하는 리스트 태그이다.
🎈 <ol></ol> (ordered list)
<h1>급상승 검색어</h1>
<ol>
<li>김버그</li>
<li>프론트엔드 개발</li>
</ol>
요리법이나 실시간 검색어 같은 것들이 순서가 중요한 목록 태그이다.
🎈 <ul></ul> (unordered list)
<h1>개발</h1>
<ul>
<li>웹 개발자</li>
<li>프론트엔드 개발자</li>
</ul>
순서가 얽혀 있어도 별로 큰 의미가 없는 순서가 중요하지 않은 목록 태그이다.
🎈 <li></li> (list item)
<h1>급상승 검색어</h1>
<ol>
<li>
<a href="#">
김버그
</a>
<li>프론트엔드 개발</li>
</ol>내부에 항목들을 나열할 때 쓰는 목록 태그이다. `<li>`안에 `<a>`를 감싸는 방법이 맞다. 그 이유는 `<ul>`과 `<ol>`의 자식요소는 무조건 `<li>`만 가능하기 때문이다.
7. 정의 목록 Description List
1) Description List Tag
사전에서 보면 어떤 단어가 있고 그 단어에 대한 뜻을 알려줄 때 바로 용어를 정의할 때 사용하는 정의 리스트 태그이다. `key-value`로 정보를 제공할 때 사용하는 태그이다. Javascript의 object 배울 때 `{key: value}` 많이 보게 될거다.
🎈 <dl></dl> (description list)
어떤 정보를 제공하고 싶을 때 선언하는 태그이다. `<dl>`은 `<dt>`와 `<dd>`가 함께 따라와야 한다.
🎈 <dt></dt> (description term)
`key`에 해당하는 태그이다.
🎈 <dd></dd> (description data)
`key`에 대한 설명을 할 때 사용하는 `value` 태그이다.
🎈 <dfn></dfn> (definition)
좀 더 구체적으로 정의 내리고 싶을 때 쓰는 태그이다.
👍🏻 Good Description List
<dl>
<dt>김버그</dt>
<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다.</dd>
</dl>
`<dl>` 안에 `<dt>`와 `<dd>`로 작성되어 있는 기본적인 형태이다.
<dl>
<dt>
<dfn>development</dfn>
</dt>
<dd>1. [U] 발달, 성장</dd>
<dd>2. [U, C] (신제품의) 개발; 신개발품</dd>
</dl>
좀 더 정의를 내릴 때 `<dfn>`을 사용해 늬앙스를 풍기게 된다. 그리고 정의를 내릴 때 용어에 대한 설명이 여러 개 사용할 수 있어서 `<dd>`를 여러 개 사용할 수 있다.
<dl>
<dt>김버그</dt>
<dt>Kimbug</dt>
<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다.</dd>
</dl>용어가 같은 의미이거나 비슷한 계열이다.
<dl>
<dt>김버그</dt>
<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다.</dd>
<dd>
<a href="https://youtube.com/c/kimbug">김버그 채널</a>
</dd>
</dl>
정의에 대한 설명이 두개가 있다. 혼합된 케이스이다.
<dl>
<dt>김버그</dt>
<dt>Kimbug</dt>
<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다.</dd>
<dd>
<a href="https://youtube.com/c/kimbug">김버그 채널</a>
</dd>
</dl>
두개의 용어와 두개의 설명으로 한 세트가 만들어진다.
<dl>
<div>
<dt>사과</dt>
<dd>사과에 대한 설명</dd>
</div>
</dl>
용어와 설명이 있고 하나의 정의에 대한 세트를 만들어서 `<div>`로 묶어있다.
<dl>
<div>
<dt>사과</dt>
<dd>사과에 대한 설명</dd>
</div>
<div>
<dt>바나나</dt>
<dd>바나나에 대한 설명</dd>
</div>
</dl>
두개의 용어와 두개의 설명으로 각각 `<div>`로 묶어서 보기 좋게 사용하고 있다.
👎🏻 Bad Description List
<dl>
<dt>김버그</dt>
<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다.</dd>
<dt>데벨업</dt>
</dl>
새로운 `<dt>`가 있는데 그에 대한 설명이 없다.
<dl>
<section>
<dt>김버그</dt>
<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다.</dd>
</section>
</dl>
`<dl>`는 직계 자식으로 쓸 수 있는 태그는 오로지 `<div>`, `<dt>`, `<dd>`밖에 없다.
8. 인용 Quotations
1) blockquote Tag
<blockquote>인용 내용</blockquote>
다른 사람의 말을 인용을 할 때 쓰는 태그이다.
🎈 <blockquote></blockquote>
<blockquote cite="https://edu.goorm.io">
우리가 겪을 수 있는 가장 아름다운 체험은 신비다. <br/>
신비는 모든 참 예술과 과학의 근원이다.
<cite>알버트 아인슈타인</cite>
</blockquote>
어떤 문단이나 내용 전체가 하나의 인용문일 경우에 사용하는 태그이다.
2) attribute
👉🏻 cite
인용문을 가져온 사이트를 속성으로 쓴다.
🎈 <cite></cite>
인용문의 출처가 텍스트일 경우에 쓰는 태그이다.
🎈 <q></q>
<blockquote cite="https://bit.ly/2mvSYrT">
<p>
<q>It's not happy news for the emperor penguin,</q> said Hal Castellan of the U.S. Woods Hole Oceanographic Institution, a co-author of the study in the journal Nature Climate Change.
</p>
<cite>
“Emperor Penguin Population to Slide Due to Climate Change”, Scientific American, June 29, 2014, https://bit.ly/2mvSYrT
</cite>
</blockquote>
문장 내에 살짝 들어가는 작은 일부분에 인용을 할 때 쓰는 태그이다. ""가 생긴다.
9. 흑마법 Div & Span
1. Division Tag
🎈 <div></div>
<div>
<h1>안녕하세요.</h1>
<p>롬입니다.</p>
<a href="#">아무렇게나 쓰고 있어요.</a>
</div>아무런 의미가 없는 태그이다. CSS 스타일링할 때 유용하다.
🎈 <span></span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <span style="color: #ff4949;">Voluptates, eveniet?</span>
</p>
텍스트의 일부분을 그룹핑을 할 때 쓰는 태그이다. 가능하면 꼭 필요한 순간이 아니면 안 쓰려고 한다.