Hiio.com

  Main Image  

- 계속해서 이번 포스팅에서는 mainimg 부분에 이미지를 삽입해 완성하겠습니다.

- 이미지를 삽입 하기 위해서는 <img> 태그를 사용합니다.

- Main Image에 삽입할 이미지는 아래의 이미지를 사용합니다.

- 이미지는 아래의 링크를 통해 들어가면 무료 이미지 사이트들을 몇군데 모아놨습니다.

- 마음에 드는 사이트에 들어가 이미지를 다운로드 받은 후 제가 원하는 데로 편집했습니다.

무료 이미지 사이트 모음

- 이제 아래의 단계별로 진행해 보겠습니다.

  단계  

1. index.html에 img 태그 추가 및 이미지 삽입

2. Main Image 크기 및 위치 지정

3. 레이아웃 완성

  1. index.html에 img 태그 추가 및 이미지 삽입  

- mainimg div 태그 안에 img 태그를 삽입합니다.

        <div id='mainimg'>Main image
            <img src="" alt="">
        </div>

- src 속성값으로 이미지 경로를 지정해 줍니다.

- 이미지는 static 디렉토리 > img 디렉토리 > main 디렉토리 안에 있습니다.

        <div id='mainimg'>Main image
            <img src="../static/img/main/main_img.jpg" alt="">
        </div>

- alt 속성값으로 대체 문자를 입력해 줍니다.

        <div id='mainimg'>Main image
            <img src="../static/img/main/main_img.jpg" alt="MainImage">
        </div>

- 이미지가 삽입 되었습니다.

- 하지만 크기가 맞지를 않네요.

- css를 통해서 크기와 위치를 조정합니다.

  2. Main Image 크기 및 위치 지정  

- 먼저 이미지 크기를 확인해 보겠습니다.

- 가로 600px * 높이 526px입니다.

- 이 값에 맞춰 mainimg div 크기를 수정합니다.

#mainimg {
    width: 600px;
    height: 526px;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    border: 1px solid gray;
}

- 이제 이미지를 mainimg div 가로 크기에 맞춰 넣습니다.

-<img> max-width 값을 지정합니다.

#mainimg > img{
    max-width: 100%;
}

- 자식 선택자로 img 태그를 선택해 줬습니다.

- img 태그를 바로 선택해 값을 지정하게 되면 모든 img 태그에 값이 부여 될 수 있습니다.

- 이미지가 Main Image 안으로 잘 들어 간것을 확인 할 수 있습니다.

- 이제 위치를 지정해줍니다.

- 먼저 위치를 확인해 보겠습니다.

- left 610px 입니다.

- top 값은 이전과 마찬가지의 방법을 사용합니다.

- main 높이 / 2 - mainimg 높이 /2 - 50 = 112px

#mainimg {
    width: 600px;
    height: 526px;
    position: absolute;
    top: 112px;
    left: 610px;
    border: 1px solid gray;
}

- 위치가 자 지정 되었지만 Main Image가 Main Text 뒤로 이동 해야 합니다.

- 컨텐츠의 배치를 바꾸는 방법에는 태그 순서를 바꾸거나 css 에서 z-index를 사용하는 방법들이 있습니다.

- 먼저 기존에 태그들이 어떻게 위치 하고 있는지 확인해 보겠습니다.

        <div id='maintext'>Welcome to My PortFolio</div>
        <div id="mainsubtext">
            <p>Breath</p>
            <p>- Everything will be made by me.</p>
        </div>
        <div id='mainimg'>Main image
            <img src="../static/img/main/main_img.jpg" alt="MainImage">
        </div>

- mainimg div 태그가 maintext div 태그 아래에 위치함을 확인했습니다.

- mainimg div 태그를 maintext div 태그 위로 위치 시켜 보겠습니다.

        <div id='mainimg'>Main image
            <img src="../static/img/main/main_img.jpg" alt="MainImage">
        </div>
        <div id='maintext'>Welcome to My PortFolio</div>
        <div id="mainsubtext">
            <p>Breath</p>
            <p>- Everything will be made by me.</p>
        </div>

- maintext 뒤로 이동하였네요.

- 이제 태그 이동없이 z-index값을 주어 이동시켜 보겠습니다.

- maintext z-index 값으로 2 / mainimg z-index 값으로 1를 줍니다.

#maintext {
    position: absolute;
    top: 345px;
    left: 240px;
    font-size: 60px;
    color: #f41f56;
    font-weight: 700;
    border: 1px solid gray;
    z-index: 2;
}

#mainimg {
    width: 600px;
    height: 526px;
    position: absolute;
    top: 112px;
    left: 610px;
    border: 1px solid gray;
    z-index: 1;
}

- 마찬가지로 잘 이동 되었음을 확인 할 수 있습니다.

  3. 레이아웃 완성  

- 이제 border 값과 필요없는 텍스트들을 제거해서 전체적인 레이아웃을 확인하고 완성하겠습니다.

- 원하는 모습으로 잘 나온것 같습니다.

- 하지만 조금 아쉽습니다.

- 왼쪽 여백과 오른쪽 여백이 맞지 않습니다.

-mainimg div를 왼쪽으로 이동시켜 main 오른쪽부분으로 맞추겠습니다.

-main 가로 크기는 1440px이고 mainimg 가로크기는 600px 입니다. 

- left 값으로 1440px - 600px = 840px값을 지정해 줍니다.

#mainimg {
    width: 600px;
    height: 526px;
    position: absolute;
    top: 112px;
    left: 840px;
    z-index: 1;
}

- 기존에 left 값은 610px 이였습니다. 230px만큼 이동 하였습니다.

- maintext 와 mainsubtext 의 left 값을 230px 만큼 더해 줍니다.

#maintext {
    position: absolute;
    top: 345px;
    left: 470px;
    font-size: 60px;
    color: #f41f56;
    font-weight: 700;
    z-index: 2;
}

#mainsubtext {
    position: absolute;
    top:460px;
    left:470px;
    width : 230px;
}

- 이제 완성 되었습니다. 

- 다음 포스팅에는 Nav항목에 a태그들을 추가해 보겠습니다.

안녕하세요. 

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

보통 그림이나 사진을 넣기 위해서는 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효과를 적용해 보도록 하겠습니다.