Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- margin
- hover
- CSS
- position : fixed
- val()
- 밀리초
- scss
- display:none
- togle
- setTimeout
- transform
- form
- Carousel
- Position
- absolute
- navbar
- float : left
- JQuery
- input
- animate
- 이벤트 버블링
- css animation
- EventListner
- css selector
- vw
- TRANSITION
- z-index
- bootstrap
- sass
- 레이아웃
Archives
- Today
- Total
목록::before (1)
Simple Is Best

안녕하세요 데이터미널입니다. 이번 포스팅에서는 Pseudo-elements에 대해서 알아보도록 하겠습니다. 아래의 사진에 나온 글씨를 어떻게 스타일링 할까요? HTML 나는 서울대학교 학생입니다. 첨부된 사진을 제작하기 위해서 사용된 HTML 코드는 위의 코드가 전부입니다. 나머지는 모두 CSS를 사용하여 만들었습니다. 이럴 때 사용하는 개념이 바로 Pseudo-elements입니다. 우선 Pseudo-elements는 text클래스의 '처음 글자'와 '마지막 영역'을 담당하여 스타일링 하고 있습니다. CSS 코드를 살펴볼까요? CSS .text::first-letter{ color : blue; font-size : 100px; } .text::after{ content : '사실 아닙니다^^'; co..
HTML & CSS
2021. 7. 15. 12:20