img태그

웹에 img태그를 이용하여서 이미지를 추가할 수 있는데

이 sec=""부분에 원하는 이미지의 주소를 입력하면 이미지가 나온다.
lorem picsum(https://picsum.photos/)라는 사이트를 이용해서 이미지를 가져올건데

여기서 랜덤한 이미지를 불러올수도 임의로 사이즈를 정할 수 있어서 연습할 시 좋다.

이미지를 css속성을 이용하여 높이와 넓이를 조절할 수 있지만 이미지는 각각의 정해진 비율이 있기 때문에 높이만 정해주거나 넓이만 정해줬을 때에는 이미지의 비율대로 자동으로 높이, 넓이가 조절 된다.
!codepen[hapym0202/embed/ZEgzmKX?default-tab=html%2Cresult]

만약에 높이와 넓이를 동시에 주어서 비율에 넘어갔을 때에는 비율이 무너지게되는데
이 때에는 object-fit 속성을 사용하면 된다.
object-fit:cover;를 사용하면 엘리먼트의 크기에 여백없이 비율이 맞게 채워지고
object-fit:contain;을 사용하면 여백이 생기며 이미지가 엘리먼트 안에 들어간다.

margin,padding

아주 중요한 개념이 나오는데,바로 margin과 padding이다.
엘리먼트가 사각형이라면 이 사각형에서 content의 영역을 뺀 부분padding이 이고
이 사각형 밖의 영역을 margin이라고 한다.

엘리먼트를 중앙에 배치하고 싶을 때, margin-left,margin-right에 auto를 주게 되면 두 값은 자동으로 동일한 값을 가지게 되어 엘리먼트가 중앙에 오게 된다.

nth-child

우리가 웹을 구성하게 되면 그것을 구성하는 태그들은 어마어마하게 많은데 우리가 사용하는 div,article,nav,section 태그들만 사용하게 되면 css속성을 사용하기 어렵다. 왜냐하면 이름이 중복되는 태그들이 많을 것이기 때문이다.
nth-child, nth-last-child, first-child, last-child라는 가상 선택자를 사용하면 조금 더 특정하게 css속성을 사용할 수 있게 된다.
div:nth-child -> 부모한테 속한 요소중 n번째 요소
div:nth-last-child -> 부모한테 속한 요소중 마지막에서 n번째 요소
div:first-child -> 부모한테 속한 요소중 첫번째 요소
div:last-child -> 부모한테 속한 요소중 마지막 요소