레이아웃 선택시 고려사항
. 정보량에 따라 단과수, 가변 또는 고정, 그리드인가 프리인가를 결정해야 한다
. 다단 레이아웃 float으로 처리
. 프리스타일 경우 position을 이용
단 레이아웃
. 단의 수에 따라 1단, 2단, 3단... 구분되는 레이아웃이다
. PC용은 거의 1단이 대다수며, 2단, 3단 정도가 일반적이다
1단 레이아웃
- 위에서 아래로 정보를 배치하는 레이아웃
- 하나의 주제에 깊이있게 다룰 때 주로 사용
- 판촉사이트, 모바일의 가로폭이 좁은 경우에 주로 사용
2단/3단 레이아웃
- 화면영역이 넓고 정보량이 많은 사이트에서 활용
- 사용자의 편리성을 위해서 내비게이션을 설계하는 것이 좋다
<title>레이아웃</title>
<style type="text/css">
초기화
html, body {background-color:#f0f0f0; width: 100%; height: 754px; margin: 0px; padding: 0px; }
#container {background-color: lightgray; display: inline-block; margin: 50px 150px; }
#container1 {background- color: #fffff0; border: 1px solid black; width: 470px; height: 700px; margin: 10px; padding: 0; float: left;}
.head1 {background-color: #ffdead; width: 370px; height: 12%; margin: 15px auto; padding: 15px;}
.article1 {background-color: #87cefa; width: 370px; height: 35%; margin: 15px auto; padding: 15px;}
.aside1 {background-color: #8fbc8f; width: 370px; height: 15%; margin: 15px auto; padding: 15px;}
.footer1 {background-color: #ffe4e1; width: 370px; height: 10%; margin: 15px auto; padding: 15px;}
#container2 {background-color: #fffff0; border: 1px solid black; width: 470px; height: 700px;
margin: 10px; padding: 0; float: left;}
.head2 {background-color: #ffdead; width: 410px; height: 8%; margin: 15px; padding: 15px;}
.article2 {background-color: #87cefa; width: 110px; height: 60%; margin: 15px; padding: 15px; float: left;}
.aside2 {background-color: #8fbc8f; width: 240px; height: 60%; margin: 15px; padding: 15px; float: right;}
.footer2 {background-color: #ffe4e1; width: 410px; height: 5%; margin: 15px; padding: 15px; clear: both;}
#container3 {background-color: #fffff0; border: 1px solid black; width: 470px; height: 700px;
margin: 10px; padding: 0; float: left;}
.head3 {background-color: #ffdead; width: 410px; height: 8%; margin: 15px; padding: 15px;}
.article3 {background-color: #87cefa; width: 90px; height: 60%; margin: 15px; padding: 15px; float: left;}
.aside3 {background-color: #8fbc8f; width: 105px; height: 60%; margin: 15px; padding: 15px; float: left;}
.nav3 {background-color: #DB7093; width: 90px; height: 60%; margin: 15px; padding: 15px; float: right;}
.footer3 {background-color: #ffe4e1; width: 410px; height: 5%; margin: 15px; padding: 15px; clear: both;}
</style>
</head>
<body>
<div id="container">
<div id="container1" bgcolor="#BEBEBE">
<div class="head1" align="center"><h3 align="center">1단 레이아웃</h3></div>
<div class="article1"></div>
<div class="aside1"></div>
<div class="footer1"></div>
</div>
<div id="container2">
<div class="head2" align="center"><h3 align="center">2단 레이아웃</h3></div>
<div class="article2"></div>
<div class="aside2"></div>
<div class="footer2"></div>
</div>
<div id="container3">
<div class="head3" align="center"><h3 align="center">3단 레이아웃</h3></div>
<div class="article3"></div>
<div class="aside3"></div>
<div class="nav3"></div>
<div class="footer3"></div>
</div>
</div>
</body>
그리드 레이아웃
. 글자와 이미지, 단 등의 요소를 일정 규칙에 의해 격자 모양으로 레이아웃 하는 기법
. 다단 레이아웃과 잘 맞아서 기업 사이트나 정보 사이트에 많이 사용된다.
. float
프리 레이아웃
. 자유자재로 그림을 그리듯이 배치하는 기법
. 포스터나 광고처럼 그래픽이 중시되는 웹사이트에서 주로 사용
. position, 유동형이 아닌 고정형에 적합함
<style type="text/css">
html, body{background-color: lightgray; width: 1965px; height: 900px; margin: 0; padding: 0;}
#container{background-color: #fffacd; width: 1845px; height: 900px; margin: 6px 10px 10px 10px; padding: 0; float: left;}
.header{background-color:#FAEBD7; width: 1825px; height: 100px; margin: 5px 10px 15px 10px; padding: 0;}
.content{background-color:#F0FFF0; width: 1825px; height: 500px; margin: 10px; padding: 0;}
.aside1{background-color: #FFE4E1; width: 357px; height:150px; margin:6px; padding: 0; float:left;}
.aside2{background-color: #FFC0CB; width: 357px; height:150px; margin:6px; padding: 0; float:left;}
.aside3{background-color: #DB7093; width: 357px; height:150px; margin:6px; padding: 0; float:left;}
.aside4{background-color: #FF69B4; width: 357px; height:150px; margin:6px; padding: 0; float:left;}
.aside5{background-color: #DA70D6; width: 357px; height:150px; margin:6px; padding: 0; float:right;}
.footer{background-color: #D8BFD8; width: 1825px; height: 80px; margin: 6px 10px 15px 15px; padding: 0; clear: both;}
</style>
</head>
<body>
<div id="container">
<div class="header" align="center"><h2>그리드 레이아웃</h2><br>
그리드 레이아웃은 다단 레이아웃입니다.</div>
<div class="content"></div>
<div class="aside1"></div>
<div class="aside2"></div>
<div class="aside3"></div>
<div class="aside4"></div>
<div class="aside5"></div>
<div class="footer"></div>
</div>
</body>
유동형 레이아웃
- 윈도우 가로폭 변경시 콘텐츠 가로폭도 자동 변경되도록 설계
- 고정형이었으나, 현재는 유동형이 추세
- 리퀴드 레이아웃 : 가로를 %로 설계
- 플렉시블 레이아웃: 가로를 px과 %로 혼합해서 설계
- 극단적으로 좁거나 극단적으로 넓은 화면의 가독성을 좋게 한 개량판 리퀴드 레이아웃
- 리퀴드 레이아웃과 유연한 레이아웃이 대표적인 레이아웃이다
- 리퀴드 레이아웃보다는 유연한 레이아웃 기법을 사용하는 사이트가 늘고 있다
- %와 px을 혼용하여 설계한다
유동형 Liquid 레이아웃
- 윈도우의 가로폭이 바뀌어도 그에 맞도록 콘텐츠의 가로폭이 늘거나 줄도록 설계한 레이아웃<br>
- 가로폭은 %단위로 설계한다
<style type="text/css">
html,body {background-color: #f0f0f0; width: 100%; height: 754px; margin:0; padding:0}
#nav {background-color: orange; width: 200px; height: 754px; margin: 0; padding: 0;}
#container {position: relative;} 여백 기준점을 맞춰줌
#content{
position: absolute;
top: 0;
left: 210px;
background-color: skyblue; width: 100%; height: 754px; margin: 0; padding: 0}
/* float레이아웃으로 위를 처리했다면 */
#container:after{
content:" ";
display: block;
clear: both;
}
</style>
</head>
<section id="container">
<nav id="nav">
<h3>네비게이션</h3>
<ul>
<li>레이아웃 종류
<li>레이아웃의 구현방법
</ul>
</nav>
<article id="content">
<h3>유동형 Flexible 레이아웃</h3>
<p>
- 극단적으로 좁거나 극단적으로 넓은 화면의 가독성을 좋게 한 개량판 리퀴드 레이아웃<br>
- 리퀴드 레이아웃과 유연한 레이아웃이 대표적인 레이아웃이다<br>
- 리퀴드 레이아웃보다는 유연한 레이아웃 기법을 사용하는 사이트가 늘고 있다<br>
- %와 px을 혼용하여 설계한다
</p>
</article>
</section>
</body>
<style type="text/css">
html,body{width:100%; height: 100%; margin:0; padding:0;}
/* 바깥은 %로 */
#container{width:80%; background: lightgray; text-align: center; margin: 50px; auto; overflow:auto;}
#a{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#b{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#c{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#d{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#e{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#f{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#g{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#h{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#i{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
#j{width: 283px; height: 365px; background: skyblue; margin: 6px; float: left;}
</style>
</head>
<body>
<div id="container">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>
<div id="g">G</div>
<div id="h">H</div>
<div id="i">I</div>
<div id="j">J</div>
</div>
</body>
<style type="text/css">
p{font-size: 12px; background: #f3ff48;}
</style>
</head>
<body>
<p style="cursor: default;"> 기본값 </p>
<p style="cursor: auto;"> 자동설정 </p>
<p style="cursor: crosshair;"> 기본값 </p>
<p style="cursor: pointer;"> 손모양 </p>
<p style="cursor: move;"> 움직임, 이동 </p>
<p style="cursor: help;"> 도움말, 물음표 </p>
<p style="cursor: wait;"> 모래시계, 진행중 </p>
<p style="cursor: text;"> 텍스트, 입력 </p>
</body>
overflow
- 콘텐츠가 width와 height을 넘어가는 경우
콘텐츠를 잘라서 안보이게 할 것인지, 보이게 할 것인지 등을 지정하는 속성
- 속성
. visible: 콘텐츠가 잘리지 않고 태그 영역을 벗어나더라도 출력해준다(디폴트)
. hidden: 벗어나면 보이지 않게 해주세요 - 스크롤이 없다
. scroll: 스크롤바를 항상 붙여서 보여준다
. auto: 콘텐츠가 박스의 높이보다 넘치면 스크롤바를 생성해서 보여지게 한다
<style type="text/css">
p{width: 15em; height:3em; border: 1px solid red}
#hidden{overflow: hidden;}
#visible{overflow: visible;}
#scroll{overflow: scroll;}
#auto{overflow: auto;}
</style>
</head>
<body>
<h3>Overflow속성</h3>
<hr>
<p id="hidden">overflow에 hidden값을 적용하면 박스를 넘어가는 내용이 잘려서 보이지 않습니다.</p>
<p id="visible">overflow에 visible값 적용하면 콘텐츠가 박스를 넘어가도 출력됩니다.</p>
<p id="scroll">overflow에 scroll값을 적용하면 박스에 스크롤바를 붙여 출력합니다.</p>
<p id="auto">overflow에 auto를 적용해 놓으면 필요할때 자동으로 스크롤바가 생성됩니다.</p>
</body>
visibility: hidden - 공간이 할당되고 보이지 않는다, visible
* display : none - 공간이 할당되지 않고 보이지도 않는다
① 상속은 부모 클래스의 멤버변수와 메서드를 물려받는 것이다
② floating배치는 float속성을 사용하여 구현한다.
③ 배치(position)에는 정적배치, 절대배치, 상대배치, 고정배치가 있다.
<style type="text/css">
span{
visibility: hidden;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<h3>1. 다음 빈 곳에 알맞는 단어를 기재해 주세요</h3>
<hr>
<ul>
<li>① (<span>상속</span>)은 부모 클래스의 멤버변수와 메서드를 물려받는 것이다.
<li>② floating배치는 (<span>float</span>)속성을 사용하여 구현한다.
<li>③ 배치(position)에는 (<span>정적배치, 절대배치, 상대배치, 고정배치</span>)가 있다.
</ul>
</body>
<style type="text/css">
div {width:300px; border: 2px solid #8B0000;}
ul {list-style: none; padding: 0 20px 0 20px;}
ul li {
font: bold italic 35px;
padding-left: 5px;
margin-bottom: 10px;
}
ul li span{
position: absolute; 숫자위치 고정
font-size: 50px; color: olivedrab;
}
ul li p{
font: 14px Helvetica, Sans-Serif;
padding-left: 50px;
}
div h2 {text-align: center;}
</style>
</head>
<body>
<h2>카푸치노</h2>
<hr>
<div>
<p><h2>카푸치노 만드는 순서</h2></p>
<ul>
<li><span>1.</span><p>에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.</p></li>
<li><span>2.</span><p>적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.</p></li>
<li><span>3.</span><p>몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.</p></li>
<li><span>4.</span><p>컵에 계피 막대를 꽂고 커피를 부은 후, 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.</p></li>
</ul>
</div>
</body>
'IT 공부 > HTML, CSS' 카테고리의 다른 글
| 홈페이지 만들기 (0) | 2022.06.02 |
|---|---|
| 2차원 변형, 애니메이션 (1) | 2022.05.30 |
| 문서구조화 (0) | 2022.05.27 |
| 배치 (0) | 2022.05.27 |
| layout, display, position (0) | 2022.05.26 |