<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.is-required::after {
content: "*";
color: red;
padding-left: 2px;
}
</style>
</head>
<body>
<label class="is-required" for="name">Name</label> <input type="text" />
</body>
</html>
form 작성 시 유용한 코드.
반드시 input을 받아야하는 경우 (이름, 이메일 주소 등등..)
개발자 도구를 보면 마크업에는 나타나있지 않다.
사실 내가 before, after Pseudo Selector를 처음 배우게 된 건
랜딩 페이지에서 배경 이미지는 약간 흐리지만,
nav나 content는 선명하게 보이는 효과를 원했을 때!
처음 배우게 됐다.
예시)
- 개발자 도구에서 ::before 부분을 선택하면 거기에 적용 된 css 코드들을 볼 수 있다.
실제 코드)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #333;
color: #fff;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
}
header h1 {
font-size: 6rem;
margin: 1rem;
}
header::before {
content: ""; /*실제 들어가는 content는 없고 배경을 넣을 예정 */
background: url("https://source.unsplash.com/1600x900/?nature,water")
no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
}
</style>
</head>
<body>
<header>
<h1>Hello World</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!
</p>
</header>
<section>
<h3>Lorem, ipsum dolor.</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate
suscipit quidem illum commodi alias nesciunt ipsam eligendi quo expedita
est?
</p>
</section>
</body>
</html>
header::before{}
- header의 앞에 넣을 것이다
content: '';
-들어가는 content는 없다. 왜냐면 나는 배경 이미지를 넣을 것이기 때문.
background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
- 배경 이미지.
-unsplash에서 가져왔다. refresh 할 때마다 주제별로 새로운 배경이 나와서 코드 연습할 때 심심하지 않고 좋다.
- no-repeat은 말 그대로 다닥다닥 반복되지 않길 원한다는 것.
center center는 x축 y축 모두 중심
/cover는 그 크기 다 채워달라는 의미
(배경 이미지 넣을 때 늘 습관적으로 넣는 코드들이다.)
position: absolute;
- position:absolute를 쓰면 가장 가까운 positioned ancestor를 기준으로 위치를 잡는다.
(An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).)*
- positioned ancestor가 없다면, document body를 기준으로 하고, 스크롤링 할 때마다 움직인다.
- 나는 header 위에 어떤 요소도 position을 주지 않았기 때문에, document body가 기준이 됨.
top: 0;
left: 0;
width: 100%;
height: 100%;
- position:absolute;를 쓰면 꼭 써야한다.
그래야 nearest positioned ancestor를 기준으로 어디에 위치시킬 지 정할 수 있으니까.
- positioned ancestor을 기준으로 위로는 0px, 왼쪽으로는 0px을 가는 데다, 너비와 높이를 100% 가진다?
nearest positioned ancestor 위를 다 덮어버리겠다!!! 라는 의미
opacity: 0.5;
- 넣어준 배경 이미지의 opacity
- 0~1사이의 값을 주면 된다.
- 0을 넣으면 아예 아무것도 안보이게 어둡고~ 1일 주면 원래 이미지 그대로이 밝기
근데 여기서 문제는 header에 있는 다른 글자들도 같이 어두워져버린 다는 것 😫
이때 사용하는 코드가 !!
z-index: -1;
- 3차원 공간에서 z축으로 이해하면 될 것 같다.
- 양수값을 가지면 튀어 나오는 걸로, 음수값을 가지면 뒤로 들어가는 걸로(;;) 상상을 하면 된다 ㅎㅎ
- 여기서는 배경이 뒤로 빠져서 header 속 글자들이 튀어 나와 선명하게! 원래대로! 보여야 하기 때문에
z-index에서 음수값을 줬다.
(예전에 다른 프로젝트에서는 header 속 element들에 z-index를 양수로 줘서 같은 효과를 낸 적이 있다.)
'CSS > learned_it_today' 카테고리의 다른 글
| CSS Animations (0) | 2020.07.01 |
|---|---|
| Box Shadow (0) | 2020.07.01 |
| nth-child Pseudo Selector (0) | 2020.07.01 |
| Targeted Selector (0) | 2020.07.01 |
| Flexbox (0) | 2020.05.27 |
