[TIL] CSS Break down (part.1)

🔨CSS 부숴버리기 (나 말고 CSS...)

CSS 공부를 하면서 대충으로나마 알고있던, 헷갈렸던 부분을 최대한 (내가)이해할 수 있는 선에서 정리하기 위해 쓴다. 부숴버린다.

1. 단위📐

1.1 절대적 단위

절대적인 크기를 주어서 어떤 환경에서도(화면이 작던 크던) 내가 지정해준 크기로 동일한 사이즈를 보여준다.

• px : 글씨크기를 지정할 때에 쓰인다. 기본적인 픽셀 값은 16px이다

1.2 가변 크기 단위

어떠한 이유에서 크기가 들쭉날쭉한 아이들이다.

• em : 배수 단위 (부모의 글자크기에 따라 기준점이 달라진다.)
• % : 백분율 단위
• rem_ root em (최상위 요소의 글자크기에 따라 달라진다.)
• vw : 화면비 백분율 단위
• vh : 화면비 백분율 단위

내 기준, 이건 설명은 훑어보고 코드를 직접 쳐서 확인하는게 제일 좋다.

<!-- one부터 차례대로 자식요소로 생성 -->
<div class="one">one
        <div class="two">two
            <div class="three">three
                <div class="four">four</div>
            </div>
        </div>
    </div>

body {
    margin: 0;
    padding: 0;
}

.one {
    font-size: 30px;
    background: cornflowerblue;
}
.two {
    font-size: 2em;
    width: 70%;
    background: yellowgreen;
}
.three {
    font-size: 1rem;
    width: 50%;
    background: chocolate;
}
.four {
    font-size: 200%;
    width: 50vw;
    background: hotpink;
}

간략히 개요를 설명하고 결과 화면을 봐보자.

• 브라우저의 기본 마진과 패딩을 초기화
• 직관적으로 보기위해 각각 다른 배경색상 부여
• 우선, one은 width를 주지 않아도 100%를 다 차지하는 것을 볼 수 있다.
  • 브라우저의 기본 폰트크기가 아닌, 30px 부여(절대단위)
• two는 부모요소의 글씨 크기의 2em즉 두배가 됨 (30*2=60px)
  • width 역시 부모의 너비의 70%가 됨
• three의 글씨크기는 1rem. 최상위 요소의 크기와 같아졌다. (기본값인16px)
  • width는 부모인 two의 절반이 되었다.(전체가 아닌 부모값의 %임!!!!)
• four의 글씨크기는 부모의 200%가 됨. 부모의 크기는 16px이므로 32px이 됨
  • width는 50vw. 보고 있는 뷰어 화면의 50%가 되었다.(부모너비와는 별개로 뷰어기준!)

2. BOX-MODEL🟩

• 마진은 외부 여백
• 패딩은 내부 여백
• 내부, 외부 상관없이 여백은 상, 하, 좌, 우 원하는 곳에 줄 수 있다.(단축속성, 개별속성)
• 보더와 패딩은 content가 아니다.
• 단축속성의 핵심은 12시부터 시계방향으로!!
• box-sizing: border-box; 를 잊지말자😎

백문이 불여일견.
예상 시나리오는 다음과 같다😁

• 클래스가 box box(n)인 박스들 생성, 전부 너비와 높이 모두 100px 부여(하위 숫자는 n을 의미)
  • 직관적관찰을 위해 박스에 검은선 삽입
  1. 아무런 작업 하지 않음
  2. 보더 값을 준다. 10px
  3. 마진값을 좌, 상에 준다. 10px
  4. 패딩값을 준다. 10px
  5. 패딩값을 준다. 10px 20px 30px 40px

     <div class="box box1">content</div>
     <div class="box box2">content</div>
     <div class="box box3">content</div>
     <!--  패딩값 확인을 위해 콘텐츠크기에 최대한 맞게 글자를 줌 -->
     <div class="box box4">Lorem ipsum dolor situod enim inventore</div>
     <div class="box box5">Lorem ipsum dolor situod enim inventore aniusantium.</div>

.box {
    width: 100px;
    height: 100px;
    background: palevioletred;
    border: 1px solid black;
}

.box1 {
}

.box2 {
    border: 10px solid yellowgreen
}
.box3 {
    margin-left: 10px;
    margin-top: 10px;
}
.box4 {
    padding: 10px;
}
.box5 {
    padding: 10px 20px 30px 40px;
}

1. 특별한 일 없음. 너비, 높이 100px크기의(엄밀히는 보더값 포함 102px)상자가 보임
2. 보더의 크기만큼 우리가 볼때 요소도 커진거 같음.
3. 좌, 상단에 10px만큼 외부와 떨어짐. 아래에는 마진없으니 꼭 붙어있음.
4. 일괄적으로 내부에 10px 여백이 생김. 패딩값만큼 요소도 커져보임.
   • 위와 비교하면 왼쪽 10, 오른쪽10이 더커짐.(위아래도 10씩 커졌음을 유추)
5. 내부에 시계방향을 따라 점점 여백이 커짐. 요소가 제일 커져보임(높이는40, 너비는 60커짐을 유추)

중요한점은, 보더와 패딩값에 의해 커진 부분은 컨텐츠의 공간이 아니다!!
추가적으로, 보더에도 여러가지 속성이 있고 개별적으로 적용가능하다. 다양한 예시는 다음과 같다.

/* html요소로는 위의 box5를 참고한다 */
.box5 {
    padding: 10px 20px 30px 40px;
    border-top: 5px solid green;
    border-right: 10px dotted red;
    border-bottom: 10px dashed blue;
    border-left: 10px double black;
}

개별적으로 모양도 다르고 색깔도 다르게 적용 가능하다.

Border-radius⭕

border-radius란 기본적인 네모난 박스를 동그랗게 깎아내는 작업이다. %를 주어서 깎을 수 있고, 절대 단위인 px값을 주어 깎을 수 있다.

.box6 { /* 비교를 위해 아무것도 하지 않음 */}

.box7 { border-radius: 50%;}

.box8 { border-radius: 24px;}

.box9 { border-radius: 40px;}

.box10 { border-radius: 60px;}

.box11 { border-top-left-radius: 120px;}

• 우선 동그랗게 만들기 가장 쉬운 방식은 50%를 주는 것이다.
• 그 다음은 박스 크기를 계산하고, 절반만큼 값을 주는 것이다.
  • 위의 경우 너비, 높이 모두 100px 보더의 값이 10px이다.
    즉, 총 가로세로가 120px인 박스이고, 이 크기로 계산해야하더라(50px주니 동그랗지 않아..)
• 위처럼 %계산에 있어서도 120*0.5=60px이 나와서 동그랗게 되는 것이다.
  • 만약 20%였다면, 24px만큼씩 깎는 것이다.
• box11처럼 원하는 부분만을 깎기도 가능하다.

참고로 위의 사진은 보기좋게 하기위해 display를 inline-block으로 설정한건데, 그렇게 설정하면 알 수 없는 살짝의 띄어짐 현상이 발생한다.(마진값없음!!!!)
위의 현상은 인라인 요소의 특징이다. 우리가 코드작성 할 때 보기좋게 한 줄씩 띄어서 작성한 것이, 공백으로 받아들여져서 공간이 약간 생긴 것이다. 부모요소의 font-size를 0으로 해주면 공간이 사라진다.(띄어쓰기를 인식은 하지만 그 크기가 0이니까!)