html 기초 정리 - (1) 강조, 링크, 이미지, 목록, 정의, 인용

frenchkebab·2021년 10월 15일

김버그 - html은 재미있다 강의 정리

목록 보기

1/29

1. 강조

em 태그와 strong 태그의 차이?

없음. 그냥 끌리는 대로 쓸 것!
<em> 의 경우 기울이기, <strong>의 경우 굵게 표시를 하지만,
'브라우저에게 이 부분이 중요하다고 알려주는 것' 이 중요하다!
(스타일은 얼마든지 css로 바꿀 수 있다!)

em 태그 사용

<p>
  가끔 눈물을 흘린다. 눈물을 참을 수 없는 나 자신이 싫은 순간도 있다. 아픈 마음을 달래기 위해, 소리치며 울 수 있다는 건
  좋은 거야. 그렇지? 눈물은 슬픔을 위한 것만은 아니니까.
  <br />
  난 눈물이 좋다.
  <br />
  아니, <em>머리가 아닌 마음으로 우는 내가 좋다.</em>
</p>

결과

strong 태그 사용

<p>
  가끔 눈물을 흘린다. 눈물을 참을 수 없는 나 자신이 싫은 순간도 있다. 아픈 마음을 달래기 위해, 소리치며 울 수 있다는 건
  좋은 거야. 그렇지? 눈물은 슬픔을 위한 것만은 아니니까.
  <br />
  <br />
  난 눈물이 좋다.
  <br />
  아니,
  <strong>머리가 아닌 마음으로 우는 내가 좋다.</strong>
</p>

결과

2. 링크(Anchor)

기능1) 웹 url

이미 잘 알고 있음.

<a href="https://velog.io/@frenchkebab">frenchkebab</a>

기능2) 페이지 내 이동

페이지 내에서 해당 id로 이동할 수 있음

<!-- <section id="hello"></section> 태그로 이동 -->
<a href="#hello">hello</a>

기능3) 메일 쓰기

<a href="mailto:frenchkebab@gmail.com">
  mail
</a>

기능4) 전화 걸기

<a href="tel:01012345678">
  frenchkebab에게 전화 걸기
</a>

target="_blank" 속성

<a href="https://velog.io/@frenchkebab" target="_blank">
  frenchkebab
</a>

클릭하면 새 탭에서 열림

예시 1

<strong>Be Really Excellent</strong>

<h1>구름EDU 클라우드 SW교육환경</h1>

<p>
  스크래치3, 엔트리부터 파이썬, C언어까지 설치가 전혀 필요없고 강력한 LMS와 연동된 SW교육환경이 눈앞에 펼쳐집니다.
  누구나 SW에 대한 지식과 경험을 나눌 수 있고, 누구나 SW를 배울 수 있는 환경! 지금 경험해보세요!
</p>

<a href="https://edu.goorm.io">서비스 바로가기</a>

'Be Really Excellent' 이라는 문구를
1) h1으로 할지
2) strong으로 할지
3) strong으로 해서 h1태그 안에 넣을 지

는 내가 알아서 의미에 맞게 판단하면 된다!

예시 2

<a href="https://velog.io/@frenchkebab" target="_blank">
  <h1>Subscribe Frenchkebab</h1>
  <p>이 배너를 클릭하시면 Frenchkebab의 블로그로 이동합니다.</p>
</a>

3. 이미지(img)

img 태그

<img src="#" alt=""/>

alt는 뭘까?

대체 텍스트
1. 네트워크 문제로 인해 이미지가 보이지 않는 경우를 위해
2. 시각장애인들이 스크린 리더를 이용하는 경우를 위해

예시

4. 목록(ul, ol, li)

★★★ <ul> 과 <ol>의 직계 자식 요소는 <li>만 올 수 있다!! ★★★

ul 태그 예시

<h1>개발</h1>

<ul>
  <li>웹 개발자</li>
  <li>서버 개발자</li>
  <li>프론트엔드 개발자</li>
  <li>자바 개발자</li>
  <li>안드로이드 개발자</li>
  <li>iOS 개발자</li>
  <li>파이썬 개발자</li>
  <li>시스템,네트워크 관리자</li>
</ul>

실제 결과

실제로 이렇게 결과가 나오더라도 style="list-style-type: none;" 을 넣어주면 간단히 앞에 점을 없앨 수 있다.

중요한 것은 브라우저에게 '이 것은 순서가 없는 리스트이다' 하고 알려주는 것이다!

ol 태그 예시

<h1>급상승 검색어</h1>

<ol>
  <li>Frenchkebab</li>
  <li>프론트엔드 개발</li>
  <li>백엔드개발</li>
  <li>주니어개발자</li>
  <li>Goorm</li>
  <li>Frontend</li>
  <li>개발</li>
  <li>구름IDE</li>
  <li>vs code</li>
  <li>toulousekebab</li>
</ol>

실제 결과

마찬가지로, 숫자 자체가 중요한 것이 아니라,
브라우저에게 '순서가 있는 리스트이다' 하고 알려주는 것이 중요하다!

ul, ol의 직계 자식은 li 태그만 가능하다!

실시간 검색어를 마크업 하는 경우, 아래 둘 중에 어느 것이 맞을까?

1번

<ol>
  <a href="#"><li>Frenchkebab</li></a>
</ol>

2번

<ol>
  <li><a href="#">Frenchkebab</a></li>
</ol>

당연히 2번 이다. 왜? 제목에서 알 수 있듯이 ul과 ol의 직계 자식은 li 태그만 올 수 있기 때문이다!

5. 정의 목록 (dl)

dl
dt
dfn
dd

description list. 잘 나오지 않지만 의외로 요긴하게 쓰일 수 있는 녀석임!

dl태그를 사용하는 경우

용어를 정의할 때
key-value로 정보를 제공할 때

dl 태그

: description list

'나 이제 dl 써서 정의 리스트 쓸거야!' 라고 선언

dt 태그

: description term

용어, key 값에 해당함

dd 태그

: description data

용어에 대한 설명 혹은 key에 대한 value 를 의미함

dfn 태그

: defnition

좀 더 사전적으로 용어에 대한 정의를 내리고 싶은 경우.

좋은 예시 1

<dl>
  <dt>frenchkebab</dt>
  <dd>폭풍같이 성장할 개발자 지망생</dd>
</dl>

좋은 예시 2

: dd가 2개인 경우

<dl>
  <dt>
    <dfn>development</dfn>
  </dt>
  <dd>1. [U] 발달, 성장</dd>
  <dd>2. [U, C] (신제품의) 개발; 신개발품</dd>
</dl>

의미가 여러개일 수 있으므로, dd가 여러개일 수 있음.

좋은 예시 3

: dt가 2개인 경우

<dl>
  <dt>frenchkebab</dt>
  <dt>프렌치케밥</dt>
  <dd>최고의 개발자가 될 남자</dd>
</dl>

dt가 2개가 왔으므로, 두 용어가 비슷하거나 한 경우임.
dd의 경우 앞의 두 dt에 대한 설명

좋은 예시 4

: dd가 2개 & a태그

<dl>
  <dt>프렌치케밥</dt>
  <dd>최고의 개발자가 될 남자</dd>
  <dd>
    <a href="https://velog.io/@frenchkebab">frenchkebab 블로그
  </dd>
</dl>

좋은 예시 5

: dt가 2개, dd가 2개

<dl>
  <dt>frenchkebab</dt>
  <dt>프렌치케밥</dt>
  <dd>최고의 개발자가 될 남자</dd>
  <dd>
    <a href="https://velog.io/@frenchkebab">frenchkebab 블로그
  </dd>
</dl>

좋은 예시 6

: div를 사용하는 경우

<dl>
  <div>
    <dt>사과</dt>
    <dd>사과에 대한 설명</dd>
  </div>
  <div>
    <dt>바나나</dt>
    <dd>바나나에 대한 설명</dd>
  </div>
</dl>

dt와 dd에 대한 세트를 묶어줌

나쁜 예시 1

<dl>
  <dt>frenchkebab</dt>
  <dd>최고의 개발자가 될 야심찬 남자</dd>
  <dt>헤르민</dt>
</dl>

두 번째 dt에 대한 설명이 따르지 않음

나쁜 예시 2

<dl>
  <section>
    <dt>프렌치케밥</dt>
    <dd>최고의 개발자가 될 남자</dd>
  </section>
</dl>

dl 태그의 직계 자식으로는 div, dt, dd 만 가능하다.

나쁜 예시 3

<dt>
  frenchkebab
</dt>

dt와 dd는 반드시 dl의 자식 요소로만 존재할 수 있다

6. 인용 (blockquote, q)

blockquote (q보다 더 많이 사용)
q

blockquote 태그

<blockquote cite="https://velog.io/@frenchkebab">
  우리가 겪을 수 있는 가장 아름다운 체험은 신비다.<br />
  신비는 모든 참 예술과 과학의 근원이다.
  <cite>알버트 아인슈타인</cite>
</blockquote>

q 태그

보통은 blockquote를 훨씬 많이 사용하지만, 문단 내 살짝 한줄로 인용되는 경우 등은 q 태그를 훨씬 더 많이 사용한다.

<blockquote cite="https://bit.ly/2mvSYrT">
  <p>
    The study is the first to project the long-term outlook for Antarctica's largest penguins, which can grow 1.2 meters
    (four ft) tall, seeking to fill a gap in understanding climate change and wildlife in one of the remotest parts of
    the planet.
  </p>
  <p>
    Overall, numbers were set to fall by at least 19 percent from current levels by 2100 as sea ice melts. And
    two-thirds of colonies of the birds, which have distinctive golden head patches, would decline by more than half, it
    said.
  </p>
  <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>
</blockquote>

<cite>
  “Emperor Penguin Population to Slide Due to Climate Change”, Scientific American, June 29, 2014,
  https://bit.ly/2mvSYrT
</cite>

인용한 출처는 cite 속성으로 url을 넣어줄 수 있다.