[Project H4C] 4. HTML 공간 분할

[Project H4C] 4. HTML 공간 분할

HTML 의 모든 요소는 display속성(웹 브라우저에 어떻게 보이는가를 결정)을 가진다.

display 속성에는 블록(block)과 인라인(inline)이 있다.

 

• 블록(block)

display 속성값이 블록인 속성들은 언제나 새로운 라인에서 시작한다.

해당 라인의 모든 너비를 차지한다.

e.g.) 

<p style="border: 3px solid red">

  p요소는 display 속성값이 블록이다

</p>

 

display 속성값이 블록(block)인 요소 : <p>, <div>, <h>, <ul>, <ol>, <form>

 

• <div>

다른 HTML 요소들을 하나로 묶는 데 자주 쓴다.

주로 다른 요소들의 스타일을 한 번에 적용하기 위해 사용한다. 

e.g.)

<div style="background-color:lightgrey; color:green; text-align:center">

   <h1>div요소</h1>

   <p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여

   한 번에 스타일을 적용할 수 있다</p>

</div>

 

 

• 인라인

display 속성값이 인라인인 요소들은 새로운 라인에서 시작하지 않는다.

해당 HTML 요소의 내용 만큼이 너비가 된다. 

e.g.)

<p>

    <span style="background-color:grey; color:orange">span태그</span>는 display 속성 값이 인라인인 요소이다.

</p>

 

display 속성값이 라인(line)인 요소 : <span>, <a>, <img>

 

 

• <span>

텍스트의 특정 부분을 묶는 데 자주 사용된다.

텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.

 

• iframe

페이지 속 또다른 페이지 삽입 가능

<iframe src="삽입할페이지주소"></iframe>

 

iframe 창 크기 고정시키기

<iframe src="/css/intro" style="width:100%; height:300px">

</iframe>

 

iframe 테두리 색상 및 두께 바꾸기

e.g.)

<iframe src="/css/intro" style="width:100%; height:300px; border: 3px dashed maroon">

</iframe>

 

여기서 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" targer="frame_target">PHP 수업 =></a> 

</p>

 

 

• frameset 

프레임셋으로 브라우저 창에 둘 이상의 페이지를 표시할 수 있다.

iframe 요소와는 다르게 하나 이상의 페이지를 동시에 가질 수 있다.

페이지의 크기를 조절할 수 있다.

- frameset, frame, noframes 요소는 더이상 HTML5 표준 권고안에서 지원하지 않는다.

고로 iframe 요소나 CSS 이용하기

 

• Layout(레이아웃)

화면에 여러 요소를 보기 좋고 효과적으로 배치하는 작업

 

div 요소를 이용한 레이아웃

e.g.)

<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>

 

이미지 출처: TCP School

 

HTML5 레이아웃(의미,sementic)

e.g.)

<header><h2>Header 영역</h2></header>

<nav><h2>Nav 영역</h2></nav>

<section><p>Section 영역</p></section>

<footer><h2>Footer 영역</h2></footer>

 

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소들은 다음과 같다.

<header>: HTML 문서나 섹션 부분의 header를 정의

<nav>: HTML 문서의 탐색 링크를 정의

<section>: HTML 문서에서 섹션 부분을 정의

<article>: HTML 문서에서 독립적인 하나의 글 부분을 정의

<aside>: HTML 문서에서 페이지 부분 이외의 콘텐츠를 정의

<footer>: HTML 문서나 섹션 부분에 대한 푸터를 정의