[CSS] CSS 레이아웃(display, position, float)

1. CSS 레이아웃

- HTML 페이지를 부모 자식 관계를 설정하고 배치

- Z 인덱스로 상하를 구분하여 앞/뒤의 배치를 설정하기 위한 화면 구성

- 레이아웃은 CSS의 전부라고 해도 관언이 아닐 정도로 복잡

- 속성을 구성/구현하기 어려우며, 이는 수많은 시행착오를 통해 익힐 필요 있음

2. 디스플레이(display) 속성

- 레이아웃의 가장 기본적인 속성으로 가로 폭을 박스/화면 전체 차지할지 등 결정

- 태그마다 기본 속성을 가지고 있으며, 기본적으로 <p><div> 등은 block

- <a><span><input>등은 inline 속성을 기본 값으로 갖는다.

- 사용 예 : display: block;

none	화면에서 태그를 숨김
block	대표적으로 <div> 태그의 기본속성 content/text와 상관없이 한줄 전체를 점유 가로영역(너비를 100% 차지하는 수직 정렬)을 모두 채우는 스타일
inline	대표적으로 <span> 태그의 기본속성 content/text의 크기만큼 넓이를 갖음 width, height 및 margin 과 같은 속성 적용이 불가 자식요소의 너비에 따라 너비가 결정되며, 수평 정렬
inline-block	블록과 인라인 중간 속성으로 기본 속성은 inline을 따름 단, width, height 및 margin과 같은 속성들을 적용할 수 있음

<body>
    <!-- 디스플레이 속성 -->
    <h3>디스플레이(display) 속성</h3>

    <div>
        <span>SPAN 태그는 기본이 인라인이다.</span>
        <p>P 태그는 기본이 블록이다.</p>
        <p style="display: inline; width: 500px; height: 80px;">
            P 태그를 인라인으로(width, height 무시)
        </p>
        <span style="display: block;">SPAN 태그를 블록으로</span>
        <p style="display: inline-block; width: 300px; height: 80px;">
            P 태그를 (display: inline-block; width: 300px; height: 80px;) 속성으로 했다.
        </p>
    </div>
</body>
<style>
    p, span {
        background-color: gray;
        border: 1px dashed rgb(66, 45, 255);
    }
    
    div {
        border: 1px dotted rgb(255, 100, 100);
    }
</style>

3. 포지셔닝(position)

https://tadaktadak-it.tistory.com/71?category=1024176

[CSS] CSS position, z-index

- CSS 요소들의 위치를 결정하는 방식을 설정 1. 정적(static)위치 지정방식 - 기본값으로 HTML 요소의 위치를 결정하는 기본적인 방식 - top, left, right, bottom 속성값을 사용할 수 없음 - 단순히 웹 페이

tadaktadak-it.tistory.com

- 태그를 화면에서 상대위치 또는 절대위치로 배치할지를 결정

static	속성을 지정하지 않으면 이 값을 기본값(HTML의 기본 포지셔닝)
inherit	부모 태그의 속성 값을 상속받음
relative	기본 위치를 기준으로 상하좌우 상대적인 좌표로 배치 여러 개 있을 경우 상하좌우에 있는 것을 기준으로 배치
absoulte	부모/자식 안에서 부모의 좌상단을 기준으로 절대 좌표로 배치 단, 이 속성은 부모의 포지셔닝 속성이 설정되어 있어야 함 여러개가 있든 말든 무조건 기본 위치를 기준으로 배치
fixed	스크롤과 관계 없이 화면 프레임의 좌상단을 기준으로 고정 좌표로 배치
sticty	부모 태그의 크기를 기준으로 절대 좌표로 배치

<body>
    <!-- relative vs absolute -->
    <h3>relative vs absolute</h3>

    <!-- relative -->
    <!-- 기본 위치를 기준으로 상하좌우 상대적인 좌표로 배치 -->
    <div style="position: relative">
        <span style="position: relative; left: 10px;">A</span>
        <span style="position: relative; left: 20px;">B</span>
        <span style="position: relative; left: 50px;">C</span>
        <span style="position: relative; left: 50px; top: 50px;">D</span>
        <span style="position: relative; left: 50px; top: 100px;">E</span>
    </div>

    <!-- absolute -->
    <!-- 부모/자식 안에서 부모의 좌상단을 기준으로 절대 좌료로 배치 -->
    <div style="position: relative">
        <span style="position: absolute; left: 10px;">가</span>
        <span style="position: absolute; left: 50px;">나</span>
        <span style="position: absolute; left: 70px; top: 50px">다</span>
    </div>
</body>

<style>
    span {
        display: inline-block;
        background-color: gray;
        border: 1px dashed red;
        width: 100px;
        height: 100px;
    }

    div {
        border: 1px dotted blue;
        margin-top: 30px;
        height: 400px;
        width: 400px;
    }
</style>

저작자표시

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] CSS 배경 이미지(background-image) (0)	2022.10.05
[CSS] CSS block vs inline, <div> vs <span> (1)	2022.09.22
[CSS] CSS 박스 모델, border, padding, margin (0)	2022.09.22
[CSS] CSS 배경(background), 글자 색상(color) (1)	2022.09.21
[CSS] CSS 개요, 스타일 시트, 기본 문법(형식), 선택자 (0)	2022.09.19

1. CSS 레이아웃

2. 디스플레이(display) 속성

3. 포지셔닝(position)

'FrontEnd > CSS' 카테고리의 다른 글

티스토리툴바