일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 파이썬
- backtracking
- 백준 9610번 파이썬 문제 풀이
- 낙관적 업데이트
- 9610
- 유클리드 호제법
- dp
- 한글 입력 시 이벤트 두 번 발생
- 함수 객체의 프로퍼티
- C++
- 알고리즘
- 동기
- 메타버스
- css
- 한글이 두 번 입력됨
- prototype 프로퍼티
- python
- 2522
- 비동기
- javascript
- 동적 계획법
- Tanstack Query
- 프로그래밍
- 백트래킹
- float: right
- __proto__ 접근자 프로퍼티
- 최소공배수
- 백준
- 자바스크립트
- 시간
- Today
- Total
목록css (4)
염딩코
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kUMhE/btr8NdkLLHM/p8yaykvwKk2yl8STtmqLu1/img.png)
☺️ vw와 vh란? CSS 작업을 할 때, 주로 사용하는 단위는 픽셀(px)이다. 하지만, px는 고정 단위이고 이를 대신해 유동 단위인 %를 사용하면 조금 더 유연한 코드를 만들 수 있다. 예를 들어, width: 50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS이다. %말고도 유연한 값을 가지는 단위들 중 vw, vh를 알아보자. v, 뷰포트를 기준으로 하다. 이들의 풀네임은 Viewport Width / Viewport Height 이다. 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위이다. 뷰포트는 ‘보여지는 영역’이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라 할 수 있다. 1vw = 뷰포트 너비의 1%로 계산된다. 그렇..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZARqC/btrZbpmftLM/OBc5MBOlIRvOOkGdzWOfVk/img.jpg)
웹사이트를 만들 때, 가장 중요한 것은 무엇일까요? ⇒ 우리가 이전 시간에 정의했던 박스들을 원하는 위치에 원하는 사이즈로 배치할 수 있는 것이 가장 중요합니다. 이것을 하기 위해서는 CSS에서 가장 기본이 되는 display와 position에 대해서 아는 것이 중요합니다. 이것이 사실 간단해 보여서 쉬워 보일 수 있지만, 현업에서는 박스 위에 박스가 올려져 있는 stacking이 많은 상태에서 display와 position을 잘 이해하지 못하면 금방 무너져 내릴 수 있습니다. (라고 현업에 계신 분이 말함.) display와 position은 끝낸다는 마음으로 정리를 시작해 보겠습니다. display 오늘은 실습을 통해서 진행해 보겠습니다. (같이 실습을 하고 싶다면 jsbin.com에서 하실 수 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Nc82s/btrYRUPl5v2/dTS7rubXRxGv3APKMixUxK/img.png)
Selectors란? html에 어떤 tag들을 고를 것인지에 대한 규정하는 문법입니다. * : 모든 태그에 적용 Tag : 해당 태그만 적용 #id : 해당 id만 적용 .class : 해당 class만 적용 : :태그 옆에 state 작성 가능 [] : 태그 옆에 attribute 작성 가능 다음과 같은 형식으로 작성하면 끝! CSS 문법은 어려운 것이 없습니다 :) /*selector { property: value; }*/ * { color: green; } li { color: pink; } .red { width: 100px; height: 100px; background: yellow; } button:hover { color: red; background: beige; } a[href^="..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nkdpR/btrY2otRpIa/pUHEqy5DJEzRVC1RwMYCH1/img.png)
CSS란? Cascading Style Sheet의 약자입니다. Style Sheet은 스타일을 잘 정리한 문서 한 장을 의미합니다. Cascading은 작은 폭포, 연속화 등등 연속해서 떨어지는 느낌을 준다고 생각하면 됩니다. Cascading은 세부적으로 정의된 것이 있다면 그것을 사용하고 정의된 것이 없다면 기본으로 정의된 다음 것으로 넘어가는 것을 얘기합니다. 웹 사이트를 스타일링할 때, 총 크게 3가지로 나뉩니다. Author style 우리가 작성하는 style sheet(.css 파일) User style 사용자의 취향에 맞게 스타일링의 변경하는 것(ex. 다크모드) Browser 브라우저 상에서 기본적으로 지정된 스타일 Cascading은 우리가 지정한 스타일(Author style)이 최..