CSS | CSS 기초

SURI·2021년 11월 15일

1. CSS 기초

CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 어떻게 표현되는지 결정한다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 한다. 같은 HTML 구조를 가지고 있는 문서도, CSS 파일에 따라 전혀 다른 웹사이트로 보이게 할 수 있다.

1.1 Achievement Goals

  • CSS의 사용목적을 이해한다.
  • 프론트엔드 개발자의 기초소양에 대해 이해한다.
  • CSS의 기본 문법과 구조를 이해한다.
  • CSS를 HTML에 적용하는 방법을 이해한다.
    • 직접 HTML 안에 CSS를 정의하는 것을 왜 권장하지 않을까?
  • id 및 class와 관련된 selector 규칙을 이해한다.
  • CSS를 이용해 텍스트를 꾸민다.
  • CSS에서 쓰이는 단위의 두가지 구분을 이해한다.
    • 각 단위가 적합한 경우를 구분한다.
  • CSS 박스 모델을 이해한다.
    • box model
      • width, height
      • margin, padding, border
  • 박스 크기를 측정하는 두가지 기준의 차이를 이해한다.
  • MDN 또는 w3school 등의 레퍼런스 사이트에서 CSS 속성을 검색/이용한다.

1.2 CSS 소개

CSS는 스타일링을 위한 도구다.

같은 구조와 로직을 가진 두 웹 어플리케이션이 있다면, CSS로 스타일링한 웹 어플리케이션이 더 좋다고 할 수 있다. 기왕이면 다홍치마다. CSS가 심미적인 이유만으로 사용되는 건 아니다. 레이아웃 디자인이나 최소한의 타이포그래피로 더 나은 UX를 제공할 수도 있다. 다른 CSS 파일을 적용해 활자 매체로 출판을 하거나, 색약이나 장애인이 웹 페이지를 이용할 때도 도움을 줄 수 있다고 하니 멋지다!

CSS에 대한 오해

디자이너의 영역?

서버 개발자가 된다고 해도 CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본 소양이다. 콘텐츠의 적절한 위치와 배치를 조절하는 레이아웃 디자인은 디자이너가 아니어도 할 수 있어야 한다.

UI

  • 사람과 프로그램이 소통할 수 있도록 만들어진 요소다. e.g. 숫자, 통화 버튼
  • 일반 사용자를 위한 어플리케이션은 UI가 필요하다.
  • 훌륭한 내부 기능을 갖고 있더라도, UI가 있어야 사용자가 사용할 수 있다.

UX

  • 기능이 많아지면 UI가 늘어날 수 밖에 없다. UX를 고려하지 않고 기능에만 충실한 앱을 상상해보자. 사용하기 싫어질 것이다.
  • 복잡한 내용을 단순하게 하고, 페이지를 나누어 사용자가 한 눈에 볼 수 있는 내용을 제한해서 집중을 높일 수 있다. 이것이 UX를 고려한 리디자인이다.
  • 포토샵과 같은 전문적인 이미지 툴이 없어도, 무료 아이콘을 이용하고 CSS로 버튼의 모양을 충분히 리디자인할 수 있다.
  • 웹페이지의 디자인은 디자이너들이 연구한 결과물이기도 하지만, 그걸 코드로 모방하는 건 어렵지 않다.

사용자가 웹 서비스를 사용할 때, 브라우저에 보이는 앞단을 프론트엔드라고 한다. 프론트엔드 개발자는 레이아웃 디자인과 타이포그래피 정도는 다룰 수 있어야 한다. 거기에 더해 정렬이나 배색에 대한 감각, 좋은 UX를 가진 웹이나 앱을 분석해본 경험(UX에 대한 고민)이 있다면 좋다.

CSS는 어렵다?

CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나다. CSS를 적용할 HTML 요소를 선택하고 속성과 값을 정의하면 거의 완성이다. 하지만 프로젝트 규모가 조금이라도 커져도 일이 복잡해진다. 이런 복잡함을 다루기 위해 다양한 모범 사례가 만들어졌지만, 합의되진 않았다. 이들은 서로 상충하기도 한다.

1.3 CSS 따라하기

시맨틱 태그는 태그가 감싸고 있는 영역이 어떤 역할을 담당하는지 쉽게 파악할 수 있도록 해준다.

CSS 기본 문법 구성

  • 셀렉터(Selector) : 태그이름이나 id, 또는 클래스를 선택
  • 속성 : 요소에 적용할 수 있는 내용
    • 속성명(Property)
    • 속성값(Value)
  • 선언구분자 ; : 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분

셀렉터

웹페이지를 스타일링하는 CSS를 적용하기 위해서는 선택자(Selector)가 필요하다. HTML 문서에서 어떤 태그에 내가 원하는 스타일을 적용할지 선택해야 하기 때문이다.

선택자의 종류

CSS 선택자는 크게 3개로 나뉜다.

  • 태그이름
  • id
    • id는 문서 내에 단 하나의 요소에만 적용된 고유한 이름이다.
    • #를 이용해 선택한다.
  • class
    • class를 사용하면 같은 속성을 여러 요소에 적용할 수 있다.
    • 하나의 요소에 여러 class를 사용할 수도 있다.
      • 공백을 통해 class의 이름을 분리한다.
    • .를 이용해 선택한다.

CSS 파일 추가

CSS 스타일을 적용할 수 있는 방법은 3가지가 있다. 하지만 관심사 분리 측면에서 웹페이지의 구조를 담당하는 HTML 파일과 스타일링을 담당하는 CSS파일을 나누는 외부 스타일 시트 방법을 이용하기를 권장한다.

  • 인라인 스타일 : 같은 줄에서 스타일을 적용
  • 내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style 태그 내에 작성
  • 외부 스타일 시트 : <link rel="stylesheet" href="index.css" />

1.4 텍스트 스타일링

색상

.red {
  color: #ff0000; /*HEX 혹은 주요 색상의 이름을 사용*/
}

.box {
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */

}
  • background-color와 background는 무엇이 다를까?
    • backgrouund는 여러 옵션을 띄어쓰기로 구분해서 함께 쓸 수 있다.
    • background-color는 색상 옵션만 특정해서 쓴 것이다. 
background: #color url("image url") no-repeat;
background-color: #color;

font-weight text-decoration letter-spacing line-height

글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
  • 글꼴의 이름에 따옴표를 붙여서 적용한다.
  • 사용하려는 글꼴이 존재하지 않거나, 지원하지 않는 경우를 위해 대비책으로 fallback 글꼴을 추가할 수 있다. 쉼표로 구분하여 입력한다.
  • 웹 폰트 기술 : 웹에서 폰트를 다운 받아 표현하고 싶은 글꼴을 적용할 수 있도록 한다. e.g. Google Fonts

크기

글꼴의 크기를 지정할 때 단위가 중요하다. 글꼴의 단위는 절대단위, 상대단위 두 가지로 구분할 수 있다.

  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등
title {
  font-size: 15px;
}

  1. 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px을 사용한다.

    • 글꼴의 크기를 고정하는 단위라 사용자 접근성이 불리하다.
    • 모바일 기기와 같은 작은 화면이나 고해상도에는 적합하지 않다.
    • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

  2. 일반적인 경우 상대 단위인 rem을 추천한다.

    • root의 글자 크기 비율에 따라 조정한다.
    • 사용자가 설정한 기본 글꼴 크기를 따르므로 사용자 접근성에 유리하다.
    • em은 부모 요소에 따라 상대적으로 크기가 변경되어 계산이 어렵다.

  3. 화면 너비나 높이에 따른 상대적인 크기가 중요하면 vw, vh를 사용한다.

    • vw : viewport(웹사이트의 보여지는 영역) width / vh : viewport height
    • 100vw, 100vh을 사용해 화면을 가득 채우며 떨어지는 스크롤되는 사이트

  4. 반응형 웹에서 기준점을 만들 때, 디바이스 크기를 나누는 기준을 px로 정한다.

    • 반응형 웹은 디바이스의 너비에 따라 레이아웃이 유동적으로 적용되는 웹사이트를 말한다.
    • 디바이스 크기별로 CSS를 다르게 적용한다.

정렬

text-align : 가로정렬 - left, right, center, justify(양쪽정렬)
vertical-align : 세로정렬(복잡하다) 부모 요소의 display 속성이 table-cell이어야 한다.

1.5 박스 모델

모든 콘텐츠는 각자의 영역을 가지고, 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.

줄바꿈이 되는 박스와 옆으로 붙는 박스

  • block : 줄바꿈이 되고, 기본적으로 100% 너비를 갖고 크기지정을 할 수 있는 박스
  • inline : 줄바꿈이 일어나지 않고, 글자가 차지하는 만큼 기본 너비를 갖고, 크기지정을 할 수 없는 박스
    • span 태그는 줄바꿈이 일어나지 않고, css 속성에서 너비와 높이를 지정해줘도 적용되지 않았다.
  • inline-block : 줄바꿈이 일어나지 않으면서 글자가 차지하는 만큼 기본 너비를 갖고, 크기 지정을 할 수 있는 박스

박스 구성 요소

테두리 border를 기준으로 안쪽 여백인 padding과 바깥쪽 여백인 margin이 있다.

p {
  border: 1px solid red;
}

p {
  margin: 10px 20px 30px 40px; /*시계방향으로 적용된다.*/
}
/* 값이 두 개면 상하/좌우이고 값이 한 개면 사방으로 적용된다. 방향을 특정해 속성을 나누는 것도 가능하다. */
/* 음수값이 적용되는 부분도 재밌다. */

p {
  height: 40px; /* 콘텐츠 크기보다 작게 박스 크기를 설정 */
  overflow: auto; 
  /* overflow 속성을 적용해 콘텐츠가 박스 밖으로 나오지 않도록 함 hidden, overflow-x, overflow-y 방향도 지정할 수 있다. */
}

박스 크기 측정 기준

여백을 고려하지 않고 콘텐츠 영역을 고려해서 박스 크기를 지정하면 처음에 고려했던 레이아웃에서 벗어날 수 있다. 따라서 여백과 테두리 두께를 포함한 박스 계산법을 권장한다.

* {
  box-sizing: border-box;
}

/*content-box는 콘텐츠 영역을 기준으로 박스 크기를 계산하는 기본값이다.*/

1.6 기타

css 공부할 때 추천하고 싶은 사이트 :

2. blogging

블로깅이 무엇일까? 텍스트 중심으로 기록을 남기는 행위다. 개발자로의 성장과정을 보여줄 수 있다.

2.1 왜 블로깅을 해야하나?

  • 인간은 망각의 동물이기 때문이다.
  • 문제를 해결하는 사람임을 증명하기 위해서다.
    • 채용 담당자는 우리가 어떤 문제를 마주했고, 그 문제를 어떻게 해결해 나갔는지를 매우 중요하게 생각하고 궁금해한다.
  • 아는 것 같았지만 사실 모르고 있다. 아는 것을 글로 쓰거나 말로 설명하려고 하면 막힐 때가 많다.

2.2 어떻게 할까?

  1. TIL e.g. 개발자는 좋은 질문을 해야 합니다. (배운 것 중에 어떤 주제를 골라서 정리하는 방법도 좋을 거 같다)
  2. 기술 블로깅 (특정 주제를 가지고.. 어렵지 않아도 간단하더라도)
  3. Error Handling Log (내가 마주한 사소한 문제라도 에러를 어떻게 핸들링했는지 기록하는 것. 해결하지 못해도 과정의 기록도 괜찮다.)
  4. 회고 (한 주 단위, 혹은 한 달 단위로 무엇이 좋았나? 무엇이 문제였나? 좋았던 것은 어떻게 더 발전시킬 것인가? 문제는 어떻게 해결해 나갈 것인가?)
  • 블로깅을 하되 하루에 들일 시간을 판단해서 정해둘 필요는 있다. 주객전도가 되면 안 된다.
  • 스프린트에서 궁금한 지점이 있다면, 그 부분에 대해서 올리면 좋을 것 같다. 로직? 내용을 변경해서 올린다.
profile
SURI
Every step to become a better version of me 🚶‍♂️ 블로그 이사중
이전 포스트

HTML | HTML 기초

다음 포스트

Git | Git과 Github (1)

0개의 댓글