HTML&CSS

Hyper Text Markup Language의 약자로 웹 페이지를 만들 때 사용하는 마크업 언어이다. HTML은 웹 페이지의 구조를 정의하고, 텍스트, 이미지, 비디오 등과 같은 컨텐츠를 표시하는 데 사용된다.

Cascading Style Sheets의 약자로 HTML 같은 마크업 언어로 작성된 웹페이지의 시작적인 디자인, 레이아웃을 담당하는 스타일 시트 언어이다. Cascading : 계단식HTML은 뼈대를 담당하고 CSS는 HTML을 꾸며주는 역할을 한다.

CSS Box Model이란? 웹 페이지의 레이아웃을 구성하는 핵심 개념 중 하나로, HTML요소가 화면에서 어떻게 위치하고 크기를 가지는 지를 결정한다. Box Model은 HTML 요소를 둘러싸고 있는 상자(Box)를 의미한다.

과제를 하면서 모르는 부분은 구글링하며 새로운 속성들도 알게 되는 시간이었다. outline 요소border와 달리 요소의 크기나 위치에 영향을 주지 않는다. 시각적인 표시를 나타내기 위해 사용.

display: flex 란 요소들을 유연하게 배치하기 위한 display 속성이다. flex를 사용하면, 부모 요소 안에서 자식 요소들이 차지하는 공간을 유동적으로 조정하고, 좌우나 상하, 가운데로 정렬할 수 있다.

처음에는 float: right와 같이 float로 만들어보고 같은 과제를 flex 로 만들어보는 과제였다. 아래의 예시처럼 레이아웃을 flex로 만들어본다. 브라우저 전체 면적을 사용했다.

간단한 카드라고 생각했지만 처음 어떻게 디자인 박스를 구상하고 배치를 어떻게 하느냐를 많이 고민했던 것 같다. 유저 타이틀이 보이는 부분은 생각처럼 간단하지 않았다.아래의 예시처럼 card를 만드는 과제였다.