| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- CleanArchitecture
- cleancode
- 클린코드
- react
- 코드컴플리트
- 3장
- 주석
- 클린아키텍처
- kotlinlogging
- 계층과경계
- 테스트
- 경계해부학
- 회고
- 실용주의프로그래머
- 크고작은모든서비스들
- 험블객체
- 4장
- 아키텍처
- CSS
- 컴포넌트 결합
- 아키텍처란
- 리액트
- 리팩터링
- 우아한테크러닝
- clean architecture
- 타입스크립트
- 읽기좋은코드가좋은코드다
- 2장
- 설계
- 컴포넌트
- Today
- Total
목록CSS (2)
Chamy's Blog
CSS before와 after 어제 CSS를 사용해 툴팁을 만들면서, ul 태그에 after 속성을 준 후 만들었는데, before와 after가 무슨 역할인지 정확히 몰라서 찾아보게 되었다. 간단히 말하면, before은 해당 엘리먼트의 첫 번째 자식을 만들고, 속성을 주는 것이다. after은 마지막 자식을 만들고 속성을 준다. 적용 실습을 하면서 before와 after를 적용해보았다. 인용구 만들기 q 태그 앞 뒤로 before와 after를 사용해 인용 문구를 추가해봤다. HTML Hello Chamy said Hi!! CSS q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } q::before 를 보면..
이번에 가운데에 선을 긋는 작업을 하던 중, CSS를 사용해 `position: absolute`와 `left: 50%`를 주어 가운데에 선을 그으려고 했다. 3개의 DIV 내부에 선을 긋기 위해 아래와 같이 작업을 했다. 결과는 처참했다. 부모 div의 가운데가 아니라 전체 화면의 가운데에 같은 줄이 3개가 겹쳐서 그려졌다. 각 div의 가운데에 그리려고 검색을 하던 중 absolute와 부모와의 관계에 대한 글을 보게 되었다. absolute의 위치 기준은 position이 relative, fixed, absolute인 가장 가까운 부모이다. 즉 위의 코드에서는 부모 div가 기준이 아니라, body가 기준이 된 것이다. 나는 아래와 같이 부모 div 태그에 position을 relative로 주고..