반응형
[광고 누르면 오늘의 행운 상승!!]
- float 속성 설정보다 position 속성 사용 시 몇 가지 더 신경 써야 한다.
- 상대 위치와 절대 위치
상대위치 : 요소 위치 설정 시, 초기 위치에 자신의 볼륨을 그대로 유지
→ 좌표의 원점을 파악하기 어려움 - 절대 위치 : 요소들의 원점 - 부모 요소의 왼쪽 상단을 통일
→ 요소의 볼륨에 따른 레이아웃 변화에 적용되지 않음 - 제작하고자 하는 레이아웃에 적절한 포지셔닝을 골라야 한다.
- 절대 위치 포지셔닝을 통한 2단 레이아웃 설정하기
- 절대 위치 포니셔닝 사용 시, 본문 article 길이에 따라 footer 위치 결정 되지 않음 - nav 요소와 nav+section 요소의 position:absolute;로 설정 → nav요소가 가려져 보이지 않음
- 자유로운 레이아웃이 가능하지만 대부분을 절대 요소로 지정해 주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title </title>
<style type = "text/css" media = "all">
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 700px;
}
header{
width: 680px;
height: 80px;
padding: 10px;
background-color: lightgray;
}
nav{
width: 160px;
height: 420px;
padding: 10px;
background-color: gray;
position: absolute;
}
nav+section{
width: 500px;
height: 420px;
padding: 10px;
background-color: darkgray;
position: absolute;
left: 180px;
}
footer{
width: 690px;
padding: 5px;
background-color: black;
color: white;
position: absolute;
top: 540px;
}
body{
font-size: 0.8em;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
p{
margin-bottom: 20px;
}
li{
list-style: none;
margin-bottom: 10px;
}
a{
text-decoration: none;
color: white;
}
a:hover{
color:red;
}
</style>
</head>
<body>
<div id = "wrapper">
<header><h1>토스트는 무엇인가</h1></header>
<section>
<nav>
<ul>
<li><a href="#">토스트의 유래</a></li>
<li><a href="#">토스트의 장점</a></li>
<li><a href="#">토스트의 단점</a></li>
<li><a href="#">토스트의 의외성</a></li>
<li><a href="#">토스트의 추악함</a></li>
</ul>
</nav>
<section>
<article>
<h2>토스트의 유래</h2>
<p>
어원 라틴어에서 '바싹 말리다, 마르다, 굽다, 타다'를 뜻하는 torrere에서 유래한
12세기 통속 라틴어에서 '굽기'를 뜻하는 tostare에서 유래한 것이다. 오늘날 쓰이고 있는 단어
'toast'는 옛 프랑스어에서 온 것이며 1398년에 처음으로 발견되었다.
</p>
</article>
<article>
<h2>이것도 사실 토스트의 유래</h2>
<p>
어원 라틴어에서 '바싹 말리다, 마르다, 굽다, 타다'를 뜻하는 torrere에서 유래한
12세기 통속 라틴어에서 '굽기'를 뜻하는 tostare에서 유래한 것이다. 오늘날 쓰이고 있는 단어
'toast'는 옛 프랑스어에서 온 것이며 1398년에 처음으로 발견되었다.
</p>
</article>
</section>
</section>
<footer>
<p>토스트는 어딜봐도 이삭토스트가 제일 맜있다. 그 중에서도 역시 최고는 햄치즈 </p>
</footer>
</div>
</body>
</html>
상대 위치 포지셔닝을 통한 2단 레이아웃 설정하기
- 상대 위치 포지셔닝 설정 : 원래 자신의 위치 원점으로 선정
- left, top 등의 속성 사용하지 않을 시, 일반적인 문서 흐름대로 제시
- 마이너스 좌표로 세밀하게 좌표 설정
- 위치를 변경해도 자신의 원래 위치에 공간을 차지한다
- 상대 위치 설정으로 2단 레이아웃 설정하는 것은 바람직하지 않다.
display 속성을 이용한 2단 레이아웃 설정하기
- 블록 레벨 요소들을 inline-block 형태로 줄바꿈 없이 나란히 놓을 수 있음
- 문제점
한줄로 display됨
밑으로 정렬됨
글자로 취급되어 margin, padding이 생김(요소사이 여백 발생)
"white-apce-collapse" 속성 사용하면 되나 현재 구현되지 않음
vertical-align: top으로 설정하면 해결됨
반응형
'5. 웹 프로그래밍 > 2. CSS' 카테고리의 다른 글
| 텍스트 네비게이션[CSS] (0) | 2020.03.12 |
|---|---|
| 인터렉티브 이미지 버튼[CSS] (0) | 2020.03.12 |
| float 속성을 사용한 2단 레이아웃[CSS] (0) | 2020.03.11 |
| Margin, Padding[CSS] (0) | 2020.03.10 |
| 목록 꾸미기[CSS] (0) | 2020.03.10 |