calc()
calc()함수를 이용하면 css 속성의 값으로 계산식을 지정할 수 있다.
width: calc(100%-200px)은 100%에서 200px만큼 뺀 값을 계산하여 너비에 할당width: calc(80vw-100px)
min(), max()
둘 중 작은(큰) 값을 반환한다.
width: min(50vw, 500px) 이라면 화면이 커지고 작아짐에 따라서 50vw와 500px 중 작은 값을 너비로 취한다.
z-index가 작동하지 않는 이유
1. 쌓임 맥락(stacking context)
참고 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
기본적으로 어떤 요소가 맨 위에 있거나 맨 아리에 있을지를 결정한다. 요소들에 z-index가 설정되지 않아도 stacking order에 의해 요소들의 위치가 결정된다. 규칙에 의하며 마크업에서 나중에 오는 요소는 앞에 오는 요소의 위에 있다. 특정 요소의 렌더링 순서는 자신의 z-index 속성 값에 영향을 받는다. 요소들이 가지는 특별한 속성으로 인해 쌓임 맥락이 생성되기 때문이다.
2. element의 위치가 설정되지 않음
element의 위치를 설정하려면 position이 static이 아닌 relative, absolute와 같은 값을 가지고 있어야 한다.
3. opacity, transform
opacity, transform과 같은 css 속성들을 설정하면 element가 새로운 stacking context에 배치된다. 이럴 땐, 위에 배치하고 싶은 요소에도 position 속성과 더 높은 z-index값을 설정하여 해결할 수 있다.
4. 부모의 z-index
자식의 z-index값은 부모의 z-index의 값에 의해서 제한된다. 자식의 z-index 값은 형제들의 z-index와 비교하여 쌓이는 순서를 결정한다.
출처 mdn
- DIV #4는 DIV #1보다 z-index 속성 값이 더 크지만 DIV #1보다 아래에 렌더링 되었다. 왜냐하면 DIV #1의 z-index 속성 값인 5는 뿌리 엘리먼트의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성 값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문이다. DIV #4는 자신이 속하는 DIV #3의 z-index 속성 값이 4이므로 DIV #1 아래에 쌓였다.
- 같은 이유로 DIV #2는 DIV #5 아래에 렌더링 되었다. DIV #5는 DIV #2보다 z-index 값이 작지만 뿌리 엘리먼트의 쌓임 맥락안에서 유효한 DIV #5가 속한 DIV #3의 z-index 값이 DIV #2의 z-index 값 보다 더 크기 때문이다.
- DIV #3의 z-index 속성 값인 4는 DIV #4, DIV #5, DIV #6의 z-index 속성값과 독립적이다. 왜냐하면 다른 쌓임 맥락에 속해있기 때문이다.
- 렌더링 순서를 이해하는 쉬운 방법은 z-index를 "버전 번호" 처럼 생각하는 것이다. 자식 엘리먼트는 부모 엘리먼트 버전 번호의 마이너 버전이다. 이 방법은 왜 z-index가 1인 DIV #5가 z-index가 2인 DIV #2 위에 쌓였는지, z-index가 6인 DIV #4가 z-index가 5인 DIV #1 아래에 쌓였는지 이해하게 해준다. 우리 예제에서는
- 뿌리 엘리먼트
- DIV #2 - z-index가 2
- DIV #3 - z-index가 4
- DIV #5 - z-index가 1인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.1이다.
- DIV #6 - z-index가 3인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.3이다.
- DIV #4 - z-index가 6인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.6이다.
- DIV #1 - z-index가 5
(실습) grid를 이용하여 클론코딩
https://codepen.io/bbozzay/pen/vaPPmw
1. 이걸 비슷하게 만들어 보는 실습을 하였다. 그렇지만 코드는 참고하지 않고 만들어 전혀 다르게 작성되었다.
section-board 부모 안에 16개의 board-item을 담고, grid로 배치해주었다.
2.
밑에 그림자를 ::after로 만들어서 표현했다. 그리고 board-item:hover했을 때, 위로 살짝 올라가도록 transform 속성을 주었다.
그런데 hover했을 때, 의도치 않게 그림자가 더 위로 올라오는 현상이 생겼다. 이는 위에서 설명 했듯이, transform 속성 때문에 z-index가 무시되었기 때문이다. 그런데, 그림자는 가상요소로서 board-item 의 자식이기때문에, 위의 해결방법으로 해결할 수 없었다. 그래서 다른 속성을 이용해서 구현하였다.
translate 대신 board-item:hover에 top, left 속성을 주었다. 그 후에 .board-item:hover::after 에 기존의 top, left 값에 hover될 때 올라가는 만큼 다시 내려주어서 움직이지 않는 것처럼 보이게 하였다.
input checkbox와 label을 이용해서 board-item을 눌렀을 때 색깔이 변하도록 하였다.
그외 알게된 것들
- main 태그는 section 태그 안에 올 수 없다.
- '선택자:nth-child'는 선택자 중 n번째가 아니라, 부모의 n번째 자식요소 중 선택자인 것을 선택한다.
<style>
/* 첫번째 자식인 p의 bg를 바꾸는 것.*/
/* 직계 부모를 보고, 거기서 몇 번째 자식인 p 이렇게 확인해야함 */
/* 첫번째 자식인 p가 없어서 색이 안 바뀌는 것 */
p:first-child {
background-color: coral;
}
p:nth-child(2) {
background: #000;
}
</style>
</head>
<body>
<div>
<span>첫번쨰</span>
<p>p의 첫번째</p>
<p>p의 두번째</p>
<p>p의 세번째</p>
</div>
</body>- img 의 alt 는 자세하게 쓰는 것이 좋다!! '닫기' 이런 거 보다 '로그인창 닫기' 이런 식으로 적어주는 게 더 좋다.
- display: none;은 스크린리더가 읽지 않는다.
- 윈도우에서 잘못 끈 창은 ctrl+shift+T 누르면 다시 켜진다.
- flex:1;은 flex: 1 1 0;을 뜻한다. 그러므로 화면을 꽉 채우도록 커지는데, 이 값을 여러요소에 주면 1:1:1의 비율로 커지고 줄어든다.
- inline 요소는 float을 인식한다.
- img 태그의 경우 기본적으로 display: block;이나 vertical-align: top;을 설정해주어야 한다.
위처럼 높이차이가 나게 되는데, 이는 img는 inline 요소이기 때문에 default로 vertical-align: baseline으로 설정되어 있기 때문이다.
관련 글 https://lunatk.github.io/2019/10/28/20191028-html-img-parent-height/ - 가상요소는 요소보다 앞에 위치한다.
📢 오늘의 회고
소소해 보이지만 꼭 알아두어야 하는 팁들을 많이 얻은 하루이다. 🙂
오 라디오로 활용까지하셨네요 👍