[부스트코스 강의] 2. (1) HTML 태그 (제목 / 단락 / 텍스트 / 앵커 / 컨테이너 / 리스트 / 이미지)

참고자료 HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)

HTML elements reference - HTML: HyperText Markup Language | MDN

 

 < h > 제목 태그 (heading) 

<h1> 가장 큼 ~ <h6> 가장 작음

일반 텍스트보다 더 강조됨

 

 

 < p > 단락 태그 (paragraph) 

<p> 사용시 태그 자체에서 자연스럽게 개행

 <br> : 강제 개행

 

 텍스트 관련 태그 

<b> : 굵게
<i> : 기울임
<u> : 밑줄
<s> : 중간선

 

 

 < a > 앵커 요소 (Anchor) 

다른 문서로 이동할 수 있는 링크 생성

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

href : 링크의 목적지가 되는 URL 지정

 

target : 링크된 리소스를 어디에 표시할지

              _self (디폴트) : 현재 화면에 표시

              _blank : 새로운 창에 표시

              _parent, _top : 프레임이라는 특정 조건에서 동작

 

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

.... 중략

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

 

내부링크 : 페이지 내부의 특정 요소로 초점 이동

 

 

 

 의미없이 요소를 묶기 위한 태그 (Container) 

<div> : block-level = 기본적으로 한줄 생성해서 내용 표현  Ex) <p>

<span> : inline-level = 블록레벨 요소의 한줄 안에서 표현되는 요소  Ex) <b>,<i>,<u>,<s>

 

 

 < li > 리스트 (List) 

<ul> : unordered list, 순서 없는 리스트

<ol> : ordered list, 순서 있는 리스트

 

<dl> : 용어(<dt>) 와 그에 대한 정의(<dd>)

<dl>
       <dt>리플리 증후군</dt>
       <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애</dd>
       <dt>피그말리온 효과</dt>
       <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
</dl>

 

 

 

 < img > 이미지 (Image) 

src : 이미지 경로 지정

alt : 이미지 대체 텍스트 입력

width / height : 이미지의 크기 지정

 

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

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

 

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

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

 

 

* gif : 제한적인 색 / 적은 용량 / 투명 이미지 / 애니메이션 이미지

* jpg : 사진 or 그림 / 높은 압축률 / 투명 X

* png : 적은 이미지 손실 / 투명 & 반투명