1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 minmax 적용 전 .grid { display: grid; height: 50vh; gap: 5px; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(4, 100px); } .header { background-color: aqua; } .content { background-color: brown; } .nav { background-color: chocolate; } .footer { background-color: darkgreen; } minmax 적용 후 .grid { display: grid; height: 50vh; gap: 5px; grid-template-c..
.grid { display: grid; height: 50vh; gap: 5px; grid-template: "header header header header" 1fr "content content content nav" 2fr "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; /* grid template로 한번에 모두 적을 수 있다. grid area 를 모두 설정해준뒤 레이아웃을 정하고 그옆에 1fr 처럼 높이를 설정해주면 된다 맨 마지막에는 가로비율을 어떻게 설정할지도 정해주면 된다 fr-fraction(부분) fraction은 grid에서 사용 가능한 공간을 뜻한다. fr값 비율로 공간을 나눈다. ● grid-template: "(이름)" (row..
.grid { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: repeat(4, 200px); gap: 10px; } .header { background-color: aqua; grid-column-start: 1; grid-column-end: 5; } .content { background-color: brown; grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; } .nav { background-color: chocolate; grid-column-start: 4; grid-column-end: 5; grid-row-st..
html 코드 css 코드 .grid { display: grid; grid-template-columns: 100px repeat(2, 200px) 100px; grid-template-rows: repeat(4, 200px); grid-template-areas: "header header header header" "content content content nav" "content content content nav" "footer footer footer footer"; } .header { background-color: aqua; grid-area: header; } .content { background-color: brown; grid-area: content; } .nav { backg..
검색창에 이모티콘 넣는 법 이모티콘과 input 기능이 함께 나오는데 검색창 안으로 넣고 싶을 때는 .search-bar { width: 220px; height: 27px; border-radius: 5px; border: solid 1px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; z-index: 1; opacity: 1; } 먼저 search-bar 의 너비 , 높이 그리고 flex 를 사용하고 center를 사용합니다 그 이후 .search-bar__input { width: 50px; } width 값을 주어서 search-bar 보다 작게 하여 center에 위치하게 하며 /* .search-..
Pseudo Selector html에서 박스를 만드는데 맨 마지막 박스만 색을 변경하고 싶다 싶으면 클래스나 아이디를 새로 추가하는 것보다 더 좋은 방법인 Pseudo Selector을 이용하면 되겠다 여기서 클래스나 아이디를 입력하는 방법도 있지만 div : 하면 많은 자동완성들이 보일것이다 마지막 박스만 변경하려면 last-child를 사용하면 될것이다 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을..
id id는 유일한 값으로 문서 안에서 오직 하나만 존재해야 합니다 id는 한번에 여러개를 가질 수 없습니다 "애플리케이션의 고유 영역 식별자" , 고유한 식별을 목적으로 하는 경우 사용합니다. id 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 class 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다. name name 은 문서 안에서 중복사용이 가능합니다 form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성입니다 ("폼 전송 이벤트 발생 시, 서버로 데이터를 전송하기 위한 식별자 역할") JavaScript 프로그래밍 코드를 사용하여 요소의 name..
- Total
- Today
- Yesterday
- 우아한테크코스
- WSL2
- 노마드코더
- C언어
- 초보
- nodejs
- 원티드
- CLASS
- jest
- NextRequest
- createPortal
- 북클럽
- electron
- error
- import/order
- env
- 노개북
- javascript
- 프론트앤드
- React
- Storybook
- 윤성우 열혈C프로그래밍
- 스토리 북
- 위코드
- NextApiRequest
- nextjs
- TopLayer
- 아차산
- 프리온보딩
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |