웹 표준 퍼블리싱 바이블 책 정리(3)
플롯(float)
***디자인 과정에서 레이아웃을 지정할때 가장 많이 활용하는 속성
<1> float을 지정하면 다음에 오는 컨텐츠가 float을 지정한 블록 주위를 감싸게 됩니다
연습용 이미지 만들기
http://placehold.it/가로크기*세로크기
일정분량의 의미없는 텍스트가 필요하다면
http://html-ipsum.com/
텍스트가 이미지 옆으로 별도의 새로운 칼럼으로 만든 것처럼 정렬하고 싶다면 margin을 활용
margin은 float를 지정한 블록부터가 아니라 바깥에 감싸고 있는 영역에서 그값을 계산해야 함을 유의해야 합니다
<2> float의 영향을 받지 않으려면 clear 속성으로 float를 해지해야 합니다
clear의 값으로는 left, right, both 세 가지가 있습니다.
left는 float:left를 해지하고, right는 float:right를 해지하며
both는 두 값을 모드 해지
***float를 활용한 레이아웃 만들어 보기
문서의 레이아웃은 대부분 2단 혹은 3단의 형식을 가지게 되는데, 이렇게 단을 표현하기 위해 가장 효과적인 방법이 float입니다. 그리고 float를 지정한 후에는 정확한 위치에서 clear를 지정하는 것이 아주 중요
float를 지정하는 경우 해당 요소가 감싸고 있는 내용에 width가 지정돼 있다면 생략 가능합니다
float를 지정했다면 두 태그를 감사고 있는 container에서 가장 마지막 위치(:after)에 clear를 지정해야 합니다. 또한 익스플로러 6에서는 :after대응 방법으로 zoom:1을 같이 지정해 줍니다
position의 특징
플롯과 함께 레이아웃을 작성하는데 가장 중요한 속성이 position입니다
값으로는absolute, relative, fixe의 3가지가 있습니다. 이렇게 설정된 후에는 left, right, top, bottom 속성으로 그 위치를 지정하게 됩니다
참고)html 문서에 2개 이상의 태그가 나열되면, 당연히 뒤에 배치되는 태그는 앞에 놓인 요소를 기준으로 배치됩니다. 하지만 position속성의 값을 absolute로 지정하면 다음 요소가 이 블록을 인지하지 못한 채 오로지 주어진 절대값을 기준으로 배치됩니다
absolute를 지정한 후 left, top, right, bottom속성으로 위치를 지정할수 있습니다
이때 absolute 적용 태그를 감싼느 블록에 postion이 지정되어 있다면 그 블록이 위치의 기준이 되지만, 지정되지 않았다면 <body>영역이 기준이 됩니다
position 값으로 relative를 지정햇다면 left, top, right, bottom의 위치값들 relative가 지정된 블록 그 자신의 위치(2번째 놓이는 태그는 첫번째 요소의 다음 위치-블락요소라면 다음줄에 인라인요소라면 옆에 위치함)에서 지정한 값만큼 이동하게 됩니다
position:absolute를 지정하는 경우, 이를 감싸는 블록에는 relative를 지정해야 합니다
position:relative 와 margin을 적절히 활용해도 효과적인 레이아웃을 작성 가능
position값을 지정하고 left,top, right,bottom 등 위치값을 지정하는 일반적이지만, 그 대신 margin값을 적절히 활용하는 것이 효과적일 때가 많습니다
position의 값이 fixed 라면 이 박스의 위치는 항상 <body>를 기준으로 정렬됩니다. 또 fixed 값의 가장 큰 특징은 말 그대로 고정되었다는 점입니다.
position을 지정한 여러 블록이 겹쳐지게 되면 나중에 작성한 블록이 위로 올라가게 됩니다. 이 경우 z-index 속성으로 위 아래의 위치를 조정할 수 있으며, 큰 값이 위로 올라가게 됩니다
z-index의 값은 0, 1, 2, 3 또는 -1, -2, -3 등의 정수를 지정할 수 있으며 , 소수는 쓰지 않도록 합니다.
z-index 값은 너무나 크게 지정하지 않도록 합니다. 물론 제한 범위를 벗어난 값을 쓰는 경우는 없겠지만, 만일을 위해 z-index의 최대값을 알아보면, 사파리 버젼 3 브라우저의 경우는 16777271이고 그외 브라우저들은 21447483647입니다
z-index 값을 지정할 경우 주의할 점은 비교 대상을 정확히 이해해야 한다는 것
간혹 브라우저에서 버튼이나 메뉴가 클릭되지 않는다면 z-index 값을 조정해 줄 필요가 있습니다
예)항상 하단에 떠 있는 버튼 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>position layout</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
overflow-y: scroll;
}
html,body{
width: 100%;
height: 100%;
}
body{
font: 12px Tahoma,sans-serif;
}
li{
list-style: none;
}
#wrap{
width: 800px;
min-height: 100%;
_height: 100%;
margin: 0 auto;
background-color: silver;
}
#header{
background-color: red;
}
#container{
/*padding-bottom: 30px;*/
padding-bottom: 80px;
*zoom: 1;
background-color: green;
}
#container:after{
content: "";
display: block;
clear: both;
}
.nav{
float: left;
width: 180px;
background-color: lime;
}
#content{
float: right;
width: 600px;
background-color: lime;
}
#footer{
position: relative;
margin-top: -80px;
height: 80px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>LOGO</h1>
<p>This website is...</p>
</div><!-- //header -->
<div id="container">
<div class="nav">
<h2>Navigation</h2>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div><!-- //snb -->
<div id="content">
<h2>Content Title</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div><!-- //content -->
</div><!-- //container -->
</div><!-- //wrap -->
<div id="footer">
<div class="footerArea">
<address>Seoul, Korea</address>
</div>
</div><!-- //footer -->
</body>
</html>
그라디언트 지정
css3에서는 background속성으로 선형과 원형의 그라디언트를 표현가능
vendor prefix(접두사 설정)을 적용해야 제대로 반영
colorzilla(http://www.colorzilla.com/gradient-editor/)가 있습니다
'프론트엔드 > 그래픽디자인_퍼블리싱' 카테고리의 다른 글
| 개발자와 디자이너 협업스터디 1일차 (0) | 2020.07.04 |
|---|---|
| 앱)html5 기본 템플릿 basic structure (0) | 2018.06.11 |
| 웹 표준 퍼블리싱 바이블 책 정리(2) (0) | 2018.06.04 |
| 웹 표준 퍼블리싱 바이블 책 정리(1) (0) | 2018.06.04 |
| 앱)CSS 상속되는 속성들 정리 (0) | 2017.11.29 |