블로깅챌린지]Unit.4 HTML / CSS 활용 복습 및 페어프로그램

SEB_FE_45

Section1. Unit.4. HTML/CSS 활용 복습 및 페어프로그램

---

1. HTML/CSS 전반 복습

구조를 만드는 마크업언어인 HTML과 스타일언어인 CSS

HTML은 태그들의 묶음이며, CSS는 HTML 요소를 선택자로 불러와 디자인 요소를 입힌다.

<style> 태그를 활용하여 HTML 내에서도 CSS 적용이 가능하지만, 권고하지 않는다.

그 이유는 각 언어별 역할이 있기 때문이며, 에러나 수정이 필요한 경우 빠른 피드백을 위해 별도 파일로 관리 및 업데이트 하는 것이 용이하다.

HTML 태그 작성시 시멘틱 요소 사용이 권고되고 있다.

HTML 또한 언어이기 때문에 데이터를 가장 잘 표현할 수 있는 요소를 선택하기 위한 고민이 필요하다.

이를 통해 개발자와 개발자, 개발자와 컴퓨터가 더 원활한 소통이 가능하다.

---

CSS Selector는 HTML 요소를 불러오기 위한 선택자이다.

해당 요소를 바로 불러와도 가능하지만, HTML 구조가 복잡해짐에 따라 다양한 선택자들이 필요하다.

/* 전체선택자 */
* { }

/* 태그선택자 */
h1 { }
div { }
section, h1 { }

/* id선택자 */
#only { }

/* class 선택자 */
.widget { }
.center { }

/* attribute 선택자 */
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

 

/* 자식 선택자*/
header > div { }

/* 후손 선택자 */
header div {}

/* 형제 선택자 */
section ~ p { }

/* 인접형제 선택자 */
section + p { }

이외에도 가상클래스 선택자, UI 요소 상태 선택자, 구조 가상 클래스 선택자, 부정선택자, 정합성 확인 선택자 등이 있다.

---

2. Flex box 복습 회고

지난 금요일 Flex box와 관련하여 이해가 안되는 부분이 있었다. 이에 페어님과 함께 계산이 목업을 금요일에 완성한 후, Flex에 대해 더 공부해보기로 하였다.

어떻게 할지 고민하다가 페어님께서 본인이 공부할 때 사용한 방법을 알려주셨다. 아무 홈페이지나 들어가서 레이아웃을 어떻게 설정했는지 모방을 해보는 것이었다.

이에 이전 직장 홈페이지에 접속해 해당 홈페이지를 어떻게 구현할지 고민해보았다.

<header> <main> <footer> 세 부분으로 나눈 후, 큰 덩어리들 부터 레이아웃을 잡아가기 시작했다.

flex 기능 중 가장 헷갈렸던 축!의 방향에 따른 정렬이 혼란스러웠다.

direction이 row로 되어 있을 때는 크게 어려움이 없었으나, colomn으로 변하는 순간 아직은 머릿속에서 그려지지 않아 노트에 적용되는 방향을 그려보기도 하며, 이해하는 시간이 되었다.

 

그 과정에서 페어님이 flex 적용시 주의할 점, HTML 문서 작성 시 조금 더 깔끔하게 정리할 수 있는 방법 등을 알려주었다.

페어프로그램을 통해 심도있게 실습을 진행해볼 수 있어서 좋았다. 다만, 페어님과 실력차이가 많이 나다보니 내가 도움이 되지 않는 것 같아 죄송한 마음이 들었다.

 

부트캠프 2주차 월요일! 알차게 복습하고 알차게 실습한 하루였다!

수업 이후, 30분간 요가와 15분간 실내 사이클, 1시간 30분간 아내와 걷기까지!

부트캠프가 끝나고 취업을 준비하는 시점에는 몸무게를 10kg 감량하여 건강과 지식 모두 챙길 수 있도록 노력해보자!