CSS Display

다음과 같이 5종류가 있음

inline, block, inline-block, none, flex

Inline

특징
- 줄바꿈 없이 나란히 배치
- width, height가 제대로 동작하지 않음
- margin의 top이랑 bottom의 간격 지정이 불가능
대표적인 inline 태그
- span 태그, a 태그

Block

특징
- 요소마다 줄 바꿈이 들어감 (한 줄을 차지)
- 모든 margin, padding 요소가 적용 가능
대표적인 block 태그
- div 태그, p 태그, h1 태그 등

inline-block

특징
- 줄바꿈 없이 나란히 배치
- 그러나, w, h, margin, padding 속성이 적용됨 → 공간이 좁으면 알아서 줄바꿈
대표적인 inline-block 태그
- button, select 등

none

특징
- 요소를 보이지 않게 만듦

flex

특징
- 메인 축을 기반으로 정렬을 진행

{
	flex-direction: row, columnn, row-reverse, column,reverse;
	flex-wrap: nowrap, wrap;
	align-content: normal, center, flex-start, flex-end, space-around, space-between, stretch;
	justify-content: normal, center, flex-start, flex-end, space-around, space-between, space-evenly; 
	align-items: normal, flex-start, flex-end, stretch, baseline;
}

개발자 도구를 이용해서 해당 속성을 이용하면 됨

CSS Position

다음과 같이 3종류가 있음

Static, relative, absolute

Fixed

레이아웃 고정 (사용자가 스크롤해도 위치 유지)
width 값이 없는 경우, inline 형태를 취함 → width를 꼭 설정해줘야 함
상위 요소에 영향을 받지 않고 고정된 위치를 설정

Relative

현재 좌표를 기준으로 위치를 계산

.top{
            /* fixed 기준점: 최상위
                relative의 기준점 : 현재 태그의 위치
                                    (3차원 요소이므로 겹칠 수 있음)
                width가 줄어들진 않는다.
            */
            
            position: relative;
            top: 5px;
        }
<body>
    <span class="top">top</span>
</body>

Absolute

부모 태그를 기반으로 움직임 / 아무 태그가 없다면, body 태그 기준
width 값이 없다면, inline 형태를 취함

.parent{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }

        .child{
            position:absolute;
            right: 10px;
            bottom: 0;
            background-color: brown;
            /* 부모 노드 안에서 움직이는 걸 확인할 수 있음; 
                상위가 absolute여도 달라붙음
                relative & absolute 짝으로 많이 쓰임
            */
        }
<body>
	<div class="parent">
		<div class="child">child</div>
	</div>
</body>

<style>
        body{
            height: 1200px;
            /* fixed와 다르게 고정되지 않는다. */
        }
        .absolute{
            background-color: aliceblue;
            /* 선언 시 width가 inline 형태로 줄어든다 */
            position: absolute;
            right: 10px;
        }
        .parent{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        .child{
            position : absolute;
            right: 0;
            background-color: white;
        }
        .a{
        }
        .b{
            top: 50%;
            transform: translateY(-50%);
        }
        .c{
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="absolute">
    absolute
    </div>
    <div class="parent">
        <div class="child a">child1</div>
        <div class="child b">child2</div>
        <div class="child c">child3</div>
    </div>
</body>

z-index

z index는 3차원 요소(fixed, relative, absolute)에서만 동작
z index에 큰 값을 부여할수록 더 우선순위가 높다 (앞으로 온다)

Web 개발 Extention

Live Server : Web을 저장할 때마다 자동 새로고침으로 real-time result 제공
Path Intellisense: 이미지 / 파일 위치를 가져올 때 자동완성 수행
IntelliSense for CSS class names in HTML: CSS 자동완성 기능
Auto Close Tag: HTML 태그를 자동으로 닫아줌.
Auto Rename Tag: HTML 태그를 수정할 때 자동으로 변경해줌.

저작자표시 비영리 변경금지 (새창열림)