1. HTML Block과 Inline
블록(block) 형태와 인라인(inline) 형태의 태그들은 웹 페이지의 레이아웃과 콘텐츠의 표시 방식을 결정하는 핵심적인 역할을 한다.
1-1. 블록(Block) 형태
- 새 줄에서 시작 : 블록 요소는 항상 새로운 줄에서 시작한다.
- 너비 : 기본적으로 부모 요소의 전체 너비를 차지한다.
- 사용 예 : <div>, <p> <ol>, <ul>, <li>, <h1><h6>, <pre>, <blockquote>, <form>, <table>, <header>, <nav>, <section>, <article>, <aside>, <footer>, <video>, <dl>, <dt>, <dd>, <noscript> 등이 있다.
<div style="border:1px solid black;">
<h1 style="text-align:center">HTML5 & CSS3</h1>
<p>HTML5와 CSS3를 공부하자</p>
</div>
1-2. 인라인(Inline) 형태
- 줄의 흐름 유지 : 인라인 요소는 새 줄에서 시작하지 않고, 내용이 있는 줄에서 연속적으로 표시된다.
- 너비 : 콘텐츠의 크기만큼 너비를 가진다.
- 사용 예 : <span>, <a>, <q>, <b>, <em>, <small>, <strong>, <sup>, <sub>, <input>, <img>, <br>, <big>, <select>, <i>, <button>, <code>, <textarea>, <map>, <mark>, <script>등이 있다.
<p>우리는 <span style="color:red">HTML5 & CSS3</span>를 공부하고 있다.</p>'
1-3. 차이점
웹 페이지의 구조와 디자인을 결정하는데 중요한 역할을 하며 HTML 요소의 선택은 웹 접근성과 웹사이트 품질에 영향을 미친다.
- 블록요소는 구조적 레이아웃을 형성하는 데 사용되며, 섹션 또는 컨테이너 역할을 한다.
- 인라인 요소는 주로 텍스트나 콘텐츠 내부에서 스타일을 적용하는 데 사용된다.
2. HTML iframe
매우 유용한 요소로 한 웹 페이지 내에 다른 웹 페이지를 내장하는 데 사용된다. <iframe>을 사용하면 웹 페이지 내에 비디오, 다른 웹 사이트 또는 외부 콘텐츠를 표시할 수 있다.
2-1. <iframe> 기본 사용법
- src : 삽입하려는 웹 페이지의 URL을 지정한다.
- title : <iframe>의 내용을 설명한다. 웹 접근성을 위해 권장한다.
<iframe src="삽입할 웹페이지 URL" title="설명"></iframe>
2-2. 너비와 높이 지정
width와 height 속성을 사용하여 <iframe>의 크기를 지정할 수 있다.
<iframe src="삽입할 웹페이지 URL" title="설명" width="100%" height="300px"></iframe>
2-3. <iframe> 테두리 스타일 변경 또는 삭제
style 속성을 사용하여 테두리 스타일을 변경하거나 제거할 수 있다.
- 변경 -
<iframe src="https://www.example.com" title="내용" width="100%" height="300px" style="border:3px solid blue"></iframe>
- 삭제 -
<iframe src="https://www.example.com" title="내용" width="100%" height="300px" style="border:none"></iframe>
2-4. <a> 태그와 연동하여 여러 웹 페이지 삽입
<iframe>에 name 속성을 추가하고, <a> 태그의 target 속성을 이용해 <iframe> 내에 다른 웹 페이지를 로드할 수 있다.
- <iframe>에 name="frame" 속성을 부여한다.
-<a> 태그의 target="frame"속성을 사용해 해당 링크를 <iframe>내에서 열도록 지정한다.
3. HTML Semantic
HTML5에서 추가된 Semantic(의미 있는) 태그는 웹 페이지의 구조를 의미적으로 더 명확하게 나타내는 역할을 한다.
웹 브라우저와 검색 엔진이 웹 페이지의 구조를 더 잘 이해할 수 있으며, 코드를 읽고 이해하기 더 쉬워진다.
3-1. HTML5에서 추가된 의미 태그와 설명
웹 접근성과 SEO(검색 엔진 최적화)에도 도움을 준다.
- <header> : 웹 페이지의 머리말을 정의한다. 일반적으로 로고, 제목, 탐색 메뉴 등을 포함한다.
- <nav> : 웹 페이지의 주 탐색 메뉴를 정의한다. 이 태그 안에는 웹 사이트의 주요 링크가 들어간다.
- <main> : 웹 페이지의 주요 내용을 감싸는 태그다. 한 페이지에 하나만 사용해야 하며, 주요 내용을 감싸는 역할을 한다.
- <section> : 문서의 섹션을 정의 한다. 주로 제목과 함께 사용되며, 내용을 그룹화하고 의미를 부여한다.
- <article> : 문서 내의 독립적인 콘텐츠를 정의 한다. 뉴스 기사, 블로그 게시물 등을 포함한다.
- <aside> : 웹 페이지의 사이드바 또는 부가 정보를 정의 한다. 주로 광고나 관련 링크를 포함한다.
- <footer> : 웹 페이지의 바닥글을 정의한다. 일반적으로 저작권 정보나 연락처 정보를 포함한다.
3-2. CSS3를 이용한 레이아웃 만들기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
header
{
background-color:lightgrey;
height:100px;
}
nav
{
background-color:lightgrey;
height:50px;
}
#main
{
width:100%;
height:400px;
margin-top:20px;
overflow:hidden;
border:1px solid black;
}
section
{
width:50%;
background-color:lightgrey;
height:150px;
}
article
{
width:60%;
margin-left:100px;
background-color:yellow;
height:100px;
}
aside
{
float:right;
position:relative;
top:0;
right:0;
width:40%;
margin-left:5px;
height:600px;
background-color:lightgrey;
height:150px;
}
footer
{
background-color:lightgrey;
height:100px;
}
header, nav,section,article,footer,aside
{
text-align:center;
}
</style>
</head>
<body>
<header>
<h3>header 부분이다.</h3>
</header>
<nav>
<h3>nav 부분이다.</h3>
</nav>
<div id="main">
<aside>
<p>aside 부분이다.</p>
</aside>
<section>
<p>section1 부분이다</p>
<article>
<p>article1 부분이다</p>
</article>
</section>
<section>
<p>section2 부분이다</p>
<article>
<p>article2 부분이다</p>
</article>
</section>
</div>
<footer>
<h3>footer 부분이다.</h3>
</footer>
</body>
</html>'웹 서비스 개발(FB,BE,SERVER,DB) > HTML & CSS' 카테고리의 다른 글
| 6. CSS_Box Model (0) | 2024.01.21 |
|---|---|
| 5. CSS (Cascading Style Sheets) (0) | 2024.01.21 |
| 4. HTML 멀티미디어 (0) | 2024.01.21 |
| 3. HTML Input (0) | 2024.01.20 |
| 1. HTML Basic (0) | 2024.01.17 |
댓글