1. position 속성 - relative, absolute, fixed
position 프로퍼티는 총 4가지로 이루어져 있으며, 그 중 static은 Default 값.
(따로 입력안할 경우 자동으로 static)
position: static;
position: relative;
position: absolute;
position: fixed;
1.relative
css 스타일에 아래와 같이
position: relative;를 써준다고 하여 위치가 변하는 건 없습니다.
위치를 이동시킬 때는 top, right, bottom, left 프로퍼티를 사용해야 이동이 가능합니다.
top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티입니다.
따라서 다음과 같은 코드처럼 클래스 속성을 만들어 top, right, bottom, left 프로퍼티를 사용하여 위치를 변경할 수 있습니다.
.relative {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}위 코드는 css가 적용되는 요소가 위로 20px 올라가고 왼쪽에서 20px이 떨어져 있음을 나타냅니다.
2.absolute
positon:absolute; absolute 는 '절대적인' 이라는 뜻입니다. 그렇다면 어떤 것에 대하여 절대적인 위치를 갖는다는 것일까요?
특정 부모 혹은 가장 가까운 조상 요소를 기준으로 합니다. 아래 코드를 보면, absolute클래스의 position은 relative 클래스가 부모 클래스 혹은 조상 엘리먼트 이기때문에 기준으로 둡니다.
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}[출처]http://ko.learnlayout.com/position.html
위 쓰여진 css 코드는 다음과 같이 나타내어질 수 있습니다.
또한 p 태그를 사용할때 position:absolute; 를 쓸 경우 block-element가 inline- elemnet로 바뀌며 내용의 크기만큼만 가로크기를 갖는는 것도 기억합시다.
3.fixed
요소의 위치가 스크롤을 움직여도 고정되어 있게 하기 위해서는 position:fixed; 를 사용하면됩니다.
fixed는 relative, absolute와 같이 부모 혹은 조상 요소가 필요 없습니다.
relative와 마찬가지로 top, right, bottom, left 프로퍼티가 사용됩니다.
fixed를 사용할 경우 공백은 전혀 생기지 않습니다.
사용 예시)
img{
position: absolute;
width: 20px;
left: 50%;
margin-left:-10px;
}
header{
position: fixed;
right: 0;
top: 0;
height:48px;
background-color: rgba(45,45,45,0.95);
left: 0;
}2. inline, block, inline-block
1.inline
inline 엘리먼트에는 span, a, img 태그 등이 있습니다.
inline 엘리먼트 좌,우에는 공간이 있어 다른 요소도 위치할 수 있습니다.
2.block
block 엘리먼트는 쉽게 말해 전체를 다 차지 합니다.
div,p, form, header, footer, section,table, li, h1 태그 등이 block 엘리먼트이며 이 엘리먼트들 좌우로는 아무 것도 들어갈 수 없습니다.
inline과 block 엘리먼트를 가진 태그들도 성질을 반대로 바꿀 수 있습니다.
예를 들어 inline 엘리먼트를 가진 span 태그 앞에
.block-span {
display: block;
}위와 같이 써주면 block 엘리먼트를 갖게 됩니다.
반대로 block 엘리먼트를 가진 p태그도
.inline-p {
display: inline-block;
}다음과 같이 inline 엘리먼트를 갖게 할 수 있습니다.
3.inline-block
박스 그리드를 만들 대 inline-block을 이용하면 만들기가 쉽습니다.
한줄로 박스가 만들어지지만, 박스의 형태는 겹치지 않고 유지됩니다.
inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다.
.box{
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}3. float
float은 이미지 주위를 텍스트로 감싸거나 레이아웃을 잡을 때 사용합니다.
최근에는 float보다는 flex 속성을 통해 레이아웃을 잡는 경우가 많아 많이 사용하지는 않지만,
예전에 작성된 코드를 볼 때 읽을 줄 알아야하기에 내용을 알아야 한다.
float 속성으로는 left, right, none이 값으로 설정 됩니다.
.float-left {
float: left;
}
.float-right {
float: right;
}float은 부모를 벗어나기도 합니다.
이러한 문제를 해결하기 위해서는 다음과 같은 방법이 필요합니다.
- clear를 적용할 요소 밑에 아무태그나 넣고 clear 속성을 적용합니다.
- 바깥 css 클래스 혹은 태그에 overflow: hidden; 을 줍니다.
- 바깥 css 클래스 혹은 태그를 float시킵니다.
출처:https://velog.io/@devjakeh/TIL12.HTML-CSS-%EC%A0%95%EB%A6%AC2
