일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- JavaScript
- 리액트 프로젝트
- 파이썬 slice
- typeScript
- 자바스크립트
- 파이썬 for
- useState
- REACT
- js
- 파이썬 enumerate
- 프로그래머스
- 파이썬 list
- 리액트 팀 프로젝트
- 리액트 훅
- 타입스크립트
- 내일배움캠프 프로젝트
- 리액트
- 파이썬 for in
- 그리드 정렬
- 내배캠 프로젝트
- 내일배움캠프
- 타입스크립트 props
- 코딩테스트
- 리액트 페이지 이동
- 내일배움캠프 최종 프로젝트
- 타입스크립트 리액트
- 한글 공부 사이트
- Next 팀 프로젝트
- 파이썬 반복문
- React Hooks
- Today
- Total
목록CSS (15)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ugefg/btsEFMnAbLi/rZBXWJIHq4QpkBPHqQyVLk/img.png)
💡 옵션의 기본값을 설정해보자 setMember(e.target.value)}> Mads Jonathan jonathan 의 페이지인데 option 의 맨 위 값인 Mads 가 표시되고 있다. 바꿔보자 ~ setMember(e.target.value)}> === Mads Jonathan 기본값이 될 option 을 추가하고 seleted : 기본으로 설정하기 disabled : 선택이 안되게 막아두기 들을 적어주었다. 🚨 disabled 만 적어두면 기본값이 Mads 로 설정된다. 👀 추가 기능 1. hidden 숨기고 싶은 옵션에게 ~ 2. select 에 disabled 속성을 넣으면 아예 옵션을 선택할 수 없게 막힌다!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bjCwT9/btsDUfx09Rt/aiWnOIyOuy8ATpm9QXxhf0/img.png)
💡 태그별로 기본적으로 적용되는 css 초기화 reset.css 파일을 만들고, 적용할 파일에 import 한다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cVY21O/btsDfi3uAi2/4Hf4JoosaLL41DhN7lC0y0/img.png)
👀 영화 검색 사이트 제작 중 검색 창이 스크롤을 따라다니게 만들고 싶었다! ~ scroll ~ ⬇️ 왼쪽에 있는 serch-container 를 고정해 두었다! 💡 설정 코드 HTML ~ Search movie title Click CSS ~ #search-container { align-self: flex-start; position: sticky; top: 0; padding: 10px; } 그리고 설정하다 잘 안되서 찾아본 정보들.. 1. 임계값 설정 고정할 요소에 아래 속성 중 하나 이상에 대해 "auto" 이외의 값을 설정해야 한다. top: 0; right: 0; bottom: 0; left: 0; 2. 사파리 벤더 접두사 추가 사파리 브라우저에서 기능하도록! position: -webkit..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bpr4wk/btsC2yeRW02/Nkkw5Fa9uUTYhkqVuFwntK/img.png)
💡 그리드 속성 몇 개 더 알아보자. 기본 세팅! .container { display: grid; height: 500px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다. ✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정 속성값 의미 stretch 기본값! 그리드 아이템들이 트랙 높이만큼 확장된다. start 트랙 상단으로부터 하단을 향해 배치 end 트랙 하단으로부터 상단을 향해 배치 center 할당된..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PXhS9/btsC9nWXgUT/tWXVxCIxF0Ck63aaYOkU60/img.png)
💡 그리드 컨테이너 내 그리드 아이템에 주어지는 속성에 대해 알아보자. ✳️ grid-column & row : 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치한다. 기본 세팅! 6개의 리스트를 2열 3행으로 ~ 1 2 3 4 5 6 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; border: 5px solid aquamarine; } li { display: flex; justify-content: center; align-items: center; background-color: lemonchiffon; border: 5px solid pink; border-radius: 10px; } .con..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cNNHoD/btsC4duEigC/zzM5F28QAKdqfIOcwjU2n0/img.png)
💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다! 그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다! 그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소 그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소 display : grid 기본적으로 블록 레벨 display : inline-grid 인라인 속성으로 쓰고 싶을 때! 시작해 보아요. 1 2 3 4 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; bo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b7fM8p/btsC1q2kTNS/rqDN697AaOC8d3TKyXZFMk/img.png)
💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li 고양이 강아지 오리 달팽이 고라니 * { box-sizing: border-box; } body { margin: 0; } #first-ul { display: flex; padding: 0; list-style: none; height: 300px; } 먼저 기본으로 이렇게 flex 를 설정해 주면 ⬇️ 한줄로 정렬된다! ⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함 ⬇️ display: ..