[CSS] 자기소개 페이지 만들기

오늘 수업에서는 CSS를 활용하는 법에 대해서 배웠다.

이미 배운 내용이라고 생각했는데 자세히 살펴 보니 비어 있던 부분들이 있어

열심히 메모하고 암기하며 실습에서 적용해 보려 했다.

 

반응형 웹에 적합한 CSS 활용

font-size

px은 절대 단위라서 다양한 사용자 환경에서 접근성이 떨어질 수 있다.

일반적인 경우 font-size는 rem 단위로 설정하자.

 

※ rem과 em의 차이

rem은 최상위 요소(html)의 font-size를 기준으로 한 값이고

em은 현재 사용되고 있는 요소의 font-size를 기준으로 한 값이다.

 

 

width, height

viewport 대비 상대적 크기가 중요한 경우에는 vw, vh를 활용하면 좋다.

 

margin, padding 초기화하기

*{margin=0; padding=0}으로 여백을 삭제해 준다.

더불어 *{box-sizing: border-box로 설정해 두면 padding과 margin을 포함한 값을 기준으로

width와 height를 설정할 수 있어 편리하다.

 

CSS 선택자

CSS3 Selector | PoiemaWeb

 

attribute selector들이 좀 헷갈려서 검색을 하다가 좋은 레퍼런스를 찾게 됐다.

선택자에 관한 설명도 좋지만 사실상 프론트엔드에 관한 거의 모든 것(리액트 빼고)을 정리해 둔 사이트다.

종종 들러서 헷갈리는 것이 있을 때 들여다 보기 좋을 것 같다.

 

---

자기소개 페이지 만들기

 

 

오늘 내가 만든 자기 소개 페이지.

어제 만든 것을 CSS로 꾸미는 작업을 했다.

 

색깔 사용이나 폰트 사용 등 디자인적 요소를 구상하기가 상당히 힘들었다.

 

float 사용 시 겪은 문제

그리고 이미지 뒤에 넣은 연녹색 그림자를 배치하는 데도 애를 먹었다.

float를 사용해서 배치했는데 position: relative로 설정하면 원이 자리를 차지하고 다른 요소들을 밀어내서 곤란했고,

position: absolute로 설정하면 그런 문제는 해결되는데 창의 크기가 변하면 배치가 달라진다는 문제가 있었다.

 

float 자체가 텍스트 속에서 텍스트를 밀어내고 자리를 차지하기 위해서 만든 기능이므로

이미지를 겹쳐서 사용하는 데 이용하기는 부적절한 것일까?

 

오늘은 float와 flex, postion에 대해서 좀 더 공부를 해 보고 수정 작업을 거쳐야겠다.