반응형 웹 실전 프로젝트 #3 ~ #4 (블록 레벨요소와 인라인요소, 기본요소)
HTML, CSS 2020. 7. 16. 14:21블록 레벨 요소 (Block-level Elements)
각 요소들은 블록의 성질을 가지고 있어 화면상 줄바꿈현상이 일어난다
인라인 요소 (Inline Element)
인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없다
한줄로 출력된다
블록 레벨 요소와 인라인요소의 특성
마크업을 할때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 오류를 방지 할수 있다
인라인 요소에는 일반적으로 블록 레벨 요소가 자식으로 올수 없다
블록레벨요소
- 줄바꿈이 일어난다
- 텍스트(문자)와 인라인 요소를 자식요소로 포함 할수 있다
- 블록레벨 요소를 자식 요소로 포함 할수 있는 요소와 포함 할수 없는 요소가 있다
인라인요소
- 줄바꿈이 일어나지 않는다
- 텍스트(문자)와 인라인 요소를 자식으로 포함 할수 없다
- 블록레벨 요소를 자식으로 포함할수 없다
| 컨텐츠 종류 | 내용 | 해당요소 |
| 메터데이터 컨텐츠 Metadata Content |
<head> 태그 안에 포함되는 요소들로 컨텐츠의 표현, 동작 설정, 문서간 관계를 설정, 정보 전달을 포함 하는 요소 |
<base>, <link>, <meta>, <noscript>, <script>, <style>, <title> 등.. |
| 플로우 컨텐츠 Flow Content |
<body> 태그안에 포함되는 대부분의 요소들로 내용 흐름에 대한 요소를 의미 | <h1>, <h2>, <address>, <p>, <a>, <img>, <ul>, <table>, <dl>, <form>등... |
| 섹션 컨텐츠 Sectioning Content |
heading과 flooter의 범위를 정하는 요소를 의미 | <article>, <aside>, <nav>, <section> |
| 헤딩 컨텐츠 Heading Content |
섹션의 헤더를 정의 하는 요소 | <h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
| 프레이징 컨텐츠 Phrasing Content |
텍스트를 마크업 하는 요소를 의미 | <a>, <em>, <strong>, <sub>, <sup>, <label> 등... |
| 임베디드 컨텐츠 Embedded Content |
HTML문서에 다른 리소스를 삽입 하는 요소 | <img>, <audio>, <video>, <iframe>등... |
| 인터렉티브 컨텐츠 Interactive Content |
사용자의 상호작용을 위한 요소 | <a>, <button>, <audio>, <video>, <select> 등... |
컨텐츠 모델에 대한 내용 아래 참고
https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html
3.2.5 Content models — HTML5
www.w3.org
기본요소
제목 <h1> ~ <h6> | 블록 레벨 요소
HTML문서에 제목(Heading)을 정의 할때 사용
낭독기에서 제목의 수준으로 바로 이동 할수 있기 때문에
1 -> 6순으로 정의 하는것이 좋다
보통 <h2>태그부터는 같은 레벨의 제목 태그를 여러번 정의 할수도 있다
문단 <p> | 블록 레벨 요소
<p></p>
HTML문서에 단락(paragraph)을 정의 하는데 사용
텍스트와 인라인 요소를 포함 할수 있지만 블록 레벨 요소는 포함 할수 없음
<p>태그 안에 [Enter] 키를 눌러 행을 바꾸는것이 라니라
<br>태그를 사용해야만 행을 바꿀수 있다
만약, 줄바꿈과 공백, 들여쓰기등을 일반 문서 편집기 (메모장) 처럼 있는 그대로 나오게 하고 싶다면
<pre> 태그로 마크업 한다
주소 <address> | 블록레벨요소
텍스트와 인라인 요소를 포함 할수 있고
<h1> ~ <h6>, <section>, <article>, <aside>, <nav>, <header>, <footer>와 같은 일부 블록 레벨 요소들을 포함 할수 있다
<address>주소, 이메일, 전화번호</address>
<address><h1>반응형웹</h1></address>
<address>태그는 보통 footer태그내에 많이 정의 된다
링크 <a> | 인라인요소
다른 HTML문서의 이동(외부링크)나 동일한 HTML문서, 이메일 주소에 링크를 지정
href 속성은 링크의 목적지를 지정
HTML5에서는 일부 블록 요소를 포함 할수 있음
<input>, <button> 다른 link(<a>)등을 요소들은 포함 할수 없음
<a href="#">반응형웹</a>
<a href="#"><button>이동</button></a>
#은 id 속성의 기호
본문 바로가기텍스트를 클릭 했을때 content를 id로 하고 있는 요소로 이동 하라는 것임
이것이 내부링크임
내부링크는 HTML문서가 길어져 컨텐츠 내용이 브라우저상에 다 안보일경우 사용하면 문서 내 위치로 이동할수 있음
여기서는 본문 내용이 브라우저에 보이기 때문에 본문 바로가기 눌러도 위치 이동이 일어나지 않음
<a href="#">처럼 #만 있고 id가 없을 경우 <a>요소를 클릭 할경우 웹 문서의 최상단으로 이동하게 되는데
이런경우 <a href="javascript:;">으로 처리 하면 이동을 막을수 있음
<a>태그 속성중에 target속성은 링크된 HTML문서를 어떤방식으로 브라우저에 보여줄것인가에 대한 속성임
target속성값에는 _self, _blank, _parent, _top이 있는데 이중에서 _blank를 가장 많이 사용함
_blank는 링크된 웹 문서를 브라우저에서 새 탭(새 창)으로 보여줌
만약에 자바스크립트로 새창을 표시 하는 경우 꼭 title(툴팁, 보조설명)속성을 사용해서 새탭(새창)으로 표시 된다는것을 알려줘야 함
절대 경로 : href속성값이 항상 같은 경로
상대 경로 : HTML문서의 위치를 기준으로 이동 하려는 HTML문서의 경로
웹 접근성을 준수한 HTML문서를 제작 할때 반복 되는 영역을 건너 뛰고 핵심적인 컨텐츠 영역으로 바로 갈수 있는 수단을 만들어 줘야 하는데 이것을 '건너뛰기 링크' 일면 Skip Navigation(스킵 네비게이션)이라고 한다
Skip Navigation은 <a>태그의 내부 링크 방식으로 마크업한다
건너뛰기 링크는 Body태그에서 가장 먼저 마크업 해줘야 한다
이미지 <img> | 인라인요소
HTML문서에 이미지를 삽일 할때 사용
<img>태그의 필수 속성인 src속성은 불러올 이미지의 경로를 지정
경로는 <a>태그의 절대 경로, 상대 경로와 개념이 동일
<img>태그는 </img> 가 없는 빈 요소임
alt속성을 반드시 정의 해야함
가끔 하나의 이미지에 여러개의 링크가 적용되어야 할 일이 있다
이때는 <map>태그를 사용한다
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #6 (목록관련요소) (0) | 2020.07.17 |
|---|---|
| 반응형 웹 실전 프로젝트 #5 (텍스트 관련요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #2 (시멘틱 마크업과 논리적 순서마크업) (0) | 2020.07.16 |
| 반응형 웹 실전 프로젝트 #1 (HTML 기본 문서) (0) | 2020.07.16 |
| HTML getting started (0) | 2019.12.09 |