마지막 수업에서도 결과물을 보고 그대로 만들어보는 작업을 했다. 페이지를 만드는 과정은 항상 같다. 큰 단위에서 작은 단위로, 덩어리에 백그라운드 컬러를 줘서 어떤 공간을 차지하고 있는지 확인하는 과정. 그리고 스타일을 담백하게 만들고 시작하는 CSS Reset 과정.
오늘 배운것은 position.
Position
다른 요소에 영향을 주지 않고 선택된 요소의 위치를 지정하고 싶을 때 position을 사용한다. 자주 쓰는 값은 relative와 absolute. relative는 부모 요소로부터 상대적인 position을 지정해주기 위해 쓴다.position: relative;
left: 30px;
top: 50px;
주위 환경에 영향을 주지 않고 이동하는 것을 확인할 수 있다. 자유도가 꽤나 높아진다. position엔 가급적 left, top을 이용해서 하는 것이 바람직. right, bottom 대신에 left, top에 음수 값을 주는 것이 이해상 낫다. right, bottom을 사용하는 경우는 right: 0, bottom: 0인 경우 정도가 될 듯.
position: absolute;
right: 0;
bottom: 0;
absolute 값은 부모와의 관계를 끊고 독립하는 것으로, 브라우저 기준점에서 어디로든 이동할 수 있다. 위와 같이 하면 브라우저의 우하단에 float되는 효과를 얻을 수 있다. 그런데 브라우저 기준점이 아니라 부모로부터의 절대값을 표현하고 싶을 때가 생길 수 있다. 이런 때엔 부모에 relative를 주고, 자식에게 absolute를 주면 부모위치를 기준점으로 절대 위치를 표현할 수 있다. (강사님은 상대적인 절대값이란 표현을 쓰셨음.)
위와 같은 예제가 있다고 할 때, 각 아이콘의 delete 버튼은 부모 아이콘으로부터 '상대적인 절대 위치'로 표현된 것을 확인할 수 있다.
<ul class="container">
<li>
<img class="icon" src="...">
<img class="del" src="...">
<h2>iphone</h2>
</li>
....
.container {
margin: 100px auto;
background-image: url(images/bg.png);
background-attachment: fixed;
background-position: center;
width: 1000px;
border-radius: 10px;
padding: 20px;
overflow: hidden;
}
.container li {
position: relative;
float: left;
width: 200px;
margin: 25px;
}
.container li .del {
position: absolute;
right: -20px;
top: -20px;
}
float와 position을 같이 사용한 예제로 CSS와 결과물을 확인해보면 매우 직관적으로 결과물이 표현된 것을 확인할 수 있다. 마지막으로 position: absolute 에서의 가운데 정렬. 요소의 가로, 세로 값이 150px라 할 때 아래와 같이 해주면 요소를 정가운데로 위치시킬 수 있다.
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
position은 앞선 예시에서 보았듯이 직관적이고 매우 편리하지만 position 기능만 가지고 모든 페이지를 구성하기에는 유지보수 측면에서 어려우므로 margin, padding, width, height, border 등으로 커버가 되지 않는 경우에만 제한적으로 쓰는 것이 좋다.
기타 내용
+ 개인적으로 수업 시간에 진행했던 애니메이션이 재미있었는데 IE 하위 버전에선 동작하지 않는다고 한다..header .frog img {
margin: 25px;
position: relative;
top: -100px;
transition: all 1s;
}
.header .frog:hover img {
top: 0;
transform: rotate(-360deg) scale(0);
}
+ background color 값에 rgba 모델을 사용할 수 있다. rgba(255, 255, 255, 0.45); 마지막은 알파 값. opacity 값이다.
+ z-index 속성을 이용해 요소간 겹침이 발생할 때 어떤 요소를 우선적으로 표시할지 지정해줄 수 있다.
+ width: 100% 값을 주면 부모 너비를 따라 자식의 너비가 결정되는데, position을 이용해서 동일한 표현을 할 수 있다.
position: absolute;
left: 0;
right: 0;
+ div에 background-image를 주었는데 표시가 되지 않는 이유? 블록 엘리먼트는 명시적인 높이를 갖지 않으므로 Height를 지정해주어야 확인할 수 있다. Width는 기본적으로 부모의 100%를 가져간다.
끝.
댓글 없음:
댓글 쓰기