Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(1)

falconlee236

2022. 1. 3. 23:41

여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다.

vanilla javascript Toy project 1. Form Validator

저번 글까지 해서 웹 페이지의 기본틀을 만들었으니 이번에는 CSS를 다뤄볼 차례이다. CSS는 생각보다 알아야할 내용이 많은데, 갑자기 우리보고 "디자인 해보세요"하고 던져놓으면 제일 무엇을 해야할지 막막한 분야라고 생각한다. 그래서 프로젝트를 설명하는 글을 쓸때는 내가 처음 배워서 잘 모르겠거나 알아두면 좋을 것들을 일일이 설명하면서 천천히 나아갈 예정이다.

1. body 이전에 적용하는 전처리

css는 여러 선택자 형태를 가지고 있다. 선택자란 특정 요소들을 선택하게 해주는 문법이라고 생각하면 된다. 이 선택자를 통해서 특정 요소들을 선택해서 스타일을 적용 할 수 있게 된다. 선택자는 여러 종류가 있지만 이것을 한번에 외울 필요가 없고 나올 때마다 설명할것이다.

맨 처음에 보면 @import url("") 형식으로 되어있는 구문이 있다.
- html에서 css 파일을 불러오려면 <link> 태그를 이용했지만 css에서 또다른 css파일을 불러오려면 @import 구문을 사용한다. @import url("") 에서 url()안에 있는 css파일을 불러와서 이 css에 사용한다는 뜻으로 사용한다.
그 다음에 계속 생소한 것이 등장한다. :root는 무엇일까?
- :root를 이해하려면 먼저 CSS 의사 클래스 를 알아야 한다. CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 정의한 css 구문이 적용된다. 그리고 항상 colon(:) 으로 시작한다는 것이 특징이다. 이 의사 클래스는 css 아래부분에 또 다시 등장할 내용이니 잊어버리지 말자.
- css :root 의사 클래스는 문서 트리의 root element를 선택한다. HTML의 root element는 <html> 이므로 html 선택자랑 같은 기능을 한다. 이 :root는 전역 css 변수 선언에 주로 사용된다.
- css는 다른 프로그래밍 언어와 마찬가지로 사용자 정의 변수를 정의할 수 있고, 어디서든 사용할 수 있지만 적용되는 범위는 각자 다르다. 사용자 변수를 정의할 때는 변수명 맨 앞에 -- 를 반드시 붙인다. 이때 :root는 전역 사용자 변수를 정의할 때 사용한다.
- 우리 프로젝트에 사용하는 두 전역변수 --succes-color, --error-color 는 각각 성공할 때 표시하는 박스 테두리의 색깔을, 실패할 때 표시하는 박스 테두리 색깔과 에러 메시지 색깔을 의미한다.
*{ box-sizing: border-box; } 이렇게 선언한 블록이 있다면 무슨 뜻일까? * 표시는 모든 html요소들 한테 다음 속성을 일괄적으로 적용하라는 뜻이다. 따라서 모든 html요소에 box-sizing 속성을 border-box로 정하라는 뜻일 것이다. 그렇다면 box-sizing 속성은 어떤 속성이고 무슨 속성값을 가지고 있을까?
- 이 속성을 이해하려면 CSS의 box model을 알아야 한다. 각각의 요소들을 사각형 박스로 표현하고 CSS는 이 박스의 크기, 위치, 속성을 결정하게 된다. 하나의 박스는 4 부분으로 이루어지고, 각각 content area(콘텐츠 영역), padding area(안쪽 여백 영역), border area(테두리 영역), margin area(바깥 여백 영역)이다.
  
  일단 여기서 알아야할 것은 content 영역이다. 이 영역은 element의 실제 요소가 포함되어 있는 곳이기 때문이다.
- box-sizing 속성의 기본값은 항상 content-box 이고, 지정한 너비와 높이는 content 영역의 크기만 적용되고, 나머지 padding, border, margin값이 있다면 거기에 추가해서 화면에 그린다. 즉 content-box 속성이 적용된 상태에서 너비를 100으로 한다면 content영역만 너비가 100px가 되고, 나머지 여백이 추가되기 때문에 실제 box크기는 100px보다 크게 된다. 이 속성에서 box의 크기는 width = content area width, height = content area height로 계산한다.
  하지만 border-box 로 속성값을 지정한다면 너비와 높이 속성이 padding과 border는 포함하지만 margin은 포함하지 않는다. 즉 padding과 border가 box 너비, 높이를 계산할때 같이 고려해야 하는 요소가 된다. 이 속성에서 box의 크기는 width = border + padding area + content width, height = border + padding area + content height로 계산한다. 기본적으로 border-box 속성의 요소가 더 실제 크기를 가늠하거나 조절하기에 편하기 때문에 자주 사용한다.

여기까지 따라왔다면 코드는 다음과 같다.

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

:root{
    --success-color: #2ecc71;
    --error-color: #e74c3c;
}

*{
    box-sizing: border-box;
}

2. body 태그에 적용해서 전체적인 틀 짜기

기본적으로 css에서 레이아웃을 짤때는 flex 레이아웃과 grid 레이아웃을 가장 많이 사용한다. 우리가 작업하는 프로젝트에서는 flex 레이아웃을 사용할 것이기 때문에 이 프로젝트에서 필요한 flex 레이아웃의 기초가 필요할 것이라고 생각한다.

flex 레이아웃이란?
CSS Flexible Box Layout 이라고도 불리는 flex 레이아웃 모델은 flex레이아웃이 적용된 컨테이너의 자식들을 어떤 방향으로 배치할 수 있으며 각 자식의 크기도 유연하게("flexible") 빈 공간을 채우거나 컨테이너를 넘어가지 않도록 줄여준다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작 가능하다.
- flex 레이아웃이 적용된 요소를 flex-container라고 하고, flex-container를 만들기 위해서는 display: flex 속성을 추가하기만 하면 된다. 그러면 이 container의 자식들은 모두 flex-item이 된다.
- flex 아이템을 정렬하는 방법은 총 2가지 축을 따라서 이루어지는데, 하나는 주축(main-axis)이고 다른 하나는 교차축(cross-axis)이다. 이 정렬하는 방법에는 여러가지가 있지만 우리는 모든 요소들을 가운데에 정렬하고 싶기 때문에 주축과 교차축 모두 center로 설정하면 flex-item이 정 가운데에 정렬할 것이다. 주축의 정렬 방법을 설정하는 속성은 justify-content이고, 교차축의 정렬 방법을 설정하는 속성은 aligin-items이다. 각 속성의 속성값을 모두 center로 하면 일단 가운데 정렬은 해결이다. 우리는 모두 flex 레이아웃을 사용할 것이기 때문에 계속 flex를 만나야 하니까 일단은 여기까지 알아보자.
폰트 설정하기
css에서 따로 폰트를 지정하지 않으면 자동으로 기본 글꼴로 웹 페이지가 만들어진다. 따라서 폰트 설정은 필수인데, 그냥 모든 html요소에 폰트를 적용하고 싶으면 상위 태그인 body에 적용하면 그 밑에 있는 요소들은 다 폰트가 적용될 것이다.
- font-family: 폰트를 지정하는 속성이다. 속성값으로 family-name과 generic-name을 가지고 있다.
  - family-name: 글꼴 이름이며, 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 혹은 큰 따옴표로 감싼다. 쉼표로 구분하면서 여러개 선언 할 수 있고, 먼저 선언된 순서대로 우선순위가 결정된다.
  - generic-family: 기본 글꼴 집합이며, 사용자가 해당 글꼴이 없다면 비슷한 글꼴체로 표시하기 위해서 사용. 항상 font-family 속성의 맨 마지막에 선언해야하며, 키워드이기 때문에 따옴표로 안묶는다.
    - serif: 삐침 있는 명조 계열의 글꼴
    - sans-serif: 삐침 없고 굵기가 일정한 고딕 계열의 글꼴
    - monospace: 글자 폭과 간격이 일정한 글꼴
    - cursive: 손으로 쓴 것 같은 필기 계열의 글꼴
    - fantasy: 화려한 글꼴
배경 색 칠하기
background-color 속성을 사용합시다.
높이와 너비 설정하기
css에서는 많은 단위가 있는데 일단 자주 사용하는 6가지 단위에 대해서 간략하게 알아보자.
1. em
  이 단위는 현재의 글꼴의 포인트 크기와 연동하여 문자의 너비와 높이의 비율을 정의한다. 바로 상위 태그 요소의 크기에 따른 상대적인 비율을 나타낸다.
  - body > div 순으로 만들어져 있는데, body의 font-size가 14px이고, div의 font-size가 1em이면 14px * 1 = 14px가 된다. 즉 1em은 해당 요소 바로 상위 태그의 크기를 따라간다. em단위의 문제점은 각 부모의 폰트 사이즈를 상속받아서 영향을 계속 받는 다는 점이다.
2. rem (root em)
  em 단위에서 보여준 부모의 폰트 사이즈를 계속 중첩해서 상속한다는 문제점을 고치기 위해서 등장한 태그이다. 최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html이므로 html의 사이즈를 따라간다. 그 밖에 모든 작동방식은 em 단위와 같다.
3. vh & vw (vertical height & vertical width)
  해당하는 원소의 너비값과 높이값을 뷰 포트 의 너비값과 높이값에 맞게 사용할 수 있는 단위. vh 단위는 뷰 포트 높이값의 100분의 1 단위이고, vw단위는 너비값의 100분의 1 단위이다. 예를 들어서 브라우저 높이값이 500px이라면 1vh는 5px이다. 마찬가지로 뷰 포트의 너비값이 350px이면 1vw는 3.5px가 된다.
  만약 뷰 포트의 최대 높이값을 크기로 같는 박스를 만들고 싶다면 height: 100vh 라고 입력하면 된다.
4. vmin & vmax
  vmin은 뷰 포트의 높이, 너비중 최소값을, vmax는 뷰 포트의 높이, 너비중 최대값을 담고 있는 값이다. 즉 vmin = min(height, width)이고 vmax = max(height, width)이다.
  예를 들어 브라우저의 크기가 너비가 1100px, 높이가 300px이면 vmin = 3px이고, vmax = 11px가 된다. vh와 vw와 마찬가지로 100분의 1단위인 점은 동일하다.

여기까지 따라왔으면 root 가상 선택자와 전체 선택자, 그리고 body 선택자에 대한 css코드가 완성되어 있을 것이다. 코드는 다음과 같다.

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

:root{
    --success-color: #2ecc71;
    --error-color: #e74c3c;
}

*{
    box-sizing: border-box;
    /*border-box = padding, border, content를 모두 합쳐서 width와 height를 결정*/
    /*content-box = 오직 content영역에만 width, height 영향*/
}

body{
    background-color: #f9fafb;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

여기서 색깔은 어떻게 주어진 웹사이트와 똑같이 하는지 궁금한 사람이 있을텐데, web browser color picker라는 프로그램이나 확장 프로그램 을 사용하면 비슷한 색깔을 추출할 수 있다.

저작자표시 비영리 변경금지

'VanillaJS' 카테고리의 다른 글

Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(1) (0)	2022.02.13
Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking (html편) (0)	2022.02.10
Vanilla JS Toy 프로젝트 - 1. Form Validator (javascript편) (0)	2022.01.09
Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(2) (0)	2022.01.07
Vanilla JS Toy 프로젝트 - 1. Form Validator (html편) (0)	2021.12.28

To the Expert

Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(1)

vanilla javascript Toy project 1. Form Validator

1. body 이전에 적용하는 전처리

2. body 태그에 적용해서 전체적인 틀 짜기

'VanillaJS' 카테고리의 다른 글

티스토리툴바

vanilla javascript Toy project 1. Form Validator

1. body 이전에 적용하는 전처리

2. body 태그에 적용해서 전체적인 틀 짜기

'VanillaJS' 카테고리의 다른 글

VanillaJS 카테고리와 연관된 콘텐츠

티스토리툴바