24.07.04 Day04

최지원·2024년 8월 12일

삼성중공업 DT 제조 혁신 과정

목록 보기

4/62

CSS Nesting

CSS중요도
CSS가 어디에 선언되었는지에 따라서 우선순위가 달라짐.
1) head 요소 내의 style 요소
2) head 요소 내의 style 요소 내의 @import 문
3) <link> 로 연결된 CSS 파일
4) link 로 연결된 CSS 파일 내의 @import 문
5) 브라우저 디폴트 스타일시트

CSS를 이용하여 마우스 스크롤 시 한번에 화면 넘어가는 효과

/* html */
/* 스크롤 효과 */
html {
    overflow: hidden;
    /* 스크롤 스냅이 동작하는 방식 지정 */
    scroll-snap-type: y mandatory;
}

/* page */
.page {
		/* 스크롤 위치에 정렬되는 방식 지정 */
    scroll-snap-align: start;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

scroll-snap-type

스크롤 스냅이 동작하는 방식 지정

첫 번째 인자로 스냅이 적용될 축을 지정하고, 두 번째 인자로 스냅 적용 방식 지정
[scroll snap axis]

이름 설명
x 수평(가로) 축으로 snap position 지정
y 수직(세로) 축으로 snap position 지정
block snap area의 block 축으로 지정
inline inline 축으로 지정
both 두축의 위치를 개별적으로 스냅

[scroll snap strictness]

이름 설명
none 스냅하지 않음
proximity 스크롤 위치가 스냅 위치에 가까워지면 자연스럽게 스냅
mandatory 스크롤 위치가 스냅 위치와 정확히 일치해야만 스냅

scroll-snap-align

scroll-snap-align 속성은 스크롤 스냅이 적용되는 요소가 스냅 위치에 정렬되는 방식 지정
scroll-snap-type 에서 지정한 축을 기준으로 snap aread의 정렬을 정함

이름 설명
none snap position을 지정하지 않음
start 스크롤 스냅 위치를 snap area 시작 부분에 맞추도록 지정
end 스크롤 스냅 위치를 snap are의 끝 부분에 맞추도록 지정
center 스크롤 스냅 위치를 snap area의 가운데 부분에 맞추도록 지정

이름	설명
x	수평(가로) 축으로 snap position 지정
y	수직(세로) 축으로 snap position 지정
block	snap area의 block 축으로 지정
inline	inline 축으로 지정
both	두축의 위치를 개별적으로 스냅

이름	설명
none	스냅하지 않음
proximity	스크롤 위치가 스냅 위치에 가까워지면 자연스럽게 스냅
mandatory	스크롤 위치가 스냅 위치와 정확히 일치해야만 스냅

이름	설명
none	snap position을 지정하지 않음
start	스크롤 스냅 위치를 snap area 시작 부분에 맞추도록 지정
end	스크롤 스냅 위치를 snap are의 끝 부분에 맞추도록 지정
center	스크롤 스냅 위치를 snap area의 가운데 부분에 맞추도록 지정

Figma

Auto layout

low

column

Hug Contents

Fill Container

부모

자식에게 : 일렬로 설것

나의 상태

고정 값

자식 크기에 맞추거나

자식

나의 상태

고정 값

부모의 크기를 채우거나

CSS Flex

html

<div class="parent">
        <div class="child red"></div>
        <div class="child blue"></div>
        <div class="child green"></div>
        <div class="child yellow"></div>
        <div class="child black"></div>
    </div>

css

.parent{
            background-color: #fff;
            border: 1px solid gray;
            padding: 20px;
            display: flex;
            flex-direction: row;

         

            /* 가운데 */
            justify-content: center;

            /* 부모와 자식사이 거리
            justify-content: space-around; */

            align-items: center;
        }

    		/* row : row의 주축은 수평 방향
            column : 주축이 수직 방향
            cross-axis : 교차축*/