CSS 암묵적 사용 관련 메모
CSS에서는 본래의 의도와 다르게 표기되는 걸 회피하는 암묵적 방법들이 있다.
앞선 글과 마찬가지로 안 쓰면 까먹으니 메모🤖
img tag의 alt 속성 대체
HTML tag 중에서 보통 이미지를 표시할 때는 img tag를 사용하지만 실사용에서는 다른 태그 CSS class를 속성을 사용하며 background 속성을 통해 표기할 경우도 많다.
그럴 경우 img tag의 alt 속성을 사용을 할 수 있으며 이미지에 대한 정보가 미흡 하게되는 현상이 있을 수 있다.
이런 경우 아래와 같이 text-indent를 사용하여 텍스트를 화면 밖으로 버리는 방식으로 암묵적으로 표기 할 수 있다.
<body>
<div class="box-img">테스트 이미지</div>
<img src="./tesg.png" alt="테스트 이미지" />
</body>
.box-img {
background: url("./test2.png");
text-indent: -9999px;
}
float 해제를 위한 클래스 사용
현재는 flex, grid 등 CSS 속성들이 나와 사용 빈도는 줄었지만 float의 속성의 경우 사용하게 된다면 해당 속성을 해제를 해야 된다.
clear라는 속성을 써서 할 수 있지만 대중적으로 쓰는 방법은 아래와 같다.
<body>
<div class="clearfix">
<div class="box-float">1</div>
<div class="box-float">2</div>
<div class="box-float">3</div>
</div>
</body>
.box-float {
margin: 10px;
width: 100px;
height: 100px;
float: left;
background: lightgray;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}