일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- github
- 함수
- ES5+
- ES6+
- 햇소
- API
- 선택자
- CSS
- dev
- Python
- learn next.js
- array
- hooks
- 우아한테코톡
- developerlife
- JS
- html5
- es6
- This
- AI
- next.js
- react
- 변수
- git
- object
- 최적화
- JavaScript
- gitCLI
- hatso
- DOM
- Today
- Total
목록WEB/CSS3 (5)
codinghatso
Flexbox의 구성 container item container display flex : container에 display의 속성, flex 값을 주어야 flexbox 기능이 적용된다. flex-direction row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다. flex-wrap nowrap (default) wrap wrap-reverse flex-flow 다음의 속성들을 간략히 한 속성입니다. flex-direction and flex-wrap. justify-content flex-start (default) ..
contrainer position 드림코딩 아카데미 → http://academy.dream-coding.com/ 드림코딩 유튜브 → http://www.youtube.com/c/드림코딩by엘리
a[href]{} : href 속성을 가지는 태그 전부 a[href="naver.com"] : href 가 naver.com인 속성을 같는 태그 a[href^="naver"] : ^는 naver로 시작하는 속성을 같는 태그 a[href$="com"] : ^는 naver로 끝나는 속성을 같는 태그 드림코딩 아카데미 → http://academy.dream-coding.com/ 드림코딩 유튜브 → http://www.youtube.com/c/드림코딩by엘리
Cascading Style Sheet *cascade : 작은 폭포, 폭포처럼 흐르다, 연속화, 연속적인, 종속, 직렬 Cascading Author style : 우리가 만든 .css 파일 | 우선순위 1 User style : 유저가 다크모드 같은 브라우저의 설정 값을 바꾸는 것 | 우선순위 2 Browser : 브라우저에서 기본으로 기정된 스타일 | 우선순위 3 * ! important : 모든 우선순위를 무시하고 가장 중요한 것을 지정해 버리는 것. 이것은 좋지 않은 구조를 만들 위험이 있어 조심히.. 아니 사용하지 않은 것을 추천한다. selectors (지정자, 선택자) Universal * type Tag ID #id Class .class State : Attribute [] 기본 문법 ..
레이아웃 sm : @media (min-width:640px) 휴대폰 세로 사이즈 md : @media (min-width:768px) 휴대폰 가로 사이즈 lg : @media (min-width:1024px) 템플릿 사이즈 xl : @media (min-width:1280px) 데스크탑 사이즈 flex : 요소를 붙인다. 가로 container mx-auto : x축에 따라 여백이 자동으로 변경된다. object-cover : 컨테이너를 덮도록 요소의 컨텐츠 조정(이미지가 늘어나거나 찌그러지지 않게 컨테이너 사이즈에 맞춰서 잘림) lg:w-1/2 : 화면비율50% overflow-hidden : 컨테이너에 비해 너무 큰 컨텐츠이면 숨겨라 float : 블록 레이아웃. 사이즈 h : 높이값 h0 ~ h6..