멋사 FE 스쿨 - 4월 7일
1. overflow: hidden vs display: none 차이
- display: none
모든 자손 요소들을 (가리는 것이 아니라) 아예 없는 것 처럼 취급하기 때문에 웹 접근성을 고려하지 않는 선택이 된다.
MDN
Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.
- overflow: hidden;
자식이 부모 요소보다 클 때 부모를 넘어가는 자식의 컨텐츠를 가리는 것
2. CSS 중앙 정렬
<!DOCYPE html>
<html>
<head>
<title>텍스트 정렬</title>
<style>
.text_center {
text-align: center;
}
.text_left {
text-align: left;
}
.text_right {
text-align: right;
}
.one {
transform: translateX(50%);
}
</style>
</head>
<body>
<div class="text_center">
<p>hello</p>
</div>
<div class="text_center">
<img
width="100px"
src="https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg"
alt=""
/>
</div>
<div class="text_left">hello <span>왼쪽 정렬</span></div>
<div class="text_right">hello <span>오른쪽 정렬</span></div>
<div class="text_center">
<span>가운데 정렬</span>
</div>
<div class="one">
<img
width="100px"
src="https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg"
alt=""
/>
</div>
</body>
</html>
모든 자손 요소들을 (가리는 것이 아니라) 아예 없는 것 처럼 취급하기 때문에 웹 접근성을 고려하지 않는 선택이 된다.
MDN
Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.
자식이 부모 요소보다 클 때 부모를 넘어가는 자식의 컨텐츠를 가리는 것
<!DOCYPE html>
<html>
<head>
<title>텍스트 정렬</title>
<style>
.text_center {
text-align: center;
}
.text_left {
text-align: left;
}
.text_right {
text-align: right;
}
.one {
transform: translateX(50%);
}
</style>
</head>
<body>
<div class="text_center">
<p>hello</p>
</div>
<div class="text_center">
<img
width="100px"
src="https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg"
alt=""
/>
</div>
<div class="text_left">hello <span>왼쪽 정렬</span></div>
<div class="text_right">hello <span>오른쪽 정렬</span></div>
<div class="text_center">
<span>가운데 정렬</span>
</div>
<div class="one">
<img
width="100px"
src="https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg"
alt=""
/>
</div>
</body>
</html>
.one {
transform: translateX(50%);
}두번째 사진에 'x축을 기준으로 자신이 있는 자리를 부모 너비의 중간으로 오게하는 transform: translateX(50%)'를 적용하였는데 가운데에 위치하지 않는 이유: 왼쪽 모서리를 기준으로 하기 때문.
.one img {
position: fixed;
left: 50%;
transform: translateX(-50%);
}을 사용하여 해결한다.
의미: 왼쪽으로 50%를 이동하고 자신의 너비 반만큼 x축으로 -50% 이동
Author And Source
이 문제에 관하여(멋사 FE 스쿨 - 4월 7일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@losnah5h/멋사-FE-스쿨-4월-7일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
