Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(1)

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

vanilla javascript Toy project 2. Movie Seat Booking

---

저번 글까지 해서 웹 페이지의 기본틀을 만들었으니 이번에는 CSS를 다뤄볼 차례이다. 이번에도 CSS부분은 포스트 1개로 끝나지 않을 것 같다. 생각보다 알아야 할 내용도 많고, 새로운 개념도 마구마구 등장한다. 게다가 모르면 당할 수 밖에 없는 의사 클래스까지. 이번에도 내가 처음 배워서 잘 모르겠거나 알아두면 좋을 것들을 일일이 설명하면서 천천히 나아갈 예정이다.

1. 기본적으로 수행해야할 스타일 적용

---

1. box-sizing: border-box
   • box-sizing 속성에는 content-box와 border-box 두가지 값이 있고, 각각은 box크기를 설정할때 content영역만 영향을 주는가, 모든 4가지 영역 전부에 영향을 주는가에 차이가 있다. border-box가 전체 영역의 크기를 맞추는데 사용하기 때문에 요소의 크기를 예측하기 훨씬 더 쉽기 때문에 요즘은 border-box를 자주 사용하는 추세이다.
2. body태그에 있는 속성들은 기본적으로 flex display를 사용한다면 적용해야 하는 것이다.
   • display설정을 flex로 하고, element들이 중앙에 위치하기 때문에 주 축을 담당하는 flex-direction을 center로, 보조 축을 담당하는 align-items을 center로 맞춘다. 그리고 body를 전체 배경으로 간주할 것이기 때문에 높이를 100vh로 적용한다.

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

반응형

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

*{
    box-sizing: border-box;
}

body{
    background-color: #242333;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Lato', sans-serif;
    margin: 0;
}

2. movie-container 클래스와 select 요소 스타일링

---

movie-container 클래스는 영화를 선택하기 위한 select태그가 있는 구역이라고 이전에 설명했다. 그래서 이 부분에서 주로 설명할 것도 select 요소에 적용하는 속성들이 된다.

1. movie container class
   • 일단 container가 포함한 구역이 위와 아래 모두 공간이 있기 때문에 상하 margin을 설정한다. 이럴때 margin과 padding속성의 축약 표현 방식을 알아두면 매우 도움이 된다.
     • 기본적으로 시계방향 순서대로 방향을 설정한다. 즉 상 우 하 좌 이런식으로 값을 지정하는 것이 기본이다.
       ex) margin: 1 2 3 4이면 상 1px, 우 2px, 하 3px, 좌 4px만큼 공백이 생긴다.
     • 3개 숫자값을 쓰는 경우도 있다. 이럴때는 상, [우=좌], 하 로 값을 지정한다.
       ex) margin: 1 2 3이면 상 1px, 우, 좌 2px, 하 3px만큼 공백이 생긴다.
     • 2개 숫자값을 쓰는 경우도 있다. 이럴때는 [상=하], [좌=우]로 값을 지정한다.
       ex) margin: 1 2이면 상, 하 1px, 우, 좌 2px만큼 공백이 생긴다.
     • 마지막으로 1개 숫자값을 쓰는 경우에는 모든 방향에 지정한 숫자만큼 공백이 생긴다.
       ex) margin: 1이면 상, 하, 좌, 우 모두 1px만큼 공백이 생긴다.
2. select tag 스타일링
   • background-color, border, border-radius, font-size
     일단 기본적으로 흰색에, 테두리가 없고 둥근 모양이니 background-color와 border, boder-radius속성을 각각 설정한다. 그리고 폰트 크기 맞추는 것도 잊지말자 font-size로 설정할 수 있다.
   • margin-left
     "select movie" 텍스트 오른쪽, select box 왼쪽에 공백이 있기 때문에 여기서는 select box 왼쪽에만 여백을 설정하고 margin-left 속성을 사용하면 된다.
   • padding
     이 select box의 content영역은 어디일까? 바로 text가 있는 부분이 content영역이다. 그런데 주어진 예시를 보면 텍스트와 박스사이에 공간이 있는 것을 알 수 있다. 이 테두리와 content사이에 있는 공간을 설정하려면? padding을 설정하면 된다. 상하, 좌우 각각 빈 공간을 만들어 놓자.
   • appearance: none
     select box를 사용할 때 기본옵션으로 지정되어 있는 옆에 화살표 부분을 없애고 싶은가? 그러면 appearance 속성을 none으로 바꿔보자. 그러면 말끔히 사라질 것이다.

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

반응형

.movie-container{
    /* 상하, 좌우*/
    margin: 20px 0; 
}

.movie-container select{
    background-color: #fff;
    border: 0;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
    padding: 5px 15px;
    appearance: none;
}

3. div태그로 seat 모양 만들기

---

div태그로는 어떤 모양이든 만들 수 있다. div태그를 나는 하안 도화지라고 생각한다. 이 div태그에 높이와 너비를 설정하고, 여러 곡선모양을 설정하면 금방 반원 모양이 생겨난다.

1. 기본 seat모양 만들기
   • height, width
     화면에서 나오는 좌석 크기만큼 적당하게 설정하면 된다.
   • margin: 3px
     이 값은 왜 있을까? 나중에 좌석 배열을 할때 보면 좌석 사이사이에 빈 공간이 있다. 좌우 여백은 나중에 따로 설정할 것이고, 상하 여백을 이 margin으로 설정한다.
   • border-top-left-radius, border-top-right-radius
     border-radius의 세분화된 속성이다. 영어의 뜻과 같이 첫번째는 좌상향 부분, 두번째는 우상향 부분의 곡선 정도를 설정한다. 이 속성을 사용하면 쉽게 좌석 모양을 만들 수 있다.
2. 나머지 색깔의 seat는?
   • 이 부분에스 class를 여러개 설정하는 것의 중요성을 깨닫게 된다.
   • 파란색으로 칠해진 선택된 seat는 클래스를 총 2개 가지고 있다. seat와 selected. 이 두 클래스를 모두 가지고 있는 div태그에만 색깔을 파란색으로 칠해야 하기 때문에 css 선택자의 클래스를 붙여서 정의한다.
   • 마찬가지로 흰색으로 칠해진 이미 차있는 좌석은 seat클래스와 occupied클래스를 가지고 있고, 이 두 클래스륾 모두 가지고 있는 div태그에만 색깔을 흰색으로 칠해야하기 때문에 css선택자의 클래스를 붙여서 정의한다.

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

반응형

.seat{
    background-color: #444451;
    height: 12px;
    width: 15px;
    margin: 3px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.seat.selected{
    background-color: #6feaf6;
}

.seat.occupied{
    background-color: #fff;
}

다음에 소개할 부분은 이 프로젝트의 핵심이 되는 container클래스이다. 이 클래스에 진짜 엄청난 내용이 담겨 있는데, 심지어 매우 중요해 보이는 것들이 있다. css를 아무것도 모른다고 쳐도 이 부분을 공부한다면 무조건 필요한 것들만 있을 것이라고 생각이 든다. 따라서 여기까지 기본 css부분을 설명하고 다음 포스트에서 본격적으로 중요한 내용을 위주로 설명을 할 예정이다.