티스토리 뷰
1. text-transform
- 대문자 전환
| 속성 | 내용 |
| none | 기본값으로, 텍스트를 html 코드에 있는 그대로 읽음 |
| capitalize | 각 단어의 첫번째 문자를 대문자로 만듦(예: Seoul National Univ.) |
| uppeercase | 모든 문자를 대문자로 바꿈 (예: SEOUL NATIONAL UNIV.) |
| lowercase | 모든 문자를 소문자로 바꿈 (예: seoul national univ.) |
2. CSS로 입력 필드에 입력 내용이 없음을 알려주는 UI 만들기
<label for="username">이름 </label>
<input type="text" name="username" id="username" required pattern=".*\S.*" placeholder="이름을 입력해주세요.">
input{
padding: 10px;
border-radius: 10px;
background-color: #e0e0e0;
outline: none;
border: none;
}
input:not(:placeholder-shown){
background-color: #a00;
}
input:valid{
background-color: #0a0;
}출처: blogpack.tistory.com/1065?category=804108
3. CSS scroll-snap-type 속성으로 자동부착 스크롤 슬라이드 만들기
<div class="wrapper">
<div class="slide-container">
<div class="slide">
<h1>Hyundai</h1>
</div>
<div class="slide">
<h1>Toyota</h1>
</div>
<div class="slide">
<h1>Tesla</h1>
</div>
</div>
</div>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.wrapper {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.slide-container {
scroll-snap-type: x mandatory; /* 달라붙는 스냅 속성 부여 */
overflow-y: hidden;
display: flex;
width: 800px;
height: 400px;
}
.slide {
scroll-snap-align: start; /* 하위 요소의 정렬 방향 */
min-width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 3rem;
line-height: 0.75;
}
출처: blogpack.tistory.com/1078?category=804108
4. 가상클래스 :is()와 :where() 비교
가상 클래스 :is()와 :where()는 반복되는 CSS 선택자를 줄여주는 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:where()와 :is()의 차이점</title>
<style>
:where(section.where, aside.where, footer.where) p {
color: red;
}
:is(section.is, aside.is, footer.is) p {
color: green;
}
footer p {
color: blue;
}
</style>
</head>
<body>
<article>
<h2>:where()</h2>
<section class="where">
<p>Section</p>
</section>
<aside class="where">
<p>Aside</p>
</aside>
<footer class="where">
<p>Footer</p>
</footer>
</article>
<article>
<h2>:is()</h2>
<section class="is">
<p>Section</p>
</section>
<aside class="is">
<p>Aside</p>
</aside>
<footer class="is">
<p>Footer</p>
</footer>
</article>
</body>
</html>출처: 7942yongdae.tistory.com/73
1111111
1111111
'HTML > CSS' 카테고리의 다른 글
| CSS로 PC, Mobile 구분 (0) | 2022.05.11 |
|---|---|
| sass 정리 (0) | 2021.08.26 |
| input type="file" 이미지 화, input type="checkbox" 이미지 화 (0) | 2021.03.04 |
| CSS 네이밍 규칙 (0) | 2021.02.26 |
| animation, transition, transform 속성 정리 (0) | 2021.01.05 |