Home HTML/CSS 고급 모듈
Post
Cancel

HTML/CSS 고급 모듈

이전 HTML/CSS에서는 HTML과 CSS에 대한 기본적인 이해와 응용에 관한 내용이었다면, 이제는 어떻게 하면 좀 더 쉽게 레이아웃을 작성 할 수 있는지에 대해서 적어볼까 합니다.

Bootstrap

FrontEnd에서는 Bootstrap이라는 툴킷을 이용하여 좀 더 쉽고 빠르게 프로젝트를 완성 시킬 수 있습니다.

먼저, Bootstrap을 시작하려면 bootstrap css와 js를 html에 적용해야 합니다.

저희는 앞서 배운 cdn을 이용해 적용시켜보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
<head>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
</head>
<body>
  <!-- 가장 아랫 부분에 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
  • Bootstrap 시작하기에서는 integrity와 crossorigin 속성이 존재하는데, 이는 cdn의 보안 취약점을 막아주는 속성입니다.

이런식으로 Bootstrap을 적용하였다면, 이제 우리는 간편하게 원하는 컴포넌트를 복사하여 사용 할 수 있습니다.

Bootstrap 사용하기

Bootstrap 버튼의 예시와 같이 다양한 스타일의 버튼들을 한줄의 코드로 가져다 쓸 수 있으며, 상황에 맞게 커스텀하여 사용이 가능합니다.

또한, Bootstrap 유틸리티의 예시와 같이 간단하게 html상에서 마진과 패딩을 부여할 수도 있습니다.

Bootstrap 반응형 레이아웃 작성하기

Bootstrap 중단점은 Bootstrap의 강력한 반응형 기능 중 하나입니다.

앞서 설명했던 반응형 레이아웃을 만들때 중단점을 기준으로 웹, 테블릿, 모바일 환경에서 레이아웃이 다르게 나타나게 설정한것과 같이 Bootstrap에서도 중단점을 이용해 손쉽게 다른 레이아웃이 나타나도록 설정 할 수 있습니다.

중단점은 다음과 같습니다.

1
2
3
4
5
6
7
8
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Bootstrap 그리드 레이아웃

Bootstrap에서는 웹 레이아웃을 구성하는 가장 대표적인 시스템인 12 Column Gird를 사용합니다.

따라서 우리는 전체 박스를 나눌 때, 12등분을 하여 사용하게 됩니다.

아래는 간단한 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 6개씩 2등분 -->
<div class="row">
  <div class="col-6">col-6</div>
  <div class="col-6">col-6</div>
</div>
<!-- 4개씩 3등분  -->
<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>
<!-- 6, 3, 3으로 3등분 -->
<div class="row">
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
</div>

이러한 속성을 중단점과 함께 응용해서 반응형 레이아웃을 구성 할 수 있습니다.

1
2
3
4
<div class="row">
  <div class="col-lg-6">col-lg-6</div>
  <div class="col-lg-6">col-lg-6</div>
</div>

위와 같은 레이아웃은 lg 즉, 992px이상에서만 col-6을 적용하라는 의미입니다.
이렇게 col-6 사이에 반응형 중단점을 넣게 되면 조건문의 역할을 수행합니다.

따라서, 위의 코드에서는 만약 화면크기가 992px이상이면, 하나의 열에 2등분된 col-lg-6이 존재하고, 그러지 않은 모바일 환경에서는 두개의 열에 각각 하나의 col-lg-6이 존재하게 됩니다.

좋은 코드란?

KISS
Keep It Simple. Stupid!

최대한 알아보기 쉽고, 수정이 간편하며 관리가 쉬운 코드로 작성하는 것이 좋습니다.

그 후, 확장성을 생각하시면 좋습니다. 확장성이란, 내가 작성한 코드를 바탕으로 여러가지 방면에서 활용하기 쉽도록 작성하는 것 입니다.

SASS

이번에는 CSS를 좀 더 효율적으로 작성할 수 있는 전처리 언어인 SASS에 대해서 알아볼 것 입니다.
간단하게 설명하자면, CSS를 조금 더 프로그래밍 언어처럼 사용 할 수 있습니다.

개발환경 세팅

VsCode기준으로 설명을 하겠습니다. 우리가 사용하는 html에서는 오직 Css만 읽어올 수 있기에 당연히 Sass를 읽지 못합니다.
따라서, Sass를 Css로 변환해 주는 확장프로그램을 사용해 작성한 Sass를 Css로 변환해 사용 가능하게 바꾸도록 하겠습니다.

왼편에 확장프로그램을 선택하면 Live Sass Compiler라는 확장 프로그램을 검색 할 수 있습니다.
이때, 3.0.0 버젼은 이전 버젼이므로 아래에 존재하는 5.0.0 이상 버젼인 새로운 Live Sass Compiler를 설치하시면 됩니다.

이후 .scss파일을 만든 뒤, 오른쪽 아래에 있는 Watch Sass를 이용하면 손쉽게 .Css파일로 변환되는 것을 확인 할 수 있습니다.

Sass 문법 - 변수

우선 Sass의 대표적인 특징으로 변수를 사용 할 수 있습니다.
프로젝트를 진행하다보면, Main Theme Color나, Sub Theme Color, Font-Size, Padding 등 프로젝트의 디자인 형식이 존재합니다.

이러한 디자인 형식은 매번 반복해서 특정 숫자로 표시해야하거나 수정이 필요하면 전체적으로 일일이 수정해주어야 하는데, Sass에서는 변수에 저장하여 편하게 가져다 쓸 수 있습니다. 또한, 해당 변수에 사칙연산과 같은 연산도 가능합니다.

아래는 간단한 sass 변수들을 이용해 css 설정을 한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$main-color: #9747ff;
$sub-color: #faab07;
$default-font-size: 16px;
$large-padding: 20px;

p {
  color: $main-color;
  font-size: $default-font-size + 8px;
}

.container {
  background: $sub-color;
  padding: $large-padding;
  font-size: $default-font-size / 2;
}

물론 Css에서도 calc나, –, var()와 같은 코드들을 이용해 위와 같이 구현이 가능하지만, sass에서는 좀 더 간결하게 사용 가능합니다.

Sass 문법 - Nesting

일반적으로 프로그래밍을 진행할 때 아래와 같이 중첩(Nesting)을 이용하여 특정 함수 안에 있는 형태를 표시해줍니다.

1
2
3
4
5
6
for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i > 3) {
    console.log(i + "는 3보다 큽니다.");
  }
}

이를 Css에서는 >, 공백과 같은 결합자를 이용해 표시하게 됩니다.
이러한 경우에 sass에서는 아래와 같이 Nesting 문법을 이용하여 좀 더 간결하게 표시 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.header {
  width: 1200px;
  p {
    color: #fff;
  }
  .container {
    width: 100%;
  }
}

// css에서는 아래와 같다.

.header {
  width: 1200px;
}
.header p {
  color: #fff;
}
.header .container {
  width: 100%;
}

다만, Nesting을 사용할 때 2개를 초과하여 중첩되게 되면, 복잡할 수 있으므로 최대한 적게 중첩하여 사용하거나, 아래와 같은 방식이 더 나을 수도 있다.

또한, 가상 선택자와 같은 경우 아래와 같이 사용 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
button {
  :hover {
    color: blue;
  }
}
//button :hover을 의미

button {
  &:hover {
    color: blue;
  }
}
//button:hover을 의미
//&를 통해 띄어쓰기를 없애줌.

Sass 문법 - @extend

버튼을 여러개 만들어 사용하는 경우, 버튼의 크기나 글자 크기등은 같지만 특정 상황에서는 색상이 다른 경우가 있습니다. 기존 Css에서는 btn클래스와 btn-red와 같은 클래스를 2개 부여하여 여러가지 다양성을 주었지만, Sass에서는 하나의 클래스로 이를 사용 할 수 있습니다.

바로 @extend를 이용하는 건데, 이는 해당 클래스의 내용을 이어받는다는 뜻입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.btn {
  width: 100px;
  height: 20px;
  font-size: 16px;
  padding: 10px;
  background: white;
  color: black;
}
.btn-red {
  @extend .btn;
  background: red;
  color: white;
}

.btn-green {
  @extend .btn;
  background: green;
  color: white;
}

이러한 경우 btn-red는 btn btn-red 대신, btn-red 클래스 하나만 적용해도 같은 결과를 나타내게 됩니다.

만약, btn 클래스를 사용할 일이 없다면, 아래와 같이 임시 클래스 기호인 %를 이용해 css의 용량을 줄일수도 있습니다.
%인 임시클래스의 경우 css로 컴파일을 진행할 때 클래스로 컴파일을 하지 않아 css에서 나타나지 않습니다.

1
2
3
4
5
6
7
8
9
10
%btn {
  // 위와 동일
}
.btn-red {
  // 위와 동일
}

.btn-green {
  // 위와 동일
}

Sass 문법 - @mixin

@mixin은 함수와 같은 개념입니다.
좀 전에 보았던 @extends와 같이 중복된 Css를 재사용이 가능하지만, 특정 변수들을 가지고 가변적으로 제작 할 수 있습니다.

아래 코드를 보면서 설명드리겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@mixin btn-function() {
  width: 100px;
  height: 20px;
  font-size: 16px;
  padding: 10px;
  background: white;
  color: black;
}
.btn-red {
  @include btn-function();
  background: red;
  color: white;
}

.btn-green {
  @include btn-function();
  background: green;
  color: white;
}

해당 코드는 위의 @extend와 같이, btn-function을 가져와 해당 btn-red와 btn-green에 적용한 sass 입니다.
다만 @mixin과 같은 경우에는 아래와 같이 @extend보다 한가지 더 기능을 제공합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin btn-function($background-color, $font-color) {
  width: 100px;
  height: 20px;
  font-size: 16px;
  padding: 10px;
  background: $background-color;
  color: $font-color;
}
.btn-red {
  @include btn-function(red, white);
}

.btn-green {
  @include btn-function(green, white);
}

“$변수명”와 같이 작성하여 @include에서 특정 값들을 가져와 그 값을 기반으로 Css를 작성할 수 있습니다. 일반적으로 “값”들을 가져오지만 “속성” 또한 아래와 같이 가져올 수 있습니다.

1
2
3
4
5
6
7
8
9
@mixin test($attr) {
  #{ $attr }: 10px;
}

.container {
  @include test(width);
}

//container의 width:10px; Css가 적용되게 됨.

Sass 문법 - @use

import를 통해서 다른 파일을 가져와 해당 파일에서 사용하는 것과 같이 Sass에서는 @use를 이용해 특정 파일을 가져와 사용 할 수 있습니다.
이때, 특정 파일의 변수나, 함수같은 경우 “파일이름.변수”와 같이 사용해야하고, 기본 css 선택자를 이용한 css는 자동으로 적용 됩니다.

1
2
3
4
@use "파일명.scss";

파일명.$변수명;  /* 다른 파일의 변수쓰는법 */
@include 파일명.mixin이름();  /* 다른 파일의 mixin쓰는법 */

아래는 test.scss에서 파일을 불러온 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//test.scss
$main-color: #333;

@mixin font($font-size) {
  font-size: $font-size;
}

p {
  color: #fff;
}

//main.scss
@use "test.scss";

button {
  @import test.font(10px);
  background: test.$main-color;
}

아래는 위의 Scss가 컴파일 과정을 거쳐서 css에서 적용된 내용입니다.

확인하기 전에 먼저 한번 어떤식으로 적용이 될지 생각하고 확인해보시기 바랍니다.

1
2
3
4
5
6
7
8
/* 실제 css에서 적용된 내용 */
p {
  color: #fff;
}
button {
  font-size: 10px;
  background: #333;
}

이렇게 @use를 이용해 가져오는 파일의 경우 개별적으로는 사용하지 않는 경우도 존재합니다.
이럴때 파일 이름 앞에 _를 이용해 작명을 하게 될 경우 컴파일하지 않아 불필요한 css파일이 생성되는 일을 막을 수 있습니다.

예를들어, main-css.scss라는 파일을 오직 @use로만 사용한다면, _main-css.scss라고 작명할 시 자동으로 컴파일 되지 않습니다.

Grid Layout

Grid 레이아웃은 격자를 만드는 레이아웃입니다.
즉, 모눈종이를 만든다고 생각하시면 편합니다.

4개의 div를 row 2행, column 2열으로 구성해보았습니다.

1
2
3
4
5
6
7
8
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.grid-container div {
  border: 1px solid black;
}

이후 구성된 2x2 레이아웃에서 특정 박스를 늘릴 수 있습니다.
방법은 2가지가 존재하는데 첫째는 자식 요소에 속성을 주는 방법이 있고, 둘째로 부모 요소에서 정의하는 방법이 있습니다.

첫번째 방법은 자식 요소에 class를 부여하고 grid-column, grid-row속성을 적용하면 됩니다.

1
2
3
4
5
6
7
8
.grid-div1 {
  /* 1번째 세로선부터 3번째 세로선까지 */
  grid-column: 1 / 3;
}
.grid-div2 {
  /* 2번째 가로선부터 4번째 가로선까지 */
  grid-row: 2 / 4;
}

두번째 방법은 자식요소에 area 속성을 부여한뒤, 부모 요소에서 template-areas에서 자식 요소들을 배치 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
.grid-container {
  grid-template-areas:
    "div1 div1"
    "div2 ."
    "div2 .";
}
.grid-div1 {
  grid-area: div1;
}
.grid-div2 {
  grid-area: div2;
}

Position: sticky

Position sticky는 가변적인 position flex입니다.

좀 더 쉽게 설명하자면, 해당 요소가 화면에 나오면 fixed와 마찬가지로 화면에 고정시키고, 해당 요소의 부모요소가 화면에서 벗어나게 되면, 다시 원래의 position으로 넣어주게 됩니다.

이를 이용해서 특정 요소가 화면에 나왔을 때만 고정시키고 나머지 요소는 스크롤이 가능하게 처리 할 수 있습니다.

This post is licensed under CC BY 4.0 by the author.

기본 CSS속성 2

JavaScript 입문 1