Position
1. static
일단 모든 태그들은 처음에 position: static으로 설정되어 있다. 그러므로 따로 써주지 않아도 된다. 이 상태에서는 왼쪽에서 오른쪽, 위에서 아래로 쌓이게 된다.
보통 static은 사용할 일이 없으나 앞에 설정된 position을 무시할 때 사용되기도 한다. top, right, bottom, left 속성 값이 적용되지 않는다.
2. relative
static일 때와 비교하면 당시 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동한다.
이 상태에서는 top, right, bottom, left를 사용해 위치 조절이 가능하다.
3. absolute
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 posiiton: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 이 말은 즉 position: fixed, absolute, relative, sticky 속성을 가지고 있는 부모를 기준으로 움직인다는 것이다. 만약 이와 같은 부모가 없다면 body를 기준으로 움직이게 된다.
이 상태에서는 top, right, bottom, left를 사용해 위치 조절이 가능하다.
4. fixed
상위 요소에 영향을 받지 않고 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.
이 상태에서는 top, right, bottom, left를 사용해 위치 조절이 가능하다.
Display
모든 html요소들은 사각형이나 원과 같은 모양이 있는 block요소이다. table과 같은 것을 제외하면 모두 block, inline, inline-block이다.
1. block
보통 쓰이는 block 요소의 예이다.
<p>
<h1>
<div>
<header>block 요소의 가장 큰 특징은 한 줄에 다른 요소와 함께할 수 없다는 것이다. 그래서 항상 새로운 줄에서 시작한다. 그리고 width를 따로 지정하지 않는다면 항상 전체 너비를 차지하게 된다. 그리고 width/height나 vertical margin을 설정할 수 있다.
예를 들어 보자.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>
2. inline
보통 쓰이는 inline 요소의 예이다.
<a>
<span>
<img>
<strong>인라인의 가장 큰 특징은 말 그대로 한 줄에 있을 수 있다는 것이다. inline, inline-block와 함께 옆에 있을 수 있다. 단지 동일한 줄에 공간이 없을 때에만 줄 바꿈을 한다.
예를 들어 보자.
<a href="#">Link</a>
<img src="https://picsum.photos/30" />
<span>Span</span>
<strong>Strong Player</strong>
주의할 점이 있다. inline 요소에는 height, width, margin, padding 등을 사용할 수 없다. 왜냐? inline은 딱 내용만큼의 공간만을 차지하기 때문이다.
예를 들어 보자.
<a href="#">Anchor tag</a>
a {
background: orangered;
width: 300px;
height: 300px;
margin-top: 100px;
margin-bottom: 100px;
}
문구를 꾸미기 위해 이렇게 많이 쓴다.
예를 들어 보자.
<p>
Hi, my name is <strong>Phillip</strong> and I am a
<span>software developer</span>
</p>
span {
color: lime;
}
3. inline-block
보통 쓰이는 inline-block의 예이다.
<input>
<button>
<select>
<textarea>알아보면 위의 예시들은 form과 관련된 것을 알 수 있다. inline-block 요소들은 태생적으로 inline 요소와 비슷하다. 다른 점은 바로 width, height, vertical margin 등을 적용할 수 있다는 것이다. 그리고 자기 자신 주변에 약간의 공간을 가지고 있다.
예를 들어 보자.
<input type="text" /> <button>Submit</button>
input {
width: 300px;
height: 50px;
}
button {
width: 100px;
height: 50px;
margin-top: 20px;
}
Float
이미지를 텍스트로 감싸기 위해서 사용하는 css 프로퍼티이다.
속성값으로는 none(띄우지 않음), left, right, initial(기본값으로 설정함), inherit(부모 요소로부터 상속함)이 있다.
예시를 보자.
float를 사용할 때 엘레먼트 등이 겹치는 일이 종종 있다. 그럴 때는 clear속성을 사용해서 요소들의 위치를 정해주는 것이 좋다.
그리고 부모 요소보다 이미지가 더 큰 경우에도 문제가 발생한다. 그럴 때는 clearfix라는 것을 사용해보자.
