[TIL] Layout A to Z

sgr2134·2021년 4월 14일
0

CSS

목록 보기
2/2
post-thumbnail

웹 레이아웃 3대장: Float, Position, Display

Float

이미지 주위의 텍스트를 감싸기 위해 처음 만들어졌다.

div {
	float:left 
    };

위와 같이 사용하며 float의 속성값으로 left, right, none을 대표적으로 사용할 수 있다. 단어 의미 그대로 left는 선택한 요소를 좌측으로 옮긴다는 의미이며 right는 오른쪽 none은 움직이지 않을 때 사용한다.

float을 사용하게 되면 요소는 block의 성격을 띠게 되는데 완벽한 block의 역할을 하지 않는다. 일반적으로 자리를 차지하는 block의 특성을 무시한채 둥둥 떠다니기에 부모 요소는 float을 쓴 요소의 자리를 무시하기 쉽다 등의 문제가 발생한다.

{clear:both(or left, right)}

clear 속성을 이용하여 float 다음에 오는 요소에 float을 제거할 수 있으나, 상당히 번거롭기에 잘 사용하지 않는다.
즉슨, 현재는 잘 이용하지 않지만 예전의 코드를 수정하기 위해서 기본적인 개념은 알고 있는게 좋다.

Position

개인적으로는 Position을 좋아한다,, 왠지 모르겠지만 Position 개념을 이해했을 때 오는 쾌감이 좋았고 position을 사용해서 나중에 hover를 사용할 때 옆에서 쉭~ 나오는것 같은 애니메이션적인 요소를 줄 때 재미있다!!

static

position의 기본적인 속성으로 잘 사용하지는 않는 속성이다. (기본값이라 그런것 같다.)

relative

-별도의 속성이 주어지지 않는 이상 static과 동일하게 작동한다.
-하지만 후에 오는 요소의 position이 relative나 absolute로 설정되고 top, bottom, left, right 와 같은 하위요소가 들어가면 처음 나온 relative 기준으로 위치가 맞춰진다.

.ancestor { position:relative }
        
 .descent{ position:absolute; top: 0; left: 0; }

absolute

-바로 absolute로 넘어가서 absolute는 가장 가까운 조상을 기준으로 위치가 지정된다.
-만약 위에 아무 요소에 position이 지정되어 있지 않으면 문서의 body를 기준으로 맞추어 진다.

relativeabsolute를 통해 위의 그림을 살펴본다면, 조상인 .ancestor(relative)의 기준에 맞추어 자식요소 .descent(absolute)는 top:0 과 left:0으로 설정되어있기에 부모의 기준으로 좌측 맨 위쪽에 위치하게 된다.

fixed

-fixed 요소는 viewport(화면에 보여지는 페이지의 크기 대상)에 상대적으로 위치가 지정된다. 이는 페이지가 스크롤 되더라도 늘 같은 곳에 위치하게 한다.
-마찬가지로 top, left, right, bottom 요소를 사용하여 값을 줄 수 있으며 화면에서 보여지는 페이지의 크기를 대상으로 한다.

Display

Layout을 제어하기 위해 가장 중요한 property라고 할 수있다. 대부분의 elements의 값들은 기본값이 block 혹은 inline 요소로 되어있는데, display 속성을 이용하여 이러한 값들을 변경할 수 있다.

block

{display:block}

요소들을 block 요소로 바꾸어주는 표현식. 다음의 식을 통해 inline 요소를 block으로 바꾸어 줄 수 있다.
(대표적인 block 요소: div, p, semantic elements..)

inline

{display:inline}

요소들을 inline 요소로 바꾸어주는 표현식. 다음의 식을 통해 block 요소를 inline 요소로 바꿀 수 있다.
(대표적인 inline 요소: span, a 와 같이 단락의 흐름을 방해하지 않는 요소)

none

{display:none}

element를 감추는데 주로 사용한다. 사용하면 Javescript에서는 읽히지 않는다. 실제 페이지를 렌더링 해도 element가 존재하지 않는 것처럼 나타난다.
( 여기서 visuality와는 다른데 {visuality:hidden} 을 하게 되면 화면상에서능 보이지 않지만 공간은 그대로 차지하고 있다. )

inline-block

{display:inline-block}
inline 속성과 비슷하지만, 너비와 높이를 지정할 수 있다는 차이가 있다.
inline-block을 사용할 때 알아야 할 점!
1) inline-block 요소는 vertical-align property의 영향을 받는다.
2) 각 칼럼의 너비 설정이 필요하다.
3) 각 칼럼 사이의 공백이 있으면 칼럼간의 틈이 생긴다.

이렇게 display의 속성들을 알아보았는데,, 사실 가장 많이 쓰이며 거의 magic word와 같은 flex의 설명은 여기서 하진 않았다.. 왜냐면 너무 중요해서 따로 해야하기때문!

일단은 레이아웃을 만드는 여러 요소들을 배워보는 시간에 만족하는 걸로!

profile
못하는것도 지겨워서 공부한 걸 기록합니다.. 나아지겠죠 🙏

0개의 댓글