aaa bbb ccc index.html 을 위와 같이 작성하자! container 라는 div 엘리먼트 내부에 item 이라는 3개의 div 엘리먼트가 있다. body{ margin: 0; padding: 0; } .container{ border: 1px solid red; } .item{ border: 1px solid blue; } style.css 를 위와 같이 작성하자! div 엘리먼트는 블록요소이기 때문에 웹 화면에서 한줄 전체를 다 차지한다. 그리고 스택처럼 세로로 쌓인다. * 컨테이너에 flexbox 적용하기 body{ margin: 0; padding: 0; } .container{ border: 1px solid red; display: flex; /* 컨테이너에 플럭스박스 적용 */..

header sidebar contents footer body { padding: 0; margin: 0; text-align: center; } #container { width: 100%; height: 100vh; display: flex; flex-direction: column; background: tomato; } #header, #sidebar, #contents, #footer { background: skyblue; margin-bottom: 5px; } #header { height: 50px; } #body { display: flex; flex-grow: 1; } #sidebar { width: 400px; flex-shrink: 0; margin-right: 5px; } #co..

* 기본 구조 만들기 컨텐츠 아이템 1 아이템 2 아이템 3 body { padding: 0; margin: 0; } #entire { width: 100%; height: 100vh; } #contents { background: tan; height: 120vh; text-align: center; line-height: 200vh; font-size: 2rem; } #container { width: 100%; height: 70px; background: tomato; text-align: center; position: fixed; bottom: 0; z-index: 1; font-size: 0; /* inline-block의 기본 마진값 제거*/ } .item { width: 33.2%; he..

* 위쪽에 중앙정렬하기 아이템 1 아이템 2 아이템 3 body { padding: 0; margin: 0; } #container { width: 40%; margin: 0 auto; background: tomato; text-align: center; } .item { width: 30%; height: 300px; line-height: 300px; background: skyblue; margin: 1%; display: inline-block; } @media screen and (max-width: 1100px) { #container { width: 80%; } .item { width: 30%; margin: 1%; } } @media screen and (max-width: 800px)..

아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 아이템 6 아이템 7 아이템 8 아이템 9 아이템 10 body { padding: 0; margin: 0; } #container { width: 40%; margin: 0 auto; background: tomato; text-align: center; } .item { width: 30%; height: 300px; background: skyblue; margin: 1%; display: inline-block; } @media screen and (max-width: 1100px) { #container { width: 80%; } .item { width: 30%; margin: 1%; } } @media screen and (max-wid..

* 칼렘 레이아웃 예시 포토1 포토2 포토3 포토4 포토5 포토6 포토7 포토8 포토9 포토10 포토11 포토12 포토13 포토14 포토15 포토16 포토17 포토18 포토19 포토20 포토21 포토21 포토23 포토24 포토25 포토26 포토27 포토28 포토29 포토30 body { padding: 0; margin: 0; } #photo-box { width: 60%; columns: 4; margin: 50px auto; } .photo { width: 100%; height: 300px; margin-bottom: 10px; background: tomato; display: inline-block; /* 컬럼 짤림 방지*/ } .photo img { width: 100%; height: 100..

참고 블로그 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 그리드 기본개념 - 컨테이너에 적용하는 속성들 A B C D E F G H I .container{ display: grid; border: 3px solid #333; } .container .item{ background-color: orange; margin: .1rem; } 컨테이너에 적용하는 속성 (grid-template-columns, grid-template-rows, -ms-grid-rows, -ms-grid-columns) ..

참고 블로그 반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 nykim.work 참고 문서 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org 참고 문서 2 미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN CSS Media Query는 예를 들..

참고 블로그 CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog 참고블로그 2 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com flexbox 로 만들수 있는 10가지 레이아웃 * 컨테이너 속성 display: flex .cont..

* CSS 구조 div{ background-color: blue; } CSS 는 선택자(selector)와 중괄호({ }) 안의 속성이름(attribute name) : 속성값(attribute value) 이 콜론(:)으로 연결되어 있다. 여기서는 div 가 선택자이다. 의사 클래스 참조문서 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org * 의사 클래스 제출 #submit{ all: unset; background-color: skyblu..