2021-04-20 (8일차) img 속성과 사이즈 조절 방법

35강~38강

 

- img

  열고 닫는 구조가 아닌 하나짜리이다.
  자식을 가질 수 없다.
    ex) <img src="이미지URL" alt="">

  display는 inline이다.

  이미지는 고유의 비율이 있음

    → 너비나 높이 하나의 값만 줘도 정비례로 커짐

    → 너비와 높이 두개에 값을 준다면 비례가 달라짐

 

- 너비와 높이 두개에 값을 줘서 비례가 안 맞을 때

  - object-fit : contain;

    → 비율이 유지되게 커짐

 

  - object-fit : cover;

    → 빈공간이 없이 커짐

  - object position

    : 보이는 부분을 조정하는 것

      ex) object-position : 0% 50%;

      ex) object position : right top; 

 

 

#문제. 이미지 6개를 3x2 가운데 정렬로 배열해주세요.
         조건 : 이미지간의 여백 50px, 모든 이미지의 크기는 같아야 함

버전1) nbsp와 br사용 div에 이미지 6개 감싸기

  <div><img><img><img><img><img><img></div>

버전2) nbsp와 br 사용, div 하나에 이미지를 3개씩 감싸기

  <div><img><img><img></div> <div><img><img><img></div>

버전3) nbsp 사용, br사용금지, div 하나에 이미지를 3개씩 감싸기, div 사이에 section 넣고 높이 지정

  <div><img><img><img></div> <section></section> <div><img><img><img></div>

버전4) nbsp 사용, div 하나에 이미지를 3개씩 감싸기, div 사이에 nav 넣고 인라인 CSS로 높이 지정

  <div><img><img><img></div> <nav style=""></nav> <div><img><img><img></div>

버전5) nbsp와 br 사용 금지, 이미지 사이에 nav 태그 넣기

  <div><img><nav></nav><img><nav></nav><img></div>

  <nav style=""></nav>

  <div><img><nav></nav><img><nav></nav><img></div>

버전6) nbsp와 br 사용 금지, 각각의 이미지를 nav 태그로 감싸기

  <div><img><nav></nav><img><nav></nav><img></div>

  <section style=""></section>

  <div><img><nav></nav><img><nav></nav><img></div>

 

- margin (-left, right, top, bottom :px;)

  바깥쪽으로 여백을 줌

 

- padding (-left, right, top, bottom :px;)

  안쪽으로 여백을 줌

 

- a, span (img 제외)

  width, height, margin, padding값 안 먹음

  때문에 display에 block이나 inline-block을 줘야함

 

#문제. 이미지6개를 margin과 padding을 이용하여 3X2 가운데 정렬로 배열해주세요.