| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| extra_vars6 |
http://wiki.javajigi.net/pages/viewpage.action?pageId=722XHTML(Extensible HyperText Markup Language)
CSS(Cascading Style Sheets)란?
CSS와 XHTML을 사용한 효율적인 View 개발 전략
Table of Contents
XHTML(Extensible HyperText Markup Language) 
이란 ?
 |
The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. |
XHTML은 HTML을 상속받고, 재생성하고, 포함하여 XML 로 재정의한 현재와 미래의 문서타입,모듈의 한 형태이다.
XHTML Family 문서타입은 모두 XML 기반이고, 궁극적으로 XML기반의 사용자도구와 함께 결합되어 작업할수 있도록 디자인되었다.
XHTML은 HTML의 후속버전이다.
HTML 4.0.1 > XHTML 1.0 > XHTML 2.0
최신버전 : HTML 4.0.1(1999.12) , XHTML 2.0(2005.5)
XHTML이 왜 필요한가?
문서 개발자들과 사용도구 설계자들 계속적으로 그들의 생각을 새로운 마크업을 통하여 표현하는 새로운 방식들을 개발하고 있다.
XML의 장점을 가진 XHTML에서는 새로운 엘리먼트 추가 및 엘리먼트의 어트리뷰트들의 도입이 상대적으로 쉽다.
하위 및 상위 호환성이 좋다.
최대한 많은 웹 브라우저, 장치, 소프트웨어에서 읽을 수 있게 설계되었다.
마크업의 유효성 검증을 위해 엄격한 규칙을 따르며, 표준대로 작성된 페이지는 웹브라우저에서 올바르게 해석된다.
XHTML 1.0 표준정의
- Strictly Conforming Documents
- XHTML-1.0-Strict, XHTML-1.0-Transitional, XHTML-1.0-Frameset 의 DTD 중 하나의 규격에 맞아야한다.
- 문서의 root element전에 DOCTYPE이 선언되어 있어야한다.
아래의 선언중 하나를 사용한다.<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
-
- 문서의 root element는 html 이어야한다.
- XHTML의 namespace는 http://www.w3.org/1999/xhtml로 정의되어 있어야한다.
<!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" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title></title>
</body>
</html>
HTML 4.0과 XHTML1의 차이점
- Documents must be well-formed
- 모든 element는 시작과 종료태그가 있어야 한다.
- 모든 element는 nest 되어야한다.
ex) <p>here is an emphasized <em>paragraph</em>.</p>
- Element and attribute name은 소문자여야 한다.
- 비어있지 않은 elements도 종료태그가 있어야한다.
ex)<p>here is a paragraph.</p><p>here is another paragraph.</p> - Attribute 는 따옴표가 들어가야한다.
ex)<dl compact="compact"> - Attribute값들이 짝으로 기술되어야한다.(compact , checked)
ex)<dl compact="compact"> - 빈 element는 종료 태그를 갖거나, 그 시작 태그가 />로 종료 되어야 한다.
ex)<br/><hr/> - White Space handling in attribute values
- 앞뒤 공백을 제거한다.
- Map sequences of one or more white space characters (including line breaks) to a single inter-word space.
연속된 공백문자를(줄바꿈 포함) 한개의 공간글자로 처리한다.
- name attribute를 id attribute로 대체한다.
XHTML1과 XHTML2의 차이점
- Linking : 모든 elements에 하이퍼링크가 가능하다.
- Events : XML Events 를 사용한다.
- Forms : XForms 를 사용한다.
- Frames and Framesets : XFrames를 사용한다.
- 조금더 구조화가 가능하게 되었다.
- Sections and headings : heading elements(h1~h6 elements)는 h elements로 대체되었다.
XHTML2에서는 section element로 명백하게 문서구조를 markup할수 있다.
- Sections and headings : heading elements(h1~h6 elements)는 h elements로 대체되었다.
-
- Separators : hr element가 separator element로 rename 되었다.
- Separators : hr element가 separator element로 rename 되었다.
-
- Line breaks : br elements가 l element로 대체되었다.
- Line breaks : br elements가 l element로 대체되었다.
-
- Paragraph structure : p elements는 <p>...</p>로 나타낸다.
- Paragraph structure : p elements는 <p>...</p>로 나타낸다.
- Navigation lists : navigation list element인 nl element가 추가되었다.
- Images : img,applent element는 여러가지 타입의 object(image,text,audio,appelet등)를 나타낼수 있는 object elements로 대체되었다.
- type : 사용자가 접근할수 있는 자원에 type element를 표기할수 있다.
- Bi-directional text : dir attribute 추가
CSS(Cascading Style Sheets)란?
|
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. |
- CSS 참조하기
<!doctype html public '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>Document title</title>
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css">
</head>
...
or in XHTML 1.0:<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
<head>
<title>Document title</title>
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css" />
</head>
최신버전 : CSS3 (2005.9)
실용예제로 배우는 웹표준
chapter1 - 리스트
- 순서가 없는 리스트 목록 - <ul/>
- 순서가 있는 리스트 목록 - <li/>
chapter2 - 머리글
- 머리글 태그인 <h1/>~<h6/>까지 사용하자.
- 각종 브라우저에서 머리글 태그를 인식하고, 표기하거나 읽을수 있다.
- 검색엔진의 색인이 빠르다.
- CSS적용이 쉽고, 유지보수가 편하다.
chapter3 - 테이블
- 표형태의 데이타(달력,스프레드시트,차트,스케쥴등)에 테이블을 쓰자.
- 테이블 요약정보 - <table>태그에 <caption/>속성추가
- 테이블 타이틀 - <caption/>태그추가
ex)<table><caption/><tr>.. - 테이블 헤더 - <td>태그대신 <th> 태그를 사용하라.
- 헤더와 데이타의 관계 (스크린리더사용시 유용) - 헤더에 id속성과, 데이타에 heading속성 추가로 데이타간에 관계를 맺어준다. abbr속성은 데이타를 짧게 줄인글로 읽을때 사용한다.
ex) <tr><th id="year" abbr="연도">경기연도</th></tr>
<tr heading="year"><td></td></tr>
<!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" xml:lang="ko" lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title>3장 - 테이블</title> <style type="text/css" media="screen"> div { margin-bottom: 30px; } #fig3_10 table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: collapse; } #fig3_10 caption { font-family: Arial, sans-serif; color: #993333; padding-bottom: 6px; } #fig3_10 th, #fig3_10 td { padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; } #fig3_10 th { font-family: Verdana, sans-serif; } #fig3_10 #year { padding-left: 26px; background: #ccc url(img/icon_year.gif) no-repeat 10px 50%; } #fig3_10 #opponent { padding-left: 26px; background: #ccc url(img/icon_opp.gif) no-repeat 10px 50%; } #fig3_10 #record { padding-left: 26px; background: #ccc url(img/icon_rec.gif) no-repeat 10px 50%; } </style> </head> <body> <div id="fig3_10"> <table summary="이 표는 보스턴 레드삭스 월드시리즈 성적 차트입니다."> <caption>보스턴 레드삭스 월드 시리즈 챔피언쉽</caption> <tr> <th id="year">연도</th> <th id="opponent">상대팀</th> <th id="record" abbr="성적">시즌 성적 (승-패)</th> </tr> <tr> <td headers="year">1918</td> <td headers="opponent">시카고 컵스</td> <td headers="record">75-51</td> </tr> <tr> <td headers="year">1916</td> <td headers="opponent">브룩클린 로빈스</td> <td headers="record">91-63</td> </tr> <tr> <td headers="year">1915</td> <td headers="opponent">필라델피아 필리스</td> <td headers="record">101-50</td> </tr> <tr> <td headers="year">1912</td> <td headers="opponent">뉴욕 자이언츠</td> <td headers="record">105-47</td> </tr> </table> </div> </body> </html>
chapter4 - 인용문
- 블록레벨의 인용문 - <blockquote/> 태그사용
- 인용문의 원본출처표기 - cite 속성추가
- 따옴표문자표기 - <q/> (겹쳐쓰기가능)
- 구문강조 - <strong/>
ex) <blockquote cite="http://www.javjigi.net">
아버지는 말하셨지 <q><strong>인생</strong>을 즐겨라~</q>
</blockquote><!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" xml:lang="ko" lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title>4장 - 인용문</title> <style type="text/css" media="screen"> div { margin-bottom: 30px; } #fig4_2 blockquote { width: 270px; text-align: center; margin: 0; padding: 0; font-family: georgia, serif; font-size: 150%; letter-spacing: -1px; line-height: 1em; color: #555; background: #eee url(img/fi_top.gif) no-repeat top left; } #fig4_2 #quote { margin: 0 10px 0 0; padding: 20px 20px 10px 20px; background: url(img/fi_bottom.gif) no-repeat right bottom; } #fig4_2 #author { margin: 0; padding: 0 0 10px 0; color: #999; font-size: 60%; background: url(img/hpquote_bottom.gif) no-repeat bottom; } #fig4_3 blockquote { width: 270px; text-align: center; margin: 0; padding: 0; font-family: georgia, serif; font-size: 150%; letter-spacing: -1px; line-height: 1em; color: #555; background: #eee url(img/fi_top.gif) no-repeat top left; } #fig4_3 #quote strong { color: #000; font-weight: normal; } #fig4_3 #quote { margin: 0 10px 0 0; padding: 20px 10px 10px 20px; background: url(img/fi_bottom.gif) no-repeat right bottom; } #fig4_3 #author { margin: 0; padding: 0 0 10px 0; color: #999; font-size: 60%; background: url(img/hpquote_bottom.gif) no-repeat bottom; } </style> </head> <body> <div id="fig4_2"> <blockquote cite="http://www.somewebsites.com/path/to/page.html"> <p id="quote">부적절한 인용이란 한번도 인용되지 않은 문장을 인용하는 것이다.</p> <p id="author">—헤스키스 피어슨</p> </blockquote> </div> <div id="fig4_3"> <blockquote cite="http://www.somewebsites.com/path/to/page.html"> <p id="quote"><strong>부적절한 인용</strong>이란 한번도 <strong>인용되지 않은 문장</strong>을 인용하는 것이다.</p> <p id="author">—헤스키스 피어슨</p> </blockquote> </div> </body> </html>
chapter5 - 폼
- 접근성을 높이자
- 폼 컨트롤에대한 텍스트 레이블에 <label>태그사용
- <label>태그의 for 속성에 연결되는 폼 컨트롤의 id값과 일치하는 값을 지정
- 장점 : 스크린 리더 프로그램이 각폼 컨트롤에 해당하는 레이블을 올바로 읽는다.
라디오버튼, 체크박스의 경우, 사용자가 클릭할 수 있는 영역이 넓어진다.
- 탭키를 이용해 탭컨트롤을 이동 - tabindex 속성추가
- 액세스키를 이용해 포커스이동 - accesskey 속성추가 (Window = Alt+key , MAC = Command+key)
- 폼 요소 묶기 - <fieldset/>태그로 그룹핑한다. <legend/>태그로 테두리선을 표시한다.
<div id="fig5_14"> <form action="/path/to/script" id="thisform" method="post"> <fieldset> <legend>로그인하기</legend> <p><label for="name" accesskey="9" >이름 :</label><br /> <input type="text" id="name" name="name" tabindex="1" accesskey="9"/></p> <p><label for="email">이메일 :</label><br /> <input type="text" id="email" name="email" tabindex="2" /></p> <p><input type="checkbox" id="remember" name="remember" tabindex="3" /> <label for="remember">내 정보 기억하기</label></p> <p><input type="submit" value="확인" tabindex="4" /></p> </fieldset> </form> </div>
chapter6 - 구문표현 엘리먼트
- 시각적인 효과를 위한 태그
- <b> : bold 체
- <i> : italic 체
- 의미와 구조전달을 위한 태그 , 시각적으로는 강조표현, 스크린리더 프로그램사용시 볼륨,높이,속도등의 음성합성 파라미터를 다르게 적용한다.
- <em> : bold 체 (강조)
- <strong> : italic체 (강한강조)
- <cite> : 인용문이나 참조한 문서의 출처
- <abbr> : 약자 (스크린리더 프로그램사용시 철자를 하나씩 읽는다.)
ex) <abbr title="Extensible HyperText Markup Language">XTML</abbr> - <acronym> : 두문자어 (스크린리더 프로그램사용시 한단어로 읽는다.)
ex) <acronym title="North Atlantic Treaty Organization">NATO</abbr> - <dfn> : 용어묶음에 대한 정의
- <code> : 컴퓨터 프로그래밍 코드
- <samp> : 프로그램이나 스크립트의 결과 샘플
- <kbd> : 사용자가 입력한 텍스트
- <var> : 프로그램의 변수(variable)나 인수(argument)
chapter7 - 앵커(웹페이지내 특정위치로 이동)
- id속성 사용하기(구버전 브라우저 지원 안함)
<p><a href="#pooh">곰돌이 푸에 대해</a></p> ... <h2 id="pooh">곰돌이 푸와 친구들</h2> ...
- id, name 속성 동시 사용
<p><a href="#pooh">곰돌이 푸에 대해</a></p> ... <h2><a id="pooh" name="pooh">곰돌이 푸와 친구들</a></h2> ...
- title 속성사용 : 화면에 툴팁으로 표시되어 내용을 볼수 있다. 스크린리더 사용시 텍스트를 읽어준다.
- 링크 꾸미기
- a:link : 화면에 걸려있는 링크
- a:visited : 사용자가 이미 방문한 링크
- a:haver : 마우스 커서가 링크위로 올라왔을때 효과
- a:active : 마우스 버튼이 클릭될때의 상태를 처리
chapter8 - 리스트의 고급기능
- 번호가 매겨진 리스트
- 자동으로 번호를 매겨주는 <ol/>태그 사용하기
<ol> <li>양파를 고른다.</li> <li>양파를 3분간 기름에 살짝 튀긴다.</li> <li>마늘 3쪽을 넣는다. 이때 양파와 마늘이 달라붙지 않도록 자주 저어 준다.</li> <li>3분간 더 요리한다.</li> <li>맛있게 먹는다.</li> </ol>
- 자동으로 번호를 매겨주는 <ol/>태그 사용하기
|
CSS의 list-style-type속성을 사용하여, 다양한 스타일을 지정할수 있다.
|
- 용어와 설명묶음을 나타내는 리스트
- 정의 리스트 <dl/> 태그 사용 , 용어와 설명을 분리하여, 의미있는 구조로 바뀌었고, CSS나 아이콘 추가등 스타일 입히기가 쉬워졌다. <dt/>태그는 용어를 나타내고, <dd/>태그는 설명을 나타낸다.
dt {
font-weight: bold;
}
dd {
margin-left: 15px;
padding-left: 15px;
color: #999;
background: url(img/dd_arrow.gif) no-repeat 0 2px;
}
....
<dl>
<dt>CSS</dt>
<dd>웹 문서에 글꼴, 색상, 여백 등 스타일을 입힐 수 있는 쉬운 방법.</dd>
<dt>XHTML</dt>
<dd>HTML을 확장하기 위해 XML을 변환하여 만든 문서 형식.</dd>
<dt>XML</dt>
<dd>SGML에서 파생된 단순하고 매우 유연한 텍스트 형식.</dd>
</dl>
chapter9 - 마크업용량줄이기
- id 속성을 부여한 하위 선택자를 사용하여 불필요한 class 사용을 줄인다. CSS를 이용하여, 각 레벨별 독립적인 스타일을 지정하고, 변경을 쉽게한다.
- 불필요한 <div>태그를 없앤다.
<!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" xml:lang="ko" lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title>8장 - 마크업 용량 줄이기</title> <style type="text/css" media="screen"> body { font-family: verdana, sans-serif; font-size: 12px; } div { margin-bottom: 30px; } #fig9_5 #sitemap { font-size: 140%; font-weight: bold; color: #f63; } #fig9_5 #sitemap li { list-style: none; /* 기본 불릿 표시 안함 */ } #fig9_5 #sitemap li ul { margin: 6px 15px; padding: 0 15px; font-size: 90%; color: #000; border-left: 1px dotted #999; } /* 세 번째 레벨의 리스트 항목 스타일 */ #fig9_5 #sitemap li ul li ul { border: none; } #fig9_5 #sitemap li ul li ul li { font-weight: normal; padding-left: 16px; background: url(img/li_bull.gif) no-repeat 0 50%; } </style> </head> <body> <div id="fig9_5"> <ul id="sitemap"> <li>블로그</li> <li>기사 모음 <ul> <li>레드 삭스 공략 방법</li> <li>7회말 투구 내용 <ul> <li>제I부</li> <li>제II부</li> </ul> </li> <li>결코 짧지 않은 85년 세월을 돌아보며</li> </ul> </li> <li>이 블로그에 대해</li> <li>포토갤러리 <ul> <li>풍경 사진</li> <li>정물 사진</li> </ul> </li> <li>서비스 <ul> <li>디자인 <ul> <li>웹</li> <li>인쇄물</li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
chapter10 - CSS적용하기
- CSS적용방법
- <style/>엘리먼트에 넣기
단점 : style 변경시 모든 파일을 열어 수정해야 한다. 캐쉬되지 않는다. - 외부 스타일시트 사용
장점 : 스타일공유가 가능하다. style변경시 스타일 파일만 수정하면 된다. 캐쉬에 저장된다. - @import 사용하기
- 인라인 스타일 : 태그안에 스타일 속성을 직접 적어준다.
단점 : 코드량이 많아진다. 중복코드가 발생한다. 유지보수가어렵다.등등
- <style/>엘리먼트에 넣기
//<style/>엘리먼트에 넣기 <head> <style> body{ bgcolor="red"; } </style> </head> //외부 스타일시트 사용 <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> //@import 사용 <head> <style> @import="style.css" </style> </head> //인라인 스타일 <html> <body style="background:red;"> </body> </html>
- CSS 활용
- 외부스타일시트와 @import를 적절히 사용
기본 스타일은 외부스타일 시트를 사용하고, 고급 스타일은 @import 를 사용한다. 낮은 버전의 브라우저는 자신이 지원하는 스타일 명령만 인식하고, 최근 브라우저들은 모든 스타일정보를 다 가져오게 되어, 화면이 올바르게 나타나지 않는 현상을 줄일수 있다.
- 외부스타일시트와 @import를 적절히 사용
- CSS의 우선순위
인라인스타일 > 지정한 순서대로 (동일한 항목을 선언한 다른 스타일을 입힌 파일 1, 2가 있다면 마지막에 적은 스타일에 우선순위가 있다.)
chapter11 - 인쇄를 위한 스타일
- 인쇄대상 지정하기
- media 속성
- @media 또는 @import
// media 속성 <link rel="stylesheet" type="text/css" media="screen,print" href="style.css"> <link rel="stylesheet" type="text/css" media="screen" href="style.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> //@import 사용 <style type="text/css"> @import utl("style.css") screen; @media print{ } </style>
- 스타일 지정시 포인트를 사용해라.
- 다양한 미디어 타입
chapter12 - CSS로 레이아웃 잡기
CSS를 이용해 레이아웃을 잡는다.
<!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" xml:lang="ko" lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title>12장 - CSS 레이아웃 (방법 D)</title> <style type="text/css" media="screen"> body { margin: 0; padding: 0; font-family: verdana, sans-serif; font-size: 12px; } #header { height: 40px; background: #ccc; } #content { margin-right: 24%; margin-left: 24%; } #leftbar { position: absolute; top: 40px; left: 0; width: 20%; background: #999; } #sidebar { position: absolute; top: 40px; right: 0; width: 20%; background: #999; } #footer { margin-right: 24%; margin-left: 24%; padding: 20px; background: #eee; } </style> </head> <body> <div id="header"> <strong>헤더</strong> </div> <div id="content"> <p><strong>컨텐트</strong> XHTML과 CSS 같은 웹 표준은 이제 많이 알려진 기술입니다. 웹 관련 직종에 있다면 웹 표준에 대해서 들어보았을 것입니다. 하지만 비록 웹 표준을 지원하는 웹 브라우저가 점차 늘어가고 있고, 웹 디자이너와 웹 개발자가 웹 표준이 주는 실질적인 잇점을 이해하고 이를 준수하려고 하는 움직임이 많아지고는 있지만, 웹 표준으로 사이트를 구축하는 것은 아직까지 쉬운 일은 아닙니다. 웹 표준이 주는 혜택을 완벽하게 이해하고 웹 표준을 이용하여 효율적으로 구현하는 데에 웹 표준의 진수가 있다고 할 수 있습니다.간단한 예를 들자면 테이블을 겹쳐서 쓰는 대신에 CSS를 사용하여 페이지의 레이아웃을 조정할 수 있습니다. 이를 통해 파일 용량은 줄어들고, 페이지 로딩 시간이 짧아집니다. 또한 모든 웹 브라우저, 장치에서 접근할 수 있게 됩니다.</p> <p>웹 표준 가이드는 16장으로 구성되어 있습니다. 각 장에서는 여러 가지 웹 표준 개념의 이론과 실습을 다루게 되며, 쉽게 이해할 수 있도록 주어진 문제에 대해 여러가지 다른 해결방법을 보여줍니다. 이 책을 통해 다단 레이아웃, 이미지 바꿔치기, 테이블과 리스트를 잘 사용하기 등의 방법을 배울 수 있습니다. 이렇게 잘 구성된 접근방법을 통해서 웹 표준의 핵심사항을 빠르게 이해하고 소화하여 잘 활용할 수 있을 것입니다.</p> </div> <div id="leftbar"> <p><strong>왼쪽 사이드바</strong></p> <ul> <li><a href="#">링크 항목 1</a></li> <li><a href="#">링크 항목 2</a></li> <li><a href="#">링크 항목 3</a></li> <li><a href="#">링크 항목 4</a></li> </ul> </div> <div id="sidebar"> <p><strong>사이드바</strong></p> <ul> <li><a href="#">링크 항목 1</a></li> <li><a href="#">링크 항목 2</a></li> <li><a href="#">링크 항목 3</a></li> <li><a href="#">링크 항목 4</a></li> </ul> <p><strong>추가 사이드바 1</strong></p> <ul> <li><a href="#">링크 항목 1</a></li> <li><a href="#">링크 항목 2</a></li> <li><a href="#">링크 항목 3</a></li> <li><a href="#">링크 항목 4</a></li> </ul> <p><strong>추가 사이드바 2</strong></p> <ul> <li><a href="#">링크 항목 1</a></li> <li><a href="#">링크 항목 2</a></li> <li><a href="#">링크 항목 3</a></li> <li><a href="#">링크 항목 4</a></li> </ul> </div> <div id="footer"> <strong>푸터</strong> </div> </body> </html>
