김버그의 CSS는 재밌다 - 강의 정리

(1) Box Model Box Model 이란 ? HTML의 모든 요소는 CSS로 표현될 때 하나의 박스로 취급된다. 이 박스는 일정한 구조를 가지며, 이를 Box Model이라고 한다. Box Model의 구성 요소 ① Content content가 들어있는

float 는 요소를 컨테이너의 왼쪽 또는 오른쪽으로 뜨게 만들어 주변 텍스트가 그 주위를 감싸게 하는 속성이다. 요소가 일반 문서 흐름에서 빠져나와 레이아웃을 망가뜨린다. 이번 글에서는 float 를 적용했을 때 실제로 일어나는 일들과 float 로 망가진 레이아웃

float 를 이용해서 아래의 그림과 같이 탭 메뉴를 가로로 배치해보았다.ul 태그는 브라우저 기본 스타일이 적용되어 있다.아래와 같이 기본적으로 왼쪽 여백과 점(•)이 생긴다.처음에는 <li> 에 padding을 줬다.그런데 그렇게 하면 글자만 눌러야 이동한다.

float 를 이용해서 아래의 그림과 같이 카드 레이아웃을 만들어보았다.단순히 따라 만드는 게 아니라,만들면서 헷갈렸던 부분들을 정리해보려고 한다.예를 들어 이런 구조일 때:이미지와 콘텐츠를 가로로 배치하고 싶다면?→ 두 요소 모두 float: left; 를 줘야 한다

position 은 요소를 원하는 위치로 배치할 수 있도록 하는 속성이다.모든 요소의 기본 position 값이다.위치 기준이 없어 top, right, bottom, left 가 적용되지 않는다.자기 자신을 기준으로 이동한다.원래 위치를 유지하며 자기 자리에서 살짝

아래의 그림과 같이 프로필 이미지와 이름을 가로로 배치하고, 이미지 오른쪽 아래에 초록색 상태 표시 뱃지를 붙이는 프로필을 만들어 보았다.단순히 따라 만드는 게 아니라,만들면서 헷갈렸던 부분들을 정리해보려고 한다.초록 원을 만들고 border 를 흰색으로 주면'흰 원

아래의 그림과 같이 이미지와 이미지 위의 아이콘, 이미지 아래에 문구들이 있는 카드 레이아웃을 만들어 보았다.단순히 따라 만드는 게 아니라,만들면서 헷갈렸던 부분들을 정리해보려고 한다.HTML 구조를 보면:.card-content span 이김버그트래블에만 적용되는 건

아래의 그림을 모달을 화면 정중앙에 고정시키고, 닫기 버튼을 우측 상단에 고정시켜보는 실습이다.단순히 따라 만드는 게 아니라,만들면서 헷갈렸던 부분들을 정리해보려고 한다.이번 실습에서는 둘 다 사용했다..modal → position: fixed.close-button

flexbox 는 정렬의 끝판왕이다. float, clearfix, 복잡한 margin 계산 없이 보다 직관적으로 요소를 배치할 수 있다. 강의를 들으며 배운 내용을 정리해본다. 1. flexbox 는 누구한테 써야 할까? flex 를 쓰겠다고 선언하는 건 알겠

flex 실습 1, 2는 기존에 float로 만들었던 예제를 flex로 다시 구현해보는 내용이었다.비교적 간단해서 따로 정리하지 않고 넘어갔다.이번 실습은 flexbox를 이용해서 프로필 카드를 만들어보았다.세로와 가로 정렬을 함께 사용하면서 flex 정렬 방식을 익히

media query 는 반응형 웹을 만들기 위해 반드시 필요한 CSS 기능 중 하나이다.반응형 웹이란,사용자가 접속한 디바이스의 화면 크기(뷰포트)에 따라 그에 맞게 레이아웃이 자동으로 변경되는 웹을 의미한다.즉,모바일에서는 모바일 화면에 맞게태블릿에서는 태블릿 화면

이번 media query 실습은 화면을 디바이스 크기에 따라 다르게 보여주도록 만드는 연습이었다.처음엔 “PC 버전부터 만들고, 모바일일 때만 따로 바꾸면 되겠지?” 하고 시작했는데, 강의를 들으면서 모바일 버전을 먼저 만드는 게 정설이라는 걸 알게 됐다.결과적으로

텍스트를 보기 좋게, 읽기 쉽게 디자인하는 것단순히 글자를 적는 게 아니라크기, 간격, 굵기, 색상 등을 조절해서 가독성을 높이는 작업이다.: 글자의 크기를 정하는 속성✔ 사용 단위px: 절대 단위em(equal to capital M): 대문자 M의 크기를 기준으로

이번 media query 실습은 화면을 디바이스 크기에 따라 다르게 보여주도록 만드는 연습이었다. 처음엔 “PC 버전부터 만들고, 모바일일 때만 따로 바꾸면 되겠지?” 하고 시작했는데, 강의를 들으면서 모바일 버전을 먼저 만드는 게 정설이라는 걸 알게 됐다. 결과적

background 속성은배경 색상, 이미지, 위치, 크기, 반복 방식을 조합해서 요소의 배경을 스타일링하는 기능이다.: 요소의 배경 색상을 지정하는 속성rgba의 a는 alpha(투명도): 0 ~ 1 사이 값: 배경으로 이미지를 넣을 때 사용하는 속성✔ 이미지 경로

이번 실습은 background 속성과 flexbox를 활용해서 에어비앤비 카드 UI를 만들어보았다.단순히 배경 이미지를 넣는 게 아니라,background-image를 이용한 이미지 처리 방식flexbox를 활용한 레이아웃 구성가상요소를 이용한 아이콘과 구분자 표현접