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태그들을 추가해 보겠습니다.