Section1 Unit3 CSS 기초

---

Section1 Unit3 [CSS] 기초

 

📌 Chapter1. CSS 기초

• CSS와 UI, UX

 사용자 인터페이스 (UI; user interface)

     → interface : 컴퓨터와 교류하기 위한 연결고리.

 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해 CLI를 사용했다. 키보드로 작성한 비밀 암호 같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었다. 하지만 지금은 키보드 인터페이스로 입력을 할 수 있고, 버튼 모양의 인터페이스로 입력한 내용을 전송할 수 있다. 이렇게 일반 사용자가 쉽게 사용할 수 있는 인터페이스를 사용자 인터페이스, UI라고 부른다.

 UI는 사용자가 애플리케이션을 사용하게 하는데 매우 중요한 역할을 하고, UI가 없으면 애플리케이션과 소통이 어려울 수 있다. 직관적으로 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다.

 

 ⭐️ 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나온다.

 

• id와 class는 전날 HTML에서도 다뤘는데, CSS와 관련해서 한번 더 다루었다. 

id	class
# 으로 선택	. 으로 선택
고유(unique)한 이름을 붙일 때 (한 문서에 단 하나의 요소에만 적용)	반복되는 영역을 유형별로 분류할 때 (동일한 값을 갖는 요소가 많을 수 있음)
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

 

• 색상(color, background-color, border-color), 글꼴(font-familiy), 크기(font-size), 정렬 등의 기본 스타일링에 대해서도 배웠다. 

 

• CSS UNITS (절대 단위와 상대 단위)

 CSS에는 px, % 등의 단위들이 있는데 자주 사용하는 단위를 따로 정리해보았다.

 예전에 em과 rem의 사용이 헷갈렸던 적이 있었는데, 자료를 찾아보고 글을 정리하면서 이번에 다시 한 번 명확하게 알게 되어서 의미가 있는 시간이었다 😊

CSS UNITS (절대 단위와 상대 단위)

---

그리고 이번에 새롭게 알았는데, 이와 같은 UI를 holy grail (성배) UI 라고 부른다고 한다!

 

📌 Chapter2. 박스모델

• Block 요소와 Inline 요소

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다.

	block	inline-block	inline
설명	언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.	inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가진다.	해당 HTML 요소의 내용만큼만 자리를 차지한다.
줄 바꿈 여부	O	X	X
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	O	O	X
대표적인 요소	p, div, h, ul, ol, form		span, a, img

 

•contentspaddingbordermargin으로 구성된 box모델에 관해서도 학습했다.

개발자도구에서 각 요소에 적용된 박스의 크기를 쉽게 확인할 수 있다.

 

📌 Chapter3. CSS Selector

• 기본적인 셀렉터에 관한 내용들도 학습했는데, 관련 자료를 읽는 중에 내가 이전에는 따로 기록해두지 않았던 '정합성 확인 셀렉터'가 있었다. (약간 헷갈리는 부분을 ChatGPT에게 물어봤는데, 정말 잘 알려준다... 팩트체크만 잘 해서 사용하면 공부하는데 너무나도 유용한 도구가 될 듯!)

 

 정합성 확인 셀렉터에는 :valid, :invalid가 있으며, 이는 폼 요소가 유효한지 또는 유효하지 않은지를 확인하는데 사용한다. (폼 요소에만 적용 가능하며, input, textarea, select 등과 같은 요소에서 사용 가능하다.)

input[type="text"]:valid { } 
input[type="text"]:invalid { }

 :valid <input> 요소에 유효한 데이터가 입력되면 적용된다. 이를 사용하여, 유효한 데이터가 입력된 입력란을 시각적으로 강조하거나, 제출 버튼을 활성화하는 등의 작업을 수행할 수 있다.

 :invalid <input> 요소가 필수적이고 비어 있으면 적용된다. 이를 활용하여, 사용자에게 해당 입력란이 비어 있는것을 알려주거나 폼 제출을 방지할 수 있다.

 

 '정합성 확인'이라는 말이 조금 어렵게 느껴져서 용어 자체는 와닿지 않지만 valid, invalid 셀렉터를 어떻게 사용해야 할지는 알 것 같다.

 

---

🌙  오늘의 회고

 오늘도 어제와 비슷하게 CSS 과정을 무난하게 진행했다. HTML, CSS 부분은 이번주로 끝이 나는 것 같은데 진도가 굉장히 빨라서 나중에 JS와 Recat를 할 때가 걱정이 되기는 했다.

 오늘 강의를 보며 다시 생각한 부분이 있다. 이전에는 프론트엔드 개발자가 CSS를 잘 다루는 것을 UI, UX와 함께 생각하지는 않았던 점이다. UIUX를 고려하는 건 기획자와 디자이너의 영역이라고 생각했기 때문이다. 물론 그 기능을 구현하는 것은 개발자의 영역이라고 할지라도 말이다. 하지만 생각해보니 적절한 HTML 태그로 의미있는 마크업을 하고, CSS로 명확한 스타일링을 하는 것은 개발자의 영역일테니, UIUX와 연관이 없다고 말할 수는 없을 것 같다는 생각이 들었다. (웹 접근성을 생각해도 UIUX는 화면을 구현하는 프론트 개발자에게도 중요한 요소인듯 하다.)

 HTML과 CSS를 강의를 보며 블로그 글을 쓰다가 생각한 건데, 이번에 부트캠프를 진행하며 블로그에 기록을 열심히 해봐야겠다고 다시 한번 다짐했다. 나 혼자 보기 위해 노션에 기록한 글과 공유를 위해 블로그에 정리한 글의 차이가 느껴진다랄까. 블로그에 정리를 하다보면 조금 더 정확한 정보를 원하게 되고, 스스로도 머릿속에서 다시 한 번 정리도 할 수 있게 되는 것 같다. 그 기록을 취업 준비를 할 때 포트폴리오로도 사용하기에도 너무 좋을 것 같다는 생각이 들었다. 하지만 너무 완벽함을 추구하지는 말자. 완벽하지 않으면 글을 발행시키지 못하는 건 너무 많은 시간이 소요된다. 공부만 하기에도 부족한 시간이니.