오늘은 css에서 특정 문자나 문자열에 css를 줄 수 있는 문자 선택자와, 요소에 의해 생성된 영역을
렌더링할 것인지 결정하는 visibility 속성에 대해서 알아 보겠습니다.
- 문자 선택자
특정 문자 또는 문자열을 선택할 수 있습니다.
<ex.html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style>
#one::first-letter, #two::first-letter {
font-size: 2em;
}
#one::first-line, #two::first-line {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<p id="one">2021.11.27<br>
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!</p>
<p id="two">2020.12.25<br>
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!</p>
</div>
</body>
</html>
이렇게 첫 단어나 첫 문장을 지정하는 등 특정 구간을 지정할 수 있습니다.
- visibility 속성
요소에 의해 생성된 영역을 렌더링할 것인지 결정합니다.
| 속성 | 설명 |
| visible | 영역이 보입니다. |
| hidden |
영역이 보이지 않지만 그 영역의 공간은 확보하기 때문에 여전히 레이아웃에
영향을 미칩니다.
|
| collapse |
영역이 겹치게 보입니다. display none처럼 공간이 사라진 것처럼 보이지만
공간이 겹쳐지기 때문에 똑같이 보일 순 있어도 차이점이 있습니다.
|
- display none과의 차이점
display none은 원래 그 영역이 갖고 있던 자리도 없어지지만, visibility로 hidden값을
주면 그 영역은 보이지 않아도 자리는 유지됩니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style>
div {
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
}
#two {
display: none;
}
#four {
visibility: hidden;
}
</style>
</head>
<body>
<div id="one">
container1
</div>
<div id="two">
container2
</div>
<div id="three">
container3
</div>
<div id="four">
container4
</div>
<div id="five">
container5
</div>
</body>
</html>
이렇게 display none을 한 container2 영역은 사라졌을 뿐만 아니라 공간도 없어졌는데,
visibility hidden값을 준 container4 영역은 보이진 않지만 여전히 공간은 차지함으로써 레이아웃에
영향을 끼치게 됩니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| html form 태그 (0) | 2021.12.27 |
|---|---|
| css text-overflow 속성 (0) | 2021.12.27 |
| css white-space 속성 (0) | 2021.12.26 |
| css border-radius 속성 (0) | 2021.12.26 |
| css text-indent 속성 (0) | 2021.12.26 |
댓글