HTML 요소의 display 속성값
블록
새로운 라인에서 시작
해당 라인의 모든 너비를 차지
<div></div>
- 다른 HTML 요소들을 하나로 묶는 블록 요소
- 주로 여러 요소들의 스타일을 한 번에 적용
- 가상의 레이아웃을 설계
- 주로 CSS와 연동하여 쓰임
인라인
새로운 라인에서 시작하지 않음
해당 HTML 요소의 내용만큼 너비 차지
<span></span>
- 텍스트(text)의 특정 부분을 묶는 인라인 요소
- 텍스트의 특정 부분에 따로 스타일을 적용
- CSS와 함께 쓰임
iframe 요소
<iframe src="삽입할페이지주소"></iframe>해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입
- iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정
<iframe src="/css/intro" style="width:100%; height:10px">
</iframe>
- iframe 요소의 테두리 변경
<iframe src="/css/intro" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>- 기본값 - 검정색 테두리
- iframe 요소의 페이지 변경하기
<iframe src="/css/intro" name="frame_target" style="width:100%; height:300px;"></iframe>
<p>
<a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a>
</p>- <a>태그의 target 속성과 iframe 요소의 name 속성을 연결
- <a>태그를 통해 iframe 요소의 페이지를 변경 가능
프레임셋
- 하나의 브라우저 창에 둘 이상의 페이지를 표시
- iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있음
- noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절 가능
- 각각의 페이지는 frame 요소로 표현
- noframes 요소 : 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장
수직 프레임셋
<frameset cols="25%,*,25%">
<frame name="left" src="/html/intro"/>
<frame name="center" src="/css/intro"/>
<frame name="right" src="/php/intro"/>
<noframes>
<body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>
</noframes>
</frameset>- 하나의 브라우저 창을 세로 방향으로 분리하여 표현
수평 프레임셋
<frameset rows="20%,60%,20%">
<frame name="top" src="/html/intro" noresize="noresize" />
<frame name="center" src="/css/intro" noresize="noresize" />
<frame name="bottom" src="/php/intro" noresize="noresize" />
<noframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다!
</body>
</noframes>
</frameset>- 하나의 브라우저 창을 가로 방향으로 분리하여 표현
HTML 레이아웃
div 요소를 이용한 레이아웃
주된 레이아웃 작성 방법
HTML5 레이아웃
웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공
= 의미 요소
table 요소를 이용한 레이아웃
테이블로 작성된 레이아웃은 수정이 매우 힘듬
