Monday_June_22
.
.
.

Position👇

position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.

static (기본 위치)

static은 position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않았을 때와 같다.

기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다.

좌표 프로퍼티(top, bottom, left, right)를 같이 사용할 수 없으며 사용할 경우에는 무시된다.

relative (상대 위치)

기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킨다.

Ex)
left: 10px;
이면 왼쪽에서 오른쪽으로 10px만큼 떨어진다는 뜻이고
left: -10px;
이면 위와 반대로 오른쪽에서 왼쪽으로 10px만큼 떨어진다는 뜻이다.

! 쉽게 말해 좌표 프로퍼티를 주면 안쪽으로 떨어지는거고 - 를 주면 밖으로 떨어진다.

static을 선언한 요소와 relative를 선언한 요소의 차이점은 좌표 프로퍼티의 동작 여부뿐이며 그외는 동일하게 동작한다.

absolute (절대 위치)

부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다.

만일 부모 또는 조상 요소가 static인 경우, document body를 기준으로 하여 좌표 프로퍼티대로 위치하게 된다.

따라서 부모 요소를 배치의 기준으로 삼기 위해서는 부모 요소에 relative를 정의하여야 한다.

absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

fixed (고정 위치)

부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다. (absolute와 동일)

fixed는 아무도 신경을 안쓰고 고정이 되기 때문에, 다른 요소와 겹칠 수 있다. 그래서 margin이나 padding 등으로 다른 요소와 겹치치 않게 해줘야한다.

Display👇

display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다.
모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있습니다.
대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline입니다.

Block

항상 새로운 라인에서 시작한다.(줄바꿈이 된다는 뜻이다.)

화면 크기 전체의 가로폭을 차지한다.
기본값으로 width: 100%, height: auto이다.

width, height, margin, padding 프로퍼티 지정이 가능하다.(사이즈 조절 가능!)

block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다

block 레벨 요소 예)
<div>, <h1 ~ h6>, <p>, <ol>, <ul>, <li>, <hr>, <table>, <form>

Inline

새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.

content의 너비만큼 가로폭을 차지한다.

width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다. 대신 글자 크기가 커지면 content가 커짐.

inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

inline 레벨 요소 예)
<span>, <a>, <strong>, <img>, <br>, <input>, <select>, <textarea>, <button>

Inline-block

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.

block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.

content의 너비만큼 가로폭을 차지한다.

None

해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다)

Float👇

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.

float 프로퍼티는 본래 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.

float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다.

float: left;
요소를 왼쪽으로 이동시킨다.
float: right;
요소를 오른쪽으로 이동시킨다.
float: none;
요소를 떠있게 하지 않는다 / 이동시키지 않는다. (기본값)

정렬

float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다.
float:left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고,
float:right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.

오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.

float 프로퍼티는 좌측, 우측 가로 정렬만 할 수 있다.
중앙 가로 정렬은 margin 프로퍼티를 사용해야 한다.

width

width 프로퍼티의 기본값은 100%이므로
width 프로퍼티값을 지정하지 않은 block 요소는 부모 요소의 가로폭을 가득 채운다.

width 프로퍼티를 선언하지 않은 block 레벨 요소에 float 프로퍼티가 선언되면 width가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소 위에 떠 있게(부유하게) 된다.