CSS

정보를 담을 수 있는 언어가 html이었다면 여기에 스타일을 더해주는 언어는 css이다. Cascading Style Sheets(css)에 대해서 정리해보자. CSS Basics 1. 기본문법 selector 스타일을 적용하고 싶은 html element나 cl

웹 브라우저를 열고 페이지를 살펴보면 많은 박스 형태의 요소들로 이루어져 있음을 알 수 있다. 즉, html element가 css로 표현이 될 때 박스 형태로 표현되고 있다. 그래서 Box Model과 Box에 대해서 정리해보려고 한다. Box Model ![](h

css를 작성할 때 중요한 것 중에 하나는 요소들을 가로배치 하는 일이다. 방법 중에 하나인 float에 대해서 정리하고 간단한 실습 코드를 작성해보려고 한다.(red에 float를 사용할 때 생기는 모습 \_김버그의 css는 재밌다)class="red"에 float:

"position" property를 이용하여 요소를 원하는 위치에 배치할 수 있다. 가로배치를 위해 사용하던 "float"와는 다르게 자유도가 높은 "position"에 대해서 정리해본다. Position 1. Static 기본적으로 요소들은 static 상태를

레이아웃의 끝판왕, flexbox에 대해서 정리해보자. 1. 김버그의 CSS는 재밌다 2. Flexbox_MDN 3. CSS Flex 완벽가이드_HEROPY Tech Flexbox flexbox를 사용할 때 2가지를 떠올리면 좋다. Container와 Items이다

웹 페이지 하나를 열어보자, 화면의 크기를 늘이고 줄였을 때, 자연스럽게 레이아웃이 변하는 페이지들이 있다. 이런 작업을 할 때 필요한 것이 css의 Media Query이다. 김버그의 CSS는 재밌다 반응형 Web ![](https://images.velog.io

Typography는 웹페이지 스타일을 정하는데 있어서 핵심이라고 볼 수 있다. 웹페이지의 목적은 결국 사용자에게 정보를 제공하고 이용하도록 하는 것이기 때문이다. 정보들을 원하는 대로, 사용자에게 보기 좋도록 만드는 Typography에 대해서 정리해보자.(그림 출처

Background property에 대해서 정리를 해보려고 한다. 특히, img element를 사용하지 않고 background property를 사용하는 방법에 대해서 정리하고 기억하고자 한다. ( 특정 이미지를 유저에게 보여주는 경우에 이미지의 크기가 일정하지