CSS 상속&속성

Jerry95 2024. 4. 7. 23:05

2024. 4. 7. 23:05

1. 상속

기본적으로 font-size나 color는 부모의 속성을 자식이 상속 받음

1-1) initial

<style>
    div{
        border: 1px solid silver;
        margin: 2px;
    }
    .parent{
        color: red;
        font-size: 20px;
    }
    .child2{

    }
</style>
<body>
    <div class="parent1">
        parent
        <div class="child1">child1</child>
        <div class="child2">child2</child>
    </div>
</body>

child2의 style을 따로 지정하지 않은 경우
child2의 style 중 color를 blue로 지정한 경우
child2의 style을 initial로 처리한 경우 : initial은 상속받지 않겠다는 의미

1-2) inherit

상속을 받겠다는 처리

1-3) unset

- 부모로부터 상속받을 값이 있을 때 : inherit

- 부모로부터 상속받을 값이 없을 때 : initial

2. text 속성

2-1) text-align

텍스트의 위치를 결정해주는 속성

text-align은 block 요소에서만 적용이 가능
- inline요소는 컨텐츠의 길이만큼만 너비를 가지기 때문에 왼쪽, 가운데, 오른쪽 정렬이 불가
- block요소는 부모를 기준으로 너비가 최대한 늘어나기 때문에 왼쪽, 가운데, 오른쪽 정렬 가능!
text-align이 적용되지 않는 경우 요소가 inline인지 확인 필요
적용되지 않을때
- 부모가 block 속성을 가진 element에서 text-algin 속성을 적용시키기2-2) text-indent들여쓰기 해주는 속성
상속 가능
block 요소에서만 적용 가능

3. 단위

3-1) 상대길이

<style>
    .parent{
        color: blue;
        font-size: 24px;
    }
    .child{
        color: red;
        font-size: 0.5em;
    }
</style>
<body>
	<div class="parent">
        Hi
        <div class="child">
            Hi
        <div>
    </div>
</body>

1) em, rem

em : 부모의 font-size
- 별도의 설정을 하지 않은 경우 font-size는 16px
rem : root의 font-size가 기준(=body태그)

2) vw, vh

뷰표트 백분율 길이
- vw : 뷰포트의 초기 컨테이닝 블록 너비 1%와 같음
- vh : 뷰포트의 초기 컨테이닝 블록 높이 1%와 같음

3) vmin, vmax

가로모드, 세로모드일때에 따라 vmin, vmax가 달라짐
더 긴 쪽이 vmax, 더작은 쪽이 vmax
- 가로모드, 세로모드일때 vmax, vmin 모두 동일한 값을 유지함

3-2) 함수표기법

1) calc()

width: calc(100% - 80px);

덧셈, 뺄셈, 곱셈, 나눗셈 모두 사용 가능
- 연산자 좌우에 공백 필수
여러 개의 단위를 섞어서 사용
- 상대길이 중에서 절대길이 만큼만 빼고 싶을때 사용

2) min(), max()

.container{
	width: min(100%, 200px);
    height: 200px;
}

min : 2개의 값 중 작은 값을 width로 선택
max : 2개의 값 중 큰 값을 width로 선택

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 기초 & 선택자 (1)	2024.04.07

jerry