[클라우딩 어플리케이션 엔지니어링 TIL] 15. CSS 기초(표시 유형과 레이아웃)

1.학습 주제

• 표시 유형
• position
• Flexbox
• Grid

2.주요 메모 사항 소개

표시 유형

속성	설명	작성 예시
display	요소를 블록, 인라인에 대한 처리의 선택과 자식 요소를 배치하는 레이아웃을 설정할 수 있다. 태그마다 기본값이 존재(<span>:inline, <div>:block) inline 유형을 block으로 바꿔서 CSS 적용을 하거나 그 반대도 가능 none을 사용하여 요소가 존재하지 않는 것처럼 처리가능	display:block; display:inline; display:none;
visibility	레이아웃을 변경하지 않고 시각적으로 보이거나 숨길 수있다. display:none 과 차이점은 시각적으로 보이지 않기 때문에 레이아웃에는 존재한다.	visibility: visible; visibility:hidden;
float	문맥의 흐름으로부터 빠져 좌우측에 배치되는 속성 한글이나 워드에서 글자속에 그림이 배치되는 것과 비슷	float: left; float:right;

float:left의 차이

position

• 문서 상에 요소를 배치하는 방법을 지정
• top, right, bottom, left 값으로 위치를 제어, z-index를 통해 쌓이는 순서를 정의
• z-index:0이 기본값이고 숫자가 높을 수록 높은 z축을 가진다.

속성	설명
position:static;	기본값 문서 흐름에 따라 배치된다. 기존 자리를 차지한다.
position:relative;	문서의 흐름에 따라 배치된다. 기존 자리를 차지한다.
position:absolute;	가장 가까운 부모태그가 position이 적용된 요소를 기준으로 배치된다. 기존 자리를 차지 하지 않는다.
position:fixed;	브라우저 기준 화면이 고정된다. 스크롤을 해도 자리가 바뀌지 않는다. 기존 자리는 차지 하지 않는다.
position:sticky;	움직이다가 화면에 맞닿으면 움직인다. 기존 자리를 차지한다.

예시)

<div style="padding:30px; background-color:gray;">
    <div id="first" style="padding:30px; background-color:purple;">
        <div style="background-color: red;width:100px;">박스 1</div>
        <div style="background-color: yellow;width:100px;">박스 2</div>
        <div style="background-color: blue;width:100px;">박스 3</div>
    </div>
</div>

박스2에 각각의 속성을 적용 시 그림

• position:static;

position:static

• position:relative; top:40px;

postion:relative;

• position:absolute; top:40px;

• position:absolute; top:40px;+id:first에 position:relative;

Flexbox

• display:flex;를 통해 적용. 요소를 flex-container로 만든다.
• 유연함을 가지는 1차원 레이아웃을 만든다.

속성	설명	작성 예시
flex-direction	요소가 배치되는 방향(메인 축)을 정한다. 속성으로는 row(기본값),column이 존재 요소를 반대 순서로 배치하는 reverse도 존재	flex-direction:row; flex-direction:column; flex-direction:row-reverse; flex-direction:column-reverse;
justify-content	메인 축을 기준으로 요소의 배치를 정할 수 있다.	justify-content: space-around;
align-items	수직 축을 기준으로 요소의 배치를 정한다.	align-items:center;
flex-grow/flex-shrink	flex 컨테이너를 유연하게 배치할 수 있게 만든다.	flex-grow:2;
flex-basis	flex의 기본 크기를 설정	flex-basis:auto;

Grid

• display:grid;를 통해 적용. 요소를 grid-container로 만든다.
• 수평선과 수직선을 가지는 2차원 레이아웃을 만든다.

flexbox와 grid는 너무 양이 방대하고 말로 설명해서는 이해하기 힘듬으로 링크를 첨부한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout

CSS flexible box layout - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

CSS grid layout - CSS: Cascading Style Sheets | MDN

3. 공부하며 느낀 점

한 번 배워봤던 내용이라서 어렵지는 않지만 정리하기가 너무 많다.

4.출처