Language - [Front]/HTML & CSS

[HTML, CSS] - HTML 공간 분할

구구르밍 2023. 10. 18. 10:44

 

 

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 요소를 이용한 레이아웃

테이블로 작성된 레이아웃은 수정이 매우 힘듬