wellkiim

html_web_basic 본문

Development/HTML, CSS

html_web_basic

WELLKIIM 2018. 5. 6. 03:05

이번 시간에는


앞서 배운 태그들을 가지고


그 해당 태그에 id값을 입력.

각 태그들이 어떤 영역을 가지는지 앞선 web_basic파트에 이어 조금은 더 심화된 구성을 해보려고 합니다.


준비되셨나요!


어렵지는 않으나,


이번 시간에 배우는 각각의 markup을 가지고 따라해보시되,

여러분들이 각 태그안의 텍스트를 바꾼다던지.


각각 태그에 원하는 이미지를 넣어보는 방식으로 간단한 페이지를 꾸며도 재밌을 것 같다는 생각을 감히 해봅니다.!



자 그럼 에디터를 켜고 코드를 작성해보도록 하겠습니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>

<title> new document </title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>



</head>


<body>


<div id="skipNav">

해당하는 영역으로 이동( 구간 건너뛰기 ): wrap영역에 속하지 않고 독립적인 영역으로 사용가능

</div>

<div id="wrap">

wrap, wrapper, 기업명wrap,기업명_wrap : 전체를 담아주는 영역!

<div id="header">

<h1>로고, 상징적인 요소들: 상황에 따라서는 header영역 바깥에 사용하기도 함!</h1>

<div id="nav">

<h2>네비게이션 영역</h2>

<span>로그인</span> <span>갤러리</span> <span>회원가입</span>

</div>

</div>

<div id="container">

<h2>모든 정보를 모아주는 영역</h2>

<p>

뉴스나 정보등등 거의 모든 내용을 다 담는 영역 ( 수정작업이 제일 많이 되고, 변화가 많이 되는 영역)

</p>

<div id="visual">

<h2>광고영역: 시선을 제일 많이 끄는 영역</h2>

</div>


<div id="section1">

<h2>뉴스영역</h2>

<p>

section영역은 비슷한 정보의 값들을 모아주는 영역<br/>

현재 영역에는 뉴스에 관련된 정보들을 모아주면 된다.<br/>

<strong>필수! 제목을 표현하는 headline태는 꼭 작성해주어야 한다.</strong>

</p>

</div>

<div id="section2">

<h2>영화정보</h2>

<p>영화관련된 정보들 모아주기</p>

</div>

<div id="section3">

<h2>쇼핑영역</h2>

</div>

</div>

<div id="footer">

<h2>꼬릿말 영역</h2>

<span>copyright</span>

<span>이메일</span>

<span>개인정보방침</span>

<span>이용약관</span>

</div>

</div>

</body>

</html>




보시는 바와 같이, inline태그들은 각각 나열되고,

block태그들은 각각 아래로 단락이 나뉘어지는 것을 볼 수 있습니다.


각각 영역에 맞게 잘쓰는 것도 불필요한 공간간을 줄일 수 있는 최고의 방법이라는 것을 알아두셔야 합니다.!



아래는 위의 에디터에 작성한 코드를 출력한 페이지를 나타냅니다.








반응형

'Development > HTML, CSS' 카테고리의 다른 글

css_box  (0) 2018.05.07
css_font  (0) 2018.05.06
html_img태그  (0) 2018.05.06
html_webpage_basic  (0) 2018.05.06
html_inline과 block 태그  (0) 2018.05.06
Buy me a coffeeBuy me a coffee
'Development/HTML, CSS' Related Articles more
Comments