TIL

1.img

img는 부모의 width에 따르지 않고 자기자신만의 값을 가진다. 그래서

.parent img{
	display: block;
	width: 100%;
    height: auto;
}

로 따로 지정해주면 부모의 width값을 가져가되, height은 자기 자신값을 가지게된다.
Img는 본디 inline(w/h불가)이지만 본래의 w/h를 줘서 조절할수있다.그래서 깔끔하게 display를 block으로 설정해주면 편하다.

2. position:absolute와 transfrom

사진처럼 양쪽 화살표버튼인 #prev와 #next에 대하여 다음과 같이 CSS스타일을 주었다.

#prev,
#next {
	positon:absolute;
    top: 50%;
 }

부모인 .card-crouseel기준으로 위에서 50%니까 중간에 버튼이 위치할거라 예상했는데 묘~하게 쳐저있다. 원인은 50%라고 설정이 될때,

저 버튼의 오른쪽위꼭지점이 50%자리에 위치하도록 설정이 되어있기 때문이다. 이럴 때 쓸수있는게
CSS의 transfrom 속성이다.

transform에는 제공하는 함수가 다양하다.
rotate() : 회전
scale() : 확대 축소..등등
그중 translate()을 써서 문제를 해결해보자

transform: translate(x,y);

x(오른쪽),y(아래)축으로 얼마나 이동할지 설정가능하다.
이번에는 위쪽으로 움직일것이기 때문에

transform: translateY(-50%);

정리
absolute top 의 50% : absolute가 기준으로 잡고있는 relative의 height의 반만큼에 위치하라
transform의 50% : 기준인 자기자신의 반만큼(50%) 올라가거나, 내려가라

text-align

inline, inline block이나 text요소의 배치

text-align: right;
text-align: center;

etc..

margin

block타입의 경우 margin에대해 따로 설정을 안하게 되면 디폴트로 margin이 오른쪽에 몰려서 정렬된다.
그렇기 때문에 특히 width값을 준 요소의경우, 가운데로 위치시키고 싶다면 한쪽에 몰린 margin을 양쪽으로 골고루 분산시켜주면 된다.

margin: 0 auto;