[HTML&CSS] position, inline, block

오늘은 CSS를 이용한 Layout을 구성하기 위해서 중요한 부분에 대하여 정리를 하려고 한다.

Layout을 잘 짜는 법에는 정도가 없다고 한다. 많이 보고 많이 써보고 많이 생각해야한다.

HTML5로 넘어가면서 flex 속성를 이용해서 Layout 구성이 꽤 편해졌다고 한다.

하지만 모든 사이트가 기존의 Layout 을 flex 로 바꾸진 않을 것이다.

원리를 알아야 요령도 피울 수 있듯이 기존에 방식을 이해하고 새로운것을 받아드리는 습관을 들이는 것이 중요하다. (이것이 바로 온고지신?)

목차

1. position 속성
   • relative
   • absolute
   • fixed
2. inline & block
   • inline
   • inline-block
   • block
3. float

1. position 속성

position을 사용하지 않았을 때

position 속성은 간단히, html에서 정해진 위치를 css 를 사용하여 조정할 수 있는 것이다.

html의 형식에서 자유롭기 때문에 요소의 배치를 더 디테일하게 할 수 있다.

o relative

.box {
	position : relative;
	top: 100px;
	right: 100px;
}

relative 자신의 위치가 이동의 기준이 되는 속성 값이다.

이때

• top
• bottom
• left
• right

등으로 selector에 해당하는 위치를 이동 시킬 수 있다.

o absolute

.box {
	position : absolute;
	top: 100px;
	right: 100px;
}

absolute 값을 주면 *특정 부모가 이동의 기준이 된다.

*특정 부모: position을 사용한 부모중 움직이려는 요소에서 가장 가까운 부모

tip !
absolute 속성값 대신 부모 요소에 position: relative 주고 top: 10px 처럼 사용하면 동일한 효과를 낼 수 있다.

만약 absolute와 relative를 둘다 써야하는 상황이면 위의 방법을 사용해서 일관성을 유지할 것 같다. 변수는 가능한 적은 것이 좋으니ㄲ..

o fixed

.box {
	position : fixed;
	top: 100px;
	right: 100px;
}

fixed 는 브라우저 화면 기준으로 고정이 된다. 다른 요소들은 스크롤이 발생하면 위치가 변하지만

fixed 는 영향을 받지 않고 고정된 위치에서 보여진다.

position이 absolute, fixed이면 주변의 요소와 관계없지 위치하게 된다.

이는 요소간의 곂침을 나타낼 수 있다. 이럴땐 margin 또는 padding으로 이격을 주어 해결할 수 있다.

이렇게 요소를 융통성있게 활용하여 문제를 해결하는 거싱 Layout의 정도가 없는 이유이지 않나 싶다.

2. inline & block

태그들의 기본적으로 element 속성을 가지고 있는데

그 속성에 따라 연속으로 element가 쓰였을 때 수평, 수직 하도록 하는 개념이다.

o inline element

• 대표적인 태그로 <span>, <a>, <img>
• 한 라인에 여러 element를 쓸 수 있다.
• 같은 element 끼리 수평으로 배치한다고 생각하면 편하다.
• width, height 적용 x
• margin, padding-top, bottom 적용 x

o block element

• 대표적인 태그로 <header>, <footer>, <p>, <li>, <table>, <div>, <h1>
• 한 라인에 한 element만 쓸 수 있다.
• 같은 element 끼리 수직으로 배치한다고 생각하면 편하다.

o inline-block element

• inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다.
• inline 처럼 한 줄에 여러 element 작성 가능
• width, height 적용 o
• margin, padding-top, bottom 적용 o

*물론 이러한 특정은 css에서 dispaly 속성을 이용해서 바꿀 수 있다.

3.float

float는 '뜨다'라는 의미이며, 웹 페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

• float: inhrerit : 부모 요소에서 상속
• float: left : 왼쪽에 '부유' block box를 생성
• float: right : 오른쪽에 '부유' block box를 생성
• float: none : 요소를 부유시키지 않음

부유속성을 지정하게 되면 기존의 dispaly는 무시된다.

float를 잘 이용하면 이미지와 텍스트의 배치를 조화롭게 할 수 있을 것 같다.

분명 float가 없었으면 position으로 절대 위치를 잡고 텍스트를 일일히 변경해야했을 것이다.

Reference

https://ofcourse.kr/css-course/float-속성

https://medium.com/free-code-camp/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd