Position 훈련(1)

이번시간에는 이런 유저카드를 만들어보자

생각보다 어렵다…?

일단 강의를 봤는데, 나랑 사고방식이 조금 다른게 이거였다.

<div class="user-photo">
	<img src="./assets/user.jpg" alt="Kimbug" />
	<span class="user-status" aria-label="Active"></span>
</div>

나는 위에서 img를 다루기 위해서 그 부모클래스부터 다뤄야 한다고 생각했다… 위의 목업을 보면

이런식으로 <span>으로 생성된 초록 동그라미와, user-photho가 동일한 position을 가지고 있는 것 같아서… 그래서 부모 div를 통해 그들의 위치를 조금 조절해주려고 했음. 하지만 강의에선 그냥 바로 img를 다뤄버림..

그리고 한가지 더 배운것. img는 inline이다. 그럼에도 img는 width와 height를 줄 수 있는 유일한 파일이다. 그래도 확실하게 widht와 height를 쓰려면 block처리해주자

그리고 초록 동그라미 만들면서 하나 배웠다.

만약 저렇게 border가 좌 우 2px이면, css문서에서 box-sizing을 border-box로 설정했을 경우, 내가 설정하는 width와 height는 border를 포함하는 넓이가 된다. 따라서 border를 제외하고 8px만 필요하다 하더라도, 8px로 설정하는게 아니라 좌우 각각 2px씩 더해서 총 12px로 설정해야 위같은 프레임이 나온다.

그리고 한가지 더 배웠다. 위의 초록박스는 html상 태그가 <span>이라서 css의 display는 inline이다. 나는 이걸 굳이 안바꾸고 그냥 position만 absolute로 설정해서 block처럼 쓰려고 했는데, 강의를 보면