1. 블록과 인라인
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가지는데 이 display 속성값은 다음 두 가지 중 하나이다.
- 블록(block)
- 인라인(inline)
블록 (block) 타입의 요소
- display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
< p >, < div >, < h >, < ul >, < ol >, < form >요소< div >요소 : 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
인라인(inline) 타입의 요소
- display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음 ✍🏼
- 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
< span >, < a >, < img ><span>요소 : 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소. 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용
2. iframe 요소
- iframe(inline frame)요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있음
<iframe src="삽입할페이지주소"> ~ </iframe>- 명시된 크기로 삽입되는 창의 크기가 고정
<iframe src="/css/intro" style="width:100%; height:300px"> </iframe>- iframe 요소는 기본적으로 검정색 테두리(border),
style 속성에서 border 속성을 이용하면 변경 가능
<iframe src="/css/intro" style="width:100%;
height:300px; border: 3px dashed maroon">
</iframe>- 테두리 없애기 : style 속성에서 border 속성값을 none
iframe 요소의 페이지 변경하기
- < a >태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경 가능
- < a >태그의 target 속성과 iframe 요소의 name 속성을 연결하면, < a >태그를 통해 iframe 요소의 페이지를 변경 가능
<iframe src="/css/intro" name="frame_target"
style="width:100%; height:400px;"></iframe>
<p>
<a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =>
</a>
</p>프레임셋(frameset)
하나의 브라우저 창에 둘 이상의 페이지를 표시
3. 레이아웃 (layout)
① div 요소를 이용한 레이아웃
div 요소의 속성으로 id를 주고 그 속성값을 style태그에서 샵#으로 호출해서 자바스크립트 객체처럼 써주기
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
#header {
background-color:lightgrey;
height:100px;
}
#nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
#section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
#footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
#header, #nav, #section, #footer { text-align:center; }
#header, #footer { line-height:100px; }
#nav, #section { line-height:240px; }
</style>
</head>
<body>
<h1>div 요소를 이용한 레이아웃</h1>
<div id="header">
<h2>HEADER 영역</h2>
</div>
<div id="nav">
<h2>NAV 영역</h2>
</div>
<div id="section">
<p>SECTION 영역</p>
</div>
<div id="footer">
<h2>FOOTER 영역</h2>
</div>
</body>② HTML5 레이아웃
의미(semantic) 요소 : 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소
- < header > HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
- < nav > HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.
- < main > HTML 문서의 주요 콘텐츠(content)를 정의함.
- < section > HTML 문서에서 섹션(section) 부분을 정의함.
- < article > HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함.
- < aside > HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
- < figure > HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함.
- < figcaption > figure 요소를 위한 캡션을 정의함.
- < footer > HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
- < bdi > 기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함.
- < mark > 하이라이팅된 텍스트를 정의함.
- < details > 사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함.
- < summary > details 요소에 나타날 내용을 정의함.
- < dialog > 다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
- < menuitem > 사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함.
- < meter > 정해진 범위 내의 스칼라 치수를 정의함.
- < progress > 작업에 대한 진행 정도를 정의함.
- < ruby > 루비(ruby) 문자를 선언함.
- < rt > 본문 위에 나타날 문자를 정의함.
- < rp > 루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함.
- < time > 날짜와 시간을 정의함.
- < wbr > br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함.
③ table 요소를 이용한 레이아웃
table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니므로 수정이 어렵고 현재 거의 사용 안함. 되도록 table 요소로 레이아웃 작성 NO
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀