[개발자의품격][부트캠프][1기][2~4차시] HTML부터 CSS까지 - CSS 주요 포인트

3차시 중반부터 4차시까지 CSS(Cascading Style Sheets)를 다루었다. 멘토님께서는 프론트엔트 개발자의 경우 CSS 학습의 1차 목표를 코드를 처음부터 직접 짜는 수준보다는 보고 이해하는 수준으로 맞추라고 하셨다. 실무에서는 웹퍼블리셔가 기본 작업을 해서 넘겨주기 때문이고, bootstrap의 도움을 받으면 되기 때문이다.

 

다른 주제이지만 수업 중 DB 테이블 설계 사례를 보여 주셨다. 예전에 근무했던 회사의 MES가 마리아 DB로 설계되어 있었는데 복잡한 테이블 들을 볼 수 있었다. 압도적인 복잡함이 아직도 인상적이다. 설계 방법이 궁금했는데, 이번 부트캠프 과정에서 다룬다고 하니 무척 기대된다. 멘토님은 테이블 설계에 있어서 도메인에 대한 지식이 매우 중요함을 강조하셨다.

 

---

 

CSS 주요 포인트

선택자(selector)를 쓰는 방법은 반드시 완전히 숙지해야 함을 강조하셨다. 선택자의 종류에는 별표(*)로 표기하는 전체 선택자(Universal Selector), 태그명으로 표기하는 태그 선택자(Type Selector), 점(.)과 클래스 속성으로 표기하는 클래스 선택자(Class Selector), 샵(#)과 ID 속성으로 표기하는 ID 선택자(ID Selector), 태그 안의 특정 속성들에 따라 스타일을 지정하는 속성 선택자(Attribute Selectors), 가상 클래스 선택자(Pseudo-Classes) 등이 있다.

 

CSS적용에서 가장 우선순위는 인라인이다. 인라인에 스타일을 지정하는 방식은 우선순위에 대한 고민이 필요하지 않기 때문에 개발자들이 습관적으로 자주 쓰게 되는 경향이 많다고 한다. 선택자의 우선순위는 "아이디 선택자 > 클래스 선택자 > 태그 선택자" 순이며, 클래스 선택자의 경우 동일한 선택자가 여러 개 존재하면 처리 시 합쳐지고, 이때 동일한 속성이 존재하면 아래쪽 줄의 값이 위쪽 줄의 값을 덮어쓴다고 한다(아래쪽 줄에 작성된 값이 우선). 

 

Vue와 React에 대한 멘토님의 생각을 들을 수 있었다. Vue의 경우는 HTML, CSS, JavaScript 영역이 완전히 구분되어 있어 개발의 편의성이 높고 효율적이라고 한다. 반면 React는 Vue에 비해 복잡하다. 하지만 CSS를 능숙하게 다룬다면 최상의 포퍼먼스를 낼 수 있다고 한다.

 

bootstrap과 달리 tailwind에 대한 생각도 들려 주셨다. bootstrap과 tailwind는 유틸리티 방식인데 후자의 경우 디자인 속성을 잘게 쪼개 놓았다. 코드의 중복을 피할 수 있지만 쪼개져 있는 만큼 복잡해진다. bootstrap은 트위터에서 만들었고, 삼성, 현대와 같은 큰 기업에서도 적극적으로 활용하고 있다고 한다.

 

자바스크립트 학습하면서 배우게 되겠지만 CSS와 관련하여 document.querySelector("CSS선택자") 함수가 매우 중요하다고 한다. 

 

색상 스타일의 경우 실무에서는 "white, black"의 경우만 색상명으로 지정한다고 한다. 그 외에는 RGB, HEX(16진수 표기법) 방식을 사용한다. HSL(hue 색조, saturation 채도, lightness 밝기) 방식도 존재하지만 실무에서는 거의 사용하지 않는다고 한다.

 

border-width 속성은 light와 같은 방식으로도 값을 줄 수 있지만 실무에서는 주로 "border-width: 3px"과 같이 px을 사용한단다. border 스타일을 적용에서 속성 값을 스페이스 한 칸 주고 4개로 부여할 수 있는데, 사면에 각각 다른 값이 적용되는 것이 재미있었다. 어떤 규칙에 의해 적용되는 것일까 궁금했는데, 뭐든지 "CSS는 시계방향"으로 적용 된다는 개념을 알려 주셨다. 속성 값 2개만 주어 졌다면 2개를 반복하여 적용한다(속성 값이 a b라면 a b a b와 동일함).

 

border-radius는 모서리 둥글게 처리하는데, "button {border-radius: 100px; width: 200px; height: 200px;}"라고 하니 동그라미 버튼으로 보여지는 것이 재미있었다.

 

margin과 padding은 개념을 잘 이해해야 하는 부분이었다. border가 기준이 된다. border를 기준으로 바깥쪽은 마진(보더를 둘러쌈), 안쪽은 패딩(콘텐츠를 둘러싸고 있음)이다. 두 개의 박스가 있고 각각 margin이 50px로 주어졌다면 두 박스는 100px의 간격으로 떨어져 있어야 하는데 50px 만큼 떨어져 있어 보였다. 크롬 브라우저 자체적으로 그렇게 처리기 때문이다. 두 개의 버튼의 경우도 아무런 값도 주지 않았는데 떨어져 있는 것은 브라우저마다의 기본값에 의해 그렇게 처리되는 것이다. 브라우저에 따라 달리 보여질 수 있음을 유념해야 한다.

 

텍스트 스타일에서 text-align을 먼저 다루었다. 유능한 퍼블리셔는 폰트 사이즈를 지정할 때 px 단위 뿐 아니라 em 단위를 잘 활용한다고 한다. 크롬 브라우저에서 폰트 사이즈가 em이면 기본 폰트 사이즈 16px이다. 따라서 2em이면 36px이다.

 

<input type="text" name="" id="" style="text-transform: uppercase" />

위 코드는 입력창에서 사용자가 입력하는 텍스트가 대문자로 보이게 하는 코드이다. 유의해야 할 점은 대문자로 보인다고 해서 대문자 값이 아니라는 것이다. 따라서 서버에서 대소문자를 구분하여 조회를 한다면 검색되지 않는 문제가 발생할 수 있다. 사용자 입력 값이 소문자라면(눈으로 볼 때는 대문자) 실제 값은 소문자로 날아가기 때문이다. 멘토님이 주니어 개발자 일 때 이 기능으로 인해 애먹었던 에피소드를 함께 들을 수 있었다. 그렇다면 왜 이런 기능을 이용하는 것일까? 수업 중에 나온 질문이다. "사용자에게 제품 코드가 대문자라는 것을 각인시키기 위한 의도가 있을 경우, 신용카드 정보 등을 입력할 때 대문자 영문 이름을 써야 하는 경우"가 언급되었다.

 

권한에 따라 버튼이 보이거나 보이게 않게 하는 방법이 있다. 실무에서는 JavaScript 함수를 통해 구현한단다. "visibility: hidden", "display: none" 값이 있는데 전자는 화면에서 보이지 않으나 공간은 가지고 있고, 후자는 보이지 않고 공간도 없다.

 

<div> 태그 안에서 position 스타일 속성 값(relative, absolute)과 JavaScript를 이용해서 모달창(?)을 만들어서  X를 누르면 사라지게 하는 기능을 만들 수 있었다. 실무에서 많이 사용하는 기능이라고 하는데 개인적으로 흥미로웠다. position속성 값 sticky도 재미있었다. 스크롤 시 화면에서 사라지지 않도록 할 때 유용하다.

 

끝으로 미디어 쿼리를 이용해 반응형 화면을 구현해 보았다. 미디어 쿼리는 Spring 프레임워크 독학할 때 보았던 어노테이션이 붙어있다(@media). 매우 간단하게 반응형 화면을 구현할 수 있었다.

 

실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/css

 

---

 

부트캠프 5차시, 자바스크립트로 들어가기 전에 CSS를 이용한 웹 페이지를 직접 만들어 보는 실습을 하였다. CSS의 경우 디자인 감각을 많이 요한다. 개발자의 디자인 감각은 일반적인 경우가 흔하기 때문에 도움을 받을 만한 사이트를 소개받았다.

https://2colors.colorion.co/

Two Color Combinations

 

https://csslayout.io/

A collection of popular layouts and patterns made with CSS

 

https://github.com/1milligram/csslayout

GitHub - 1milligram/csslayout: A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continue