Wecode 둘째 날,
HTML문서를 디자인 하기 위해 CSS 코드를 작성해보는 연습을 하고 있다.
일을 해보다가 오신 훌륭한 동기님 덕에, CSS디자인을 할 때 큰 틀에서 박스를 어떻게 배치할 것인지를 거시적으로 결정하고, 그 다음 하나 하나씩 요소를 디자인 해나가면 되겠구나 하고 감을 잡고 있다.
보통 크기는 Width로 지정하고 큰 틀에서 height는 주지 않고 작은 요소들의 height와 요소들의 Padding, Margin 등을 이용하여 위치와 크기를 조정하는 것이 코드 작성에 유리한 방법인 것 같다.
다만, 단순히 padding, border, margin 등을 이용하여 요소들의 몸집을 불리고 width 값을 조정하는 것만으로는 손으로 요소들을 배치하듯 자유자재로 배치하는 것이 부자연스럽기는 하다. 그래서 오늘 작성할 position은 물론 flex, float 등이 생겨난 것이 아닐까 하는 생각이 든다.
inline, inline-block, block element
html에서 요소(element)는 크게 inline요소와, block요소로 나뉜다.
<a>태그 <span>태그가 대표적인 inline 요소의 예.
이들은 줄바꿈이 되지 않는 특징을 가지고 있다. 보통 크지 않은 크기의 텍스트를 입력할 때 쓰게 된다.
<p> <div> <h1> 등이 block요소의 예.
이들은 한 줄을 통째로 차지하고 있으며 자동으로 다음 요소들은 줄바꿈되어 출력된다.
물론 이런 요소들의 성질을 바꾸는 태그도 존재한다.
div{display:inline;}
div{display:block;}
div{display:inline-block;}
div{display:none;}
이러한 태그들을 사용하면 요소의 성질을 바꿀 수 있다.
inline, block은 이미 위에서 설명됐고
inline-block은 block이지만 inline요소처럼 줄바꿈이 되지 않는 block이다.
none은 아예 블록이 없는 것처럼 출력이 된다. 어떤 이벤트의 발생에 따라 none, block요소를 바꿔가면서 없어졌다 생기는 효과를 주는데 유용히 쓰인다고 한다.
position
위에서 말했듯이 inline 또는 block 요소들을 배치하기 위해 사용되는 것이 position이다.
position:static;
모든 요소들은 기본적으로 static 상태이다.
position:relative;
static상태의 요소를 움직이는 데 사용한다. top, bottom, right, left 중 하나 이상과 같이 쓰여서 이동시키는 역할을 한다.
예를 들어
div{
position: relative;
top: 20px;
right: -5px;
}라는 코드는 div를 (top의 끝단으로부터)아래로 20px, (right의 끝단으로부터) 왼쪽으로 -5px 이동시키라는 뜻이다. 왼쪽으로 -5px는 오른쪽으로 5px로 구현된다.
position:absolute;
static상태가 아닌 다른 상태의 가장 가까운 상위 요소를 기준으로 움직인다.
예를 들어 html 코드가
<div class="div1">
나는 div1
<div class="div2">
나는 div2
</div>
</div>이고 css 코드가
.div1{
background-color: yellow;
position: relative;
width: 100px;
height: 100px;
}
.div2{
background-color: skyblue;
position: absolute;
width: 50px;
height: 50px;
top: 10px;
right: -20px;
}라면 div2 클래스는 div1클래스를 기준으로 위쪽끝으로부터 아래로 10px, 오른쪽 끝으로부터 오른쪽으로 20px 떨어진 곳에 위치하게 된다.
position:fixed;
position:fixed; 는 현재 보이는 화면을 기준으로 요소를 어디에 배치할지 결정한다.
.div{
position: fixed;
top:0;
left:0;
}과 같은 CSS코드는 해당 요소를 좌상단에 붙어있게 할 것이고 스크롤을 하더라도 없어지지 않게 할 것이다.
보통의 웹사이트에서 상단메뉴를 떠올리면 어떤 역할인지 바로 알 수 있다.
