[HTML/CSS] 클래스(Class) 사용법 / 레이아웃 관련 CSS

문서의 레이아웃을 짜기 위한 CSS 모음 정리.

클래스(Class) 사용법

    <div class="box1">BOX1</div>
    <div class="box2">BOX2</div>

div.box1 {
    background-color: pink;
}

div.box2 {
    background-color: orange;
}

여러 태그들을 분류하거나 묶어서 따로 속성을 부여하기 위해 이름을 지정하는 것. 예를 들어 CSS에서 div에 스타일을 지정하면 문서 내 모든 div에 공통 적용이 되지만, div별로 클래스를 따로 지정해주면 각각의 div에 다른 스타일을 적용할 수 있다. 예시에서는 배경색을 서로 다르게 지정했다.

방법은 다음과 같다.

HTML에서 클래스를 지정할 태그의 머리쪽에 class="클래스명"을 입력한다.
CSS에서 해당 태그명을 입력하고 뒤에 '.클래스명' 을 붙힌다.
클래스별로 스타일을 따로 부여해서 자유롭게 활용한다.

id라는 것도 있지만, 주로 동적인 제어를 할 때 세부적으로 지정해서 사용하는 것으로 지금 단계에서 필요하진 않다. 오히려 id를 남용하면 구동 코드를 짜는 단계에서 id를 활용하기 어려워 방해가 된다.

Border (선 설정)

div {
    border: 1px solid black;
}

해당 태그의 선 속성을 지정한다.
두께, 선 형태, 색상 순으로 공백으로 구분하여 차례대로 입력한다.
선 형태의 경우 solid, dashed, dotted 세 가지 종류가 있다.

Width, Height (가로, 세로 크기 설정)

div {
    width: 200px; height: 200px;
}

해당 태그의 가로(width)와 세로(height) 사이즈를 설정한다.
정확한 수치를 입력하여 지정한다. px, % 등 다양한 단위를 사용할 수 있다.

Margin (마진)

div {
    margin: 50px;
}

해당 태그의 외부 여백을 설정한다.
auto 값을 설정할 경우 전체 넓이를 기준으로 자동으로 균등 배치한다.
숫자값은 다양한 방법으로 입력할 수 있다.
- 숫자값이 1개 - 상/하/좌/우 공통 적용
  ex_ margin: 50px;
- 숫자값이 2개 - 상하 / 좌우
  ex_ margin: 50px auto;
- 숫자값이 4개 - 위쪽부터 시계방향으로 상/우/하/좌
  ex_ margin: 0px 10px 20px 30px;
- 직접 지정해서 입력하는 경우 - margin-top, margin-bottom, margin-left, margin-right
- ex_ margin-bottom: 50px;

Collapsing-Margin (마진 겹침 현상)

box1의 margin-bottom 50px와 box2의 margin-top 10px가 합해져 두 박스 사이가 60px 떨어져야 하나, 50px만 떨어져있다.

div.box1 {
    margin-bottom: 50px;
    background-color: pink;
}

div.box2 {
    margin-top: 10px;
    background-color: orange;
}

마진이 좌우로 붙을 때는 괜찮으나, 상하로 붙을 시 큰값 하나만 붙는다. 고급 단계의 코딩 이론이므로 우선은 이런 문제가 생긴다는 걸 알아만 두고 넘어가기로 한다.

Padding (패딩)

div {
    padding: 50px;
}

해당 태그의 내부 여백을 설정한다.
숫자값은 다양한 방법으로 입력할 수 있다. 입력법은 마진과 같다.
- 숫자값이 1개 - 상/하/좌/우 공통 적용
  ex_ padding: 50px;
- 숫자값이 2개 - 상하 / 좌우
  ex_ padding: 50px 30px;
- 숫자값이 4개 - 위쪽부터 시계방향으로 상/우/하/좌
  ex_ padding: 0px 10px 20px 30px;
- 직접 지정해서 입력하는 경우 - padding-top, padding-bottom, padding-left, padding-right
- ex_ padding-top: 10px;

Padding과 Box-Sizing

패딩값에 따라 div 크기가 확장된 모습 / box-sizing으로 div 크기를 유지한 채 패딩만 적용된 모습

일반적으로 padding을 입력하면 내부에서만 늘어나는 게 아니라 해당 태그 영역 자체가 커지게 된다.
ex_ 가로세로 200px의 div에 padding을 50px 주면, 상하좌우 50px씩 div의 크기가 확장되어 가로세로 300px가 된다.
예전에는 해당 패딩값을 계산해 일일이 본래 가로세로 크기를 수정했었으나, 번거롭기 때문에 box-sizing 코드를 삽입함으로써 해결할 수 있다.

div.box1 {
    border: 1px solid black;
    width: 200px; height: 200px;
    margin: 50px;
    font-size: 30px;
    padding: 50px;
    background-color: pink;
    box-sizing: border-box;
}

Overflow 속성

div.box2 {
    margin-top: 10px;
    background-color: orange;
    overflow: hidden;
}

내용이 지정된 크기를 넘어서는 경우, 텍스트가 아래로 흘러 넘치게 된다.
overflow로 넘어가는 부분을 어떻게 처리할 것인지 할 수 있다.
- visible - 기본값. 내용이 넘치면 밖으로 비져나온다.
- hidden - 지정된 크기로 잘려 나온다.
- auto - 내용의 길이에 따라 자동으로 스크롤이 생긴다.

overflow 속성값 정리. visible(기본값) / hidden / auto

클래스와 레이아웃에 대해 정리했다.

Class는 앞으로 주구장창 쓰게 될... CSS의 기본 중의 기본 사용법이다. 사이트가 복잡해질 수록 같은 태그들이 반복적으로 들어가기 때문에, 각각의 대상들을 구분하고 다른 스타일을 주기 위해선 클래스로 비슷한 것들을 묶어 제어하거나 고유의 이름을 부여해줄 필요가 있다.

레이아웃은 웹사이트의 내용을 나누고 큰 디자인의 흐름을 잡는데에 쓰이므로, 사이트의 뼈대라고도 볼 수 있다.

여기선 간단하게만 정리했지만, 이것들의 응용과 더불어 다른 세부적인 속성들까지 활용하면 레이아웃은 정말 무궁무진하게 만들어낼 수 있다. 배워야 할 게 많기 때문에, 그리고 배운 것들을 잘 활용하기 위해 기초부터 탄탄하게 알아두어야겠다.