HTML: 2. HTML 태그들

 

 

태그 관련 사이트:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

https://www.w3schools.com/tags/default.asp

https://www.advancedwebranking.com/seo/html-study/#overview

 

<h1>...<h6>

---

제목(HEADING)

<h1>Hello</h1>

문서내의 제목 표현

제목의 레벨에 따라 <h1~h6></h1~h6>

-자동으로 개행, 볼드체 사용 됨

 

⚠️: h1은 오로지 heading 목적으로만 쓰는게 좋음. 볼드체 사용을 위해 X 큰 글씨를 위해 X

 

<p>, <br>

---

단락과 개행(PARAGRAPH, LINEBREAK)

<p>
	This is first paragraph.
</p>

<p>
    This is second paragraph <br>
    This is second paragraph
</p>

<p>를 사용하면 단락을 정의한다.

단락별로 개행이 됨

 

근데 단락 내에  개행이 되도록 하려면
<br>(linebreak) 태그를 쓰면 된다.

<br>은 빈태그이기 때문에 닫는 태그 X

 

 

 

semantic markup

---

텍스트 관련 태그들 (B, I, U, S)(텍스트 표현 태그)

<p>
    <b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
    <u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>

• : (bold) 글자를 굵게 표현함.
• <i>: (italic) 글자를 이탤릭체로 표현한다.(기울여서 표현)
• : (underline) 글자에 밑줄을 표현한다.
• : (strike) 글자에 중간선을 표현한다.

웹문서의 구조와 표현을 분리 하는 과정에서 많은 표현용 태그들이 사라졌고, 그 결과 지금은 표현용 태그가 얼마 남지 않음.

위 태그는 더이상 의미가 없는 표현용 태그이기 때문에 사용할 때는 각별히 주의해야함.

 

HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 표현으로 변경

특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용

 

 

 

[시멘틱=의미론적인]

시멘틱 마크업: 컴퓨터(브라우저)가 잘 이해할 수 있는 코드

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

• 의미에 맞는 요소를 사용
• 문서의 구조화
• 인간과 기계가 모두 이해할 수 있는 것이 목표

태그를 잘써야함.

vs 두 요소가 동일한 모습으로 나타남 그러나 한쪽은 의미가 없고 한쪽은 의미가 있음

 

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닙니다.

<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.(의미추가)

 

<i>는 단순히 기울어진 글자 표현 <em>은 특정부분을 강조

<u>와 <s>는 단순 글자에 선을 그은 것 <ins> <del>은 내용이 새롭게 추가 되거나 삭제되었다는 의미

 

ex) 예를 들어 가격을 세일할 경우 

 

기존 가격을 단순 <s>라고 붙여버리면 그냥 취소선이 붙어버리므로

<del> 100</del>

<ins>50</ins>

이런식으로 표현해줘야함

 

 

 

<a>

---

앵커(ANCHOR)(링크생성태그)

<a href="http://www.naver.com/">네이버</a>

• 다른 문서로 이동할 수 있는 링크를 생성한다
• href: 링크의 목적지가 되는 URL을 정한다.

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러가지 이름으로 불린다.

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 한다

 

 

<a>의 속성들

href: 하이퍼 레퍼런스 링크의 목적지가 되는 URL 삽입

target (_self, _blank)

:링크된 리소스를 어디에 표시할지 나타내는 속성

 

_self는 디폴트 값임 현재 화면에 표시한다는 뜻(새 탭)

_blank 새로운 창에 표시한다는 의미 외부페이지가 나타나게끔하는 속성

 

<a href="www.naver.com" target="_blank">네이버링크</a>

 

기타속성

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

(앞에 html5로 표시된 건 새로 생긴 속성, Obsolete attributes로 표시된 부분은 폐기된속성)

 

 

내부링크를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 함.

 

스크롤 올리기 힘들때 내부링크를 씀

이동하고자 하는 곳의 id 값을 넣고 #를 입력 

 

<a href="#some-element-id">회사 소개로 이동하기</a>

...중략

<h1 id="some-element-id">회사소개</h1>

가고자하는 곳에는 id 속성값을 입력

웹페이지에서 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당함.

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

 

 

 

 

<ul><ol><dl>

---

리스트 ul, ol, dl

ex)실시간 검색어 뉴스 등등

 

UL(Unordered List)

순서가 없는 리스트

콩나물국 레시피
<ul>
    <li>콩나물</li>
    <li>파</li>
    <li>국 간장</li>
    
    ...
</ul>

실행결과

• 콩나물
• 파
• 국 간장

이렇게 나옴

 

 

OL(Ordered list)순서가 있는 리스트

콩나물국 레시피
<ul>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml)만든다</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다</li>
    ...
</ul>

1.  냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml)만든다.
2. 콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.
3. 뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.

ordered list라서 결과에 숫자가 붙여진 채 나옴

 

 

 

DL(Description List)

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적</dd>
    <dt>피그 말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

• <dl>:description list 용어를 설명하는 리스트
• <dt>:definition로 용어를 구분한다.
• <dd>:definition description로 용어의 정의를 나타낸다.

용어 하나에 여러 정의가 들어갈 때

<dd>를 한 개 이상 쓰는 것이 가능

 

 

 

중첩리스트

 

월드컵  조  편성

A 러시아 우루과이 이집트 사우디아라비아

B 이란 스페인 포르투갈 모로코

C 프랑스 덴마크 호주 페루

D 크로아티아 아르헨티나 아이슬란드 나이지리아

를 리스트로 만들어 보자

<h1>월드컵 조 편성</h1>
<ol>
    <li>
    	A조
    	<ul>
            <li>러시아</li>
            <li>우루과이</li>
            <li>이집트</li>
            <li>사우디 아라비아</li>
    	</ul>
    </li>
    <li>
    	B조
        <ul>
    	    <li>이란</li>
            <li>스페인</li>
            <li>포르투갈</li>
            <li>모로코</li>
    	</ul>
    </li>
    <li>
    	C조
        <ul>
            <li>프랑스</li>
            <li>덴마크</li>
            <li>호주</li>
            <li>페루</li>
       	</ul>
    </li>
</ol>

 

 

 

<img>

---

이미지(IMAGE)(닫는 태그가 없는 빈태그임)

<img src="./images/pizza.jpg" alt="피자">

• 문서에 이미지를 삽입한다.
• src: 이미지 경로를 지정한다.[필수]
• alt: 이미지의 대체 택스트를 입력한다(웹접근성면에서 중요)[필수]
• width/height: 이미지의 크기를 지정한다.

여기서 src와 alt는 반드시 들어가야하는 속성임

 

alt의  값은 간단하게 넣는게 좋음

 

 

width/height

width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인측면에서 좋음 

<img src="./pizza-jpg.jpg" alt="피자" width="400">

미입력시, 원본크기로 삽입됨

height width하나만 입력하면 알아서 원본 비율 맞춰서 변경됨

그러나 두가지 다 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경된다.

 

 

src

상대 경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로

절대 경로 :  실제 그 이미지가 위치한 곳의 전체 경로

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

이미지 파일형식

• gif:256색으로 제한적이지만 용량이 작고, 애니메이션과 투명 이미지가 가능하다.
• jpg:높은 압축률과 자연스러운 색상 표현이 가능하여 사진아니 일반적인 그림에 사용
• png: jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

 

 

 

 

Reference

---

본 게시물은 부스트코스 비전공자를 위한 HTML/CSS 강의 수강후 작성되었음.

https://www.boostcourse.org/cs120/lecture/92868?isDesc=false 

비전공자를 위한 HTML/CSS