프로그래밍/Frontend

[CSS] 01. CSS 핵심 (1)

Churnobyl 2023. 4. 29. 22:00
728x90
반응형

Chapter 01.  색상부터 단위, 박스까지

웹사이트를 만들면서 항상 CSS는 막히면 구글링을 통해서 해결법을 찾아왔다. 이번 기회에 한번 전체 정리를 해보려고 한다. 아주 기초적인 부분들은 빼고 핵심적인 부분만 정리해서 앞으로도 찾아볼 수 있도록 만드는 것이 목표다

 

 

CSS 파일(CSS files)

보통 CSS 파일은 HTML파일과 분리해서 사용한다. HTML파일에 <style>태그로 style을 지정해 줄 수 있지만 코드가 복잡해질 수 있기 때문에 간단한 파일이 아니라면 분리해서 사용하는 것을 추천한다

 

home
 ┣ index.html
 ┗ style.css

주로 위와 같이 style.css로 이름을 짓지만 페이지마다 다른 css를 적용하거나 할 때는 다양한 이름으로 바꾸어 줘도 상관없다.

 

<!-- index.html -->
<head>
  <!-- ... -->
  <link rel="stylesheet" href="style.css">
  <!-- ... -->
</head>

위의 코드를 적용해서 css파일을 불러올 수 있다.

 

 

 

색상 단위(Color Units)

CSS에는 색상을 나타내는 단위가 여러가지가 있다. 그 중에 네가지를 살펴보도록 하자.

 

 

 

 

색상 이름(Color Names)

색상에 영어로 이름을 붙인 것. 색상을 섬세하게 나타내기 어려워서 현업에서는 사용하지 않지만 빠르게 스타일을 적용해보고 싶거나 할 때 쓸 수 있다.

 

body {
  color: magenta;
}

 

 

 

 

색상 코드(Color Codes)

#으로 시작하는 숫자와 문자(a~f)로 된 여섯자리 코드로 색상을 나타낸다. 가장 많이 사용하는 방식이다.

빛의 삼원색(Red, Green, Blue)를 각각 두자리씩 나눠서 0부터 255까지를 16진수로 나타낸다.

 

색상 코드

 

16진수는 한자리수를 15까지 표현하기 위해 0~9 + 문자(a, b, c, d, e, f)를 사용했다고 생각하면 된다. 16진수로 255를 표현하면 ff가 된다.

 

body {
  color: #ff0000; /* 빨간색 */
}

 

 

https://htmlcolorcodes.com/

 

포토샵이 있다면 포토샵을 활용해도 되고 위와 같은 사이트로 원하는 색상을 찾아봐도 좋다.

 

 

 

 

 

RGB Colors

16진수 대신 0~255까지의 10진수로 빛의 세기를 표시한다.

 

 

body {
  color: rgb(255, 0, 0); /* 빨간색 */
}

 

 

 

 

RGBA

기존 RGB에 불투명도(Alpha)를 추가해 표현한다. 만약 불투명도가 0.5라면 뒤에 있는 것들이 비친다.

 

body {
  color: rgba(255, 0, 0, 0.5); /* 덜빨간색 */
}

 

 

 

 

크기 단위(Size Units)

HTML에는 크기를 나타내는 픽셀(px), 퍼센트(%), em, rem등의 단위가 있다.

 

 

 

절대적인 단위

 

  • 픽셀(px)

화면을 표시하는 기준이 되는 가장 작은 정사각형

모니터의 해상도(1280x720, 1920x1080 등)에 따라 화면에 표시되는 HTML문서의 크기가 달라질 수 있다.

 

 

 

 

 

 

상대적인 단위

 

  • 퍼센트(%)

부모 태그에 대한 상대적인 크기를 나타낸다.

만약 크기를 바꾸고 싶다면 부모의 크기를 바꾸면 된다.

자식 태그가 부모 태그의 크기를 유지하고 싶다면 width: 100%등의 값을 사용해주면 된다.

 

 

  • em

부모 태그의 font-size.

부모 태그의 font-size가 10px이라면 자식 태그에 1.5em을 적용해주면 15px과 같다.

 

 

  • rem

최상위 태그의 font-size.

최상위 태그의 font-size가 12px이라면 rem 단위를 적용한 모든 값들이 12px을 기준으로 크기가 정해진다.

 

html {
  font-size: 14px;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.7rem;
}

위와 같이 html 전체 요소에 절대적인 font-size를 정해주고 그에 비례해서 다른 태그들의 폰트 크기를 조정해 줄 수 있다.

폰트 크기 뿐만 아니라 여백을 줄 때도 유용한 단위이다.

 

 

텍스트 스타일링 (Text Styling)

텍스트의 스타일을 바꿔줄 수 있는 요소 모음

 

div {
  color: rgba(0, 233, 21, 0.9);
  font-size: 20px;
  font-family: fantasy, "맑은 고딕";
  font-weight: 700;
  line-height: 29px;
  text-decoration: underline;
}

 

  • color : 글자색 변경
  • font-size : 글자 크기 변경
  • font-family : 글꼴 변경. 한글이 없어서 첫번째 글꼴을 적용할 수 없다거나 하면 그다음 글꼴을 적용한다. 글꼴 자체가 띄어쓰기인 경우 보통 따옴표로 묶어서 사용한다.
  • font-weight : 글자 굵기 변경. 100-900까지 100단위로 쓴다.
  • line-height : 줄 높이. 텍스트의 줄과 줄 사이의 간격을 조절해준다.
  • text-decoration : 텍스트의 밑줄을 추가하거나 a태그의 기본으로 들어간 밑줄을 바꾸는 데 사용할 수 있다.
    • none : 밑줄 없애기
    • underline : 밑줄
    • line-through : 취소선. 가운데 줄

 

 

배경 이미지 (Background Image)

배경 넣기

 

body {
  background-image: 
    linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)),
    url('kimchi.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity : 0.6;
}

img {
  box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.4);
}
  • background-image : url()문법을 사용해 이미지를 넣을 수도 있고 linear-gradient()속성을 이용해 그라디언트를 넣을 수도 있다. 쉼표(,)를 이용해 배경을 여러개 넣을 수도 있는데, 가장 위에 놓인 순서대로 맨 앞에 깔린다.
    • url('이미지 url')
    • linear-gradient(시작 색상, 종료 색상) : 기본적으로 각도는 180deg로 위아래로 배치된다.
    • linear-gradient(각도, 시작 색상, 종료 색상) : 각도를 조정해 줄 수 있다.
  • background-position : 배경의 위치. top, right, center, right top 등의 옵션을 줄 수 있다. 기본값은 left top
  • background-repeat : 배경의 반복 여부.
    • repeat : 기본값으로 background-repeat속성을 지정해주지 않으면 기본적으로 배경은 남는 공간만큼 반복된다.
    • no-repeat: : 배경 반복되지 않음
  • background-size : 배경의 크기. 직접 가로 세로 크기 설정해 줄 수도 있고 다른 옵션들도 있다.
    • cover : 가장 많이 사용하는 속성. 비율을 유지하면서 꽉 차게. 이미지가 잘릴 수도 있다.
    • contain : 비율 유지하면서 이미지가 잘리지 않는 선에서 최대한 크게.
    • 가로 세로 : 40px 30px 등의 값을 줘서 직접 크기를 설정해 줄 수 있다.
  • opacity : 불투명도. 0~1사이의 소수값을 사용. 기본값 1
  • box-shadow : 그림자. 옵션 순서는 가로, 세로, blur(흐린 정도), spread(퍼지는 정도), 색상

 

 

박스 모델 (Box Models)

박스 모델(Box model)

모든 HTMl 요소는 박스 모양으로 구성되며 이것을 박스 모델이라고 부른다. 박스 모델은 가장 바깥부터 다른 이웃하는 요소 사이의 간격을 표현하는 마진(margin), 내용과 패딩을 감싸는 테두리(border), 내용과 테두리 사이의 간격을 표현하는 패딩(padding), 실제 텍스트나 이미지가 들어있는 내용(content)으로 이루어져 있다.

 

 

 

패딩(Padding)과 마진(Margin)

패딩과 마진을 표현하는 방법은 여러가지가 있으며, 특히 마진에 auto 값을 줘서 자동으로 좌우 정렬을 하고 싶은 경우, width속성이 정해져 있어야 이 width의 값을 기준으로 좌우 정렬할 수 있다.

 

 

  • 패딩(Padding) : 영역 안쪽에 여백을 넣을 때 사용
  • 상하좌우

 

패딩 - 상하좌우

div {
  padding: 10px;
}

 

 

 

 

  • 상하, 좌우

패딩 - 상하, 좌우

div {
  padding: 10px 6px;
}

 

 

 

 

 

  • 상, 좌우, 하

패딩 - 상, 좌우, 하

div {
  padding: 10px 6px 20px;
}

 

 

 

 

  • 상, 우, 하, 좌

패딩 - 상, 우, 하, 좌

div {
  padding: 10px 6px 20px 12px;
}

 

 

 

 

 

  • 마진(Margin) : 영역 바깥쪽 여백을 넣을 때 사용
  • 상하좌우

마진 - 상하좌우

div {
  margin: 10px;
}

 

 

  • 상하, 좌우

마진 - 상하, 좌우

div {
  margin: 20px 10px;
}

 

 

  • 상, 좌우, 하

마진 - 상, 좌우, 하

div {
  margin: 20px 10px 30px;
}

 

 

  • 상, 우, 하, 좌

마진 - 상, 우, 하, 좌

 

div {
  margin: 20px 15px 30px 10px;
}

 

 

 

 

마진 상쇄 (Margin Collapsing)

HTML에서는 서로 이웃한 태그 간의 관계에서 마진이 더 큰 값을 겹쳐서 적용한다. 이는 부모-자식 관계인 태그에도 똑같이 적용되며, 부모에 패딩(padding)이나 테두리(border)가 있으면 경계가 있는 것으로 판단해 마진을 겹치지 않는다.

 

마진 상쇄(Margin Collapsing)

위의 그림을 보면 A태그의 마진은 30px이고 B태그의 마진은 15px이다. 이 때 두 마진을 합친 값인 45px가 두 태그 사이에 적용되는 것이 아니라 두 마진 중 더 큰 값인 30px의 마진이 적용된다.

 

 

 

box-sizing

기본적으로 요소에 width나 height등의 크기를 지정하면 그 크기는 태그의 내용(content)의 크기를 의미한다. 그렇다면 바깥에 패딩이나 테두리의 크기는 더 추가적으로 적용된다는 건데, 이는 박스들을 조작할 때 직관적이지 못하다.

이때, 박스들의 테두리까지 포함한 크기로 직관적으로 조작하고 싶다면 box-sizing속성을 바꿔주면 된다.

 

* {
  box-sizing: border-box;
}

기본값은 content-box로 내용의 크기만을 width, height 크기로 주는 값이다. 테두리까지 포함해 조작하는 것이 훨씬 직관적이므로 요새는 위와 같이 *(전체)에 border-box 값을 지정해주고 사용한다.

반응형

'프로그래밍 > Frontend' 카테고리의 다른 글

[TypeScript] Type + JavaScript - (1) 기본 타입  (0) 2024.07.22
[JavaScript] 자바 스크립트 기초 - (1) 기본문법, 자료형, 변수, 함수  (0) 2023.06.05
[CSS] 03. CSS 핵심 (3)  (0) 2023.05.16
[CSS] 02. CSS 핵심 (2)  (0) 2023.05.06
[HTML] 01. Introduction  (0) 2023.02.24

'프로그래밍/Frontend'의 다른글

  • 현재글[CSS] 01. CSS 핵심 (1)

관련글

댓글

티스토리툴바