[CSS] CSS 속성 2.5 - 에이블런 프론트엔드부트캠프 4일차

1. FullScreen

width: 100%, height: 100vh로 설정하면 화면의 최대 크기가 된다.

width는 부모 요소가 명시적으로 크기가 지정되어 있지 않아도 적용이 되어 전체 너비를 뜻하게 되는데, height의 경우는 100%로 설정했어도 부모 요소가 명시적으로 높이가 설정되어 있지 않은 경우 적용이 되지 않기 때문에 width는 100%를 사용하고, height는 100vh를 사용한다.

 

2. inline-block

기본적으로 inline 속성처럼 나란히 배치되지만, block 속성처럼 width와 height 속성 지정이나 margin과 padding속성의 상하 간격 지정이 가능하다.

inline-block을 활용한 도형 정렬

 

.other {
    width: 400px;
    border: 1px solid black;
    margin: 50px auto;
    text-align: center;
    font-size: 0;
}

.other a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin: 0 10px;
}

 

3. margin 역상속 해결방법

margin 역상속된 화면

section {
    width: 100%;
    height: 2000px;
    background-color: blanchedalmond;
    box-sizing: border-box;
}

 

부모 블록 요소에서 첫번째 자식에 margin-top이 설정되면 해당 margin값이 부모 요소에 역상속된다.

margin 역상속 해결한 화면

section {
    width: 100%;
    height: 2000px;
    background-color: blanchedalmond;
    box-sizing: border-box;
}

첫번째 자식인 블록 요소에 margin-top을 주는 것이 아닌 부모 요소에 padding-top을 설정해 위 아래 여백을 준다