Hiio.com

안녕하세요. 

이번 포스팅에서는 메인이미지 부분에 그림이나 사진을 넣어 보겠습니다.

보통 그림이나 사진을 넣기 위해서는 HTML 에서 img 태그를 사용하거나, CSS background 또는 background-image를 사용합니다.

1.img tag

우선 먼저 img 태그를 사용하여 이미지를 삽입해 보겠습니다.

1 2 3 4

<div id="main-image">mainimage     <img src="" alt=""> </div>

cs

기존에 div 태그안에 img 태그를 넣은 모습입니다. 

img 태그에는 여러가지 속성이 있습니다.

위에서는 src와 alt속성이 있는데요.

 

각 속성은

 

src : 이미지경로

alt : 이미지묘사 내용

 

입니다.

 

여기서 위에서 보이는 이미지를 한번 넣어 보겠습니다.

 

 

1

<img src="/img/%EB%85%B9%EC%A7%80%EC%A7%80%EC%97%AD.jpg" alt="메인이미지">

cs

 

src에 이미지 경로를 설정해 주었습니다.

 

 

위와같이 이미지가 들어갑니다.

하지만 width값과 height값이 없기 때문에 이미지 파일의 원래 크기대로 들어간 모습입니다.

width와 height값은 img태그 내에서도 지정해 줄수 있지만, 저는 css를 통해서 해봤습니다.

1 2 3

#main-image img {     width: 100%; }

cs

width값만 100%로 설정했을때 이미자가 가로에 꽉차게 들어가게 되었습니다. 이떄 height는 비율에 맞춰 자동으로 값이 설정 되었기때문에 main-image부분을 빠져나와 footer부분을 가리게 됩니다.

 

height 값을 같이 주게 되면, main-image크기에 맞게 비율이 조정 되어 더이상 footer를 가리지 않게 되지만, 이미지의 크기가 달라져 원래의 비율에 맞지 않게 됩니다. 

2. CSS / background

이번에는 CSS / background를 통해서 이미지를 삽입해 보겠습니다.

background에 이미지를 넣을 때는 2가지를 사용할 수 있습니다. 

background 코드에 url 속성을 주거나 

따로

background-img에 url을 이용하여 이미지를 넣을 수 있습니다.

이미지를 넣고 나서는 background-repeat / background-size / background-position...를

통해서 이미지의 반복이나 크기,위치등을 조절 할수 있습니다.

제가 원하는대로 main-image안에 이미지가 비율에 맞게 들어간 모습입니다.

하지만 원래 이미지크기와 main-image의 크기가 다르다면 이미지가 잘릴수도 있습니다.

다음에는 메인이미지에 animate효과를 적용해 보도록 하겠습니다.