이미지 스타일 지정

이미지에 스타일을 지정해주기 위해 CSS파일에서 img선택자를 입력한다.

img {}

이미지 크기 변경

width와 height속성을 사용한다. 속성값으로는 이번에도 px를 주었다.

img {
   width: 200px;
   height: 200px;
 }

이미지 모양을 원으로 바꾸기

Border-radius 속성을 사용한다. 이는 요소의 테두리(border)의 모양을 바꾼다.

테두리는 각 요소가 끝나는 지점이라고 생각하면 된다. 빨강과 흰색 사이가 테두리이다.
값으로는 100px을 준다. 원형으로 만들어주려면 최소 width와 height의 절반은 되야하는 듯 하다.

순서대로 100px, 50px, 30px로 지정한 결과이다. 100이상의 수를 입력해도 아무런 변화가 없었다.

이미지를 중앙에 위치시키기.

이미지가 텍스트처럼 취급된다고 text-align 속성을 CSS에 추가해도 이미지는 중앙으로 가지 않는다. text-align은 해당 요소의 콘텐츠를 정렬하는 속성이기 때문에 예를 들면

<p id="todays-challenge">
      Learn about the basics of web development - sepcifically dive into HTML &
      CSS. hi
    </p>

에서 콘텐츠인 Learn about the basics of web development - sepcifically dive into HTML & CSS. hi 만 중앙에 위치하게 된다.

하지만 이미지는 빈 태그, 즉 콘텐츠가 없으므로 중앙에 위치하는 것이 없다.

<img>

한 가지 방법은 CSS에서 body 요소를 대상으로 하는 코드를 작성하면 된다. img는 body에 속한 콘텐츠이기 때문이다.

body {
    text-align: center;
  }

다시 이미지 위치를 봐보면

중앙으로 바뀌었다.

+body 요소에 대한 스타일을 지정해주었으므로 body 안에 중첩되어 있는 다른 요소들의 중복되는 코드는 제거해주는 것이 좋다.