참고자료 HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)
< 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 : 적은 이미지 손실 / 투명 & 반투명
'HTML & CSS > html & css 입문' 카테고리의 다른 글
[부스트코스 강의] 3. (2) 시멘틱 마크업 (0) | 2023.11.26 |
---|---|
[부스트코스 강의] 3. (1) 콘텐츠 모델 (0) | 2023.11.26 |
[부스트코스 강의] 2. (3) HTML 태그 ( 폼 요소 ) (0) | 2023.11.26 |
[부스트코스 강의] 2. (2) HTML 태그 ( 테이블 요소 ) (0) | 2023.11.26 |
[부스트코스 강의] 1. HTML 문법 (태그 / 속성 / 중첩 / 빈 태그 / 공백 / 주석 / 문서구조) (0) | 2023.11.24 |