CSS Layout Masterclass

CSS를 시작해보자 ~ 필요 기초 지식 : css, html 필요 소프트웨어 : node.js, vite 사전 준비 vite 깔고 개발 환경 만들기 => 강의 #1.2 를 참조 npm run dev를 해야 개발 서버가 열린다 / 끄는 건 ctrl+c 새로고침 없이도

Grid 알아보기 Grid란? > 2차원 레이아웃 시스템, CSS의 꽃 ... 열과 행을 원하는 만큼 제어하고 커스텀할 수 있다. 1. Grid 사용하기 1. Grid 설정하기 Grid 또한 flex와 마찬가지로 부모 div에 설정해주는 값이다. 대신, flex보

SCSS & SASS > CSS 전처리 프로세서 CSS에 아직 없는 기능을 지원하기 위해 사용하는 프로세서이다. SASS 사용하기 1. 설치 VS의 콘솔에 npm add -D sass를 입력하여 SASS를 설치한다. style.css를 style.scss로 수정한

먼저 레이아웃을 살펴보고, 만들어야 할 요소들을 설정하자.배경 : 검정header회색 배경원 3개둥근 바 1개플렉스, 하나는 가운데 하나는 왼쪽 패딩 적당히박스4열 3행 \- div는 7개검, 파, 흰, 빨, 노div 3 4 5 는 span 텍스트는 P로 넣어야 하나

노란 배경window5행 4열맨위, 아래 행은 통합, 가운데 행열도 통합특이사항글자 세로쓰기, 옆으로 쓰기글자 흘러가게 하기 -> https://hi-thisisearth.tistory.com/1 버튼 별도로 띄우기 (위치지정?) -> https://

대략적인 구조를 짜보자1\. header, gallery 2단으로 구성2\. header는 flex로, 5개의 개체 \- 각 개체 안도 flex로 구성 (SPAN)3\. gallery는 3x3 grid \- 각 개체 안도 3x3 grid로 구성 \- img 부

우선 가운데 화면을 분석했다.먼저 CSS 작성 -> 강의와 비교 방식으로 진행height의 작성 방식나의 경우 : height를 미리 지정하고 box-sizing을 넣는다.강의의 경우 : height를 지정하지 않고 padding으로 사이즈를 조정한다.이미지 영역pos

비율은 6:4 정도인듯경계 없는 span이 많아서 귀찮을 거 같다 이번엔 걍 fontawesome 써야지border trick border를 일일히 설정하지 않고 body의 bgcolor를 통해 경계를 넣는다.list메뉴를 설정할 때 ul과 li를 쓴다.메뉴 경로는 b

네모 테두리는 고정 (fixed) - 가운데 사진 부분만 스크롤 되도록반응형 display -> 사이즈에 따라 사진 그리드 개수 변경, auto-fill/fit 사용header (menus)navgallery menu 부분이 항상 보이게 하는 법 : overflow-y

오늘의 과제 1. 분석 wrapper 2열 왼 : 3:7 -> 4행, 2행 가운데 이미지는 그냥 absolute로 박자 오 : 2 1 1.2 2 4 비율 2. 비교 3. 결과 1) HTML 2) CSS 3) 리뷰

1 grid로 갈겨보자.패치는 position을 이용해서 나중에 넣어보자.칸 안에 잘리게 하려면, width 를 max-content로 한 뒤, overflow : hidden을 하고부모를 relative, 텍스트를 absolute로 하면 된다. rotate 애니메이션

오늘의 과제 이전에 했던 테두리 + 메인 그리드 형태의 레이아웃 장식 요소 몇 개 빼고는 특이할 게 없어보인다. 나도 속도를 높이기 위해 HTML과 CSS를 같이 해보겠다. 1. 분석 column은 1짜리 8개, row는 211 211 형태이다. 특이한 부분은

오늘의 과제 1. 분석 2. 비교 3. 결과 1) html 2) css 3) 리뷰