Community
개발자 99% 커뮤니티에서 수다 떨어요!
← Go back
안녕하세요?코코아톡 강의 6.33까지 듣고 있는 초보입니다. 강의 자체는 제법 많이 들었지만 개념이 확립되지 않은 부분이 너무 많아 진도에 비해 부끄러운 질문 두개 남겨봅니다.
1.<HTML>
<form class="reply">
<div class="reply__column">
<i class="fas fa-plus-square fa-lg"></i>
</div>
<div class="reply__column">
<input type="text" placeholder="Write a message..." />
<i class="far fa-kiss-wink-heart "></i>
<button>
<i class="fas fa-long-arrow-up"></i>
</button> </div>
</form>여기서 .reply__column의 first child는 <i class="fas fa-plus~></i> 이것이고
second child는 <input~/>이것과 <button></button>
이 두가지 모두가 second child가 맞을까요? 처음에 second child는 <input~/>이 부분만이라고 생각했는데 css창에 .reply__column:nth-child(2)에 백그라운드 컬러를 넣어서 확인해보니 저 부분 통째로 적용이 돼서 저 두가지가 second child인가 하는 생각이 들었습니다.
2.<CSS>
.reply__column:last-child > i,
.reply button {
position: absolute;
right: -12px;
top: 2px;
}
css 창에서 저렇게 된 경우 reply__column의 last child의 direct child인 i (아이콘), 그리고 reply button 두가지의 선택자들의 포지션이 앱솔루트. 오른쪽으로 -12픽셀 , 위로 2픽셀 가는 것이라고 알고 있었습니다.
그런데 출력을 해보니 리플라이 버튼 부분만 오른쪽으로 -12픽셀,위로 2픽셀만큼 움직이고 라스트 차일드의 아이콘은 그대로 움직이지 않더라구요
왜 last child의 i에는 적용되지 않는것인가요?
제가 제대로 개념을 이해하지 못한것 같아 질문드려봅니다. 강의를 돌려보고 child에 대한 다른 강의를 봐도 잘 모르겠어서 질문드립니다.
혹시 질문양식이 틀린 부분이 있다면 알려주세요 감사합니다.
2 comments