Main Image
- 계속해서 이번 포스팅에서는 mainimg 부분에 이미지를 삽입해 완성하겠습니다.
- 이미지를 삽입 하기 위해서는 <img> 태그를 사용합니다.
- Main Image에 삽입할 이미지는 아래의 이미지를 사용합니다.
- 이미지는 아래의 링크를 통해 들어가면 무료 이미지 사이트들을 몇군데 모아놨습니다.
- 마음에 드는 사이트에 들어가 이미지를 다운로드 받은 후 제가 원하는 데로 편집했습니다.
[Web] 무료 이미지 사이트 모음 - Free image website ##1
1. pixabay 2.freepik Freepik | Graphic Resources for everyone Discover millions of copyright-free vectors, photos and PSD www.freepik.com 3.unsplash Beautiful Free Images & Pictures | Unsplash Bea..
hiio.tistory.com
- 이제 아래의 단계별로 진행해 보겠습니다.
단계
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태그들을 추가해 보겠습니다.
'Web > 포트폴리오 프로젝트' 카테고리의 다른 글
| [Web]포트폴리오 웹사이트 제작 - 9 .css reset - css 속성 초기화 (0) | 2020.10.14 |
|---|---|
| [Web]포트폴리오 웹사이트 제작 - 8 . <a> 태그 - nav 리스트 -하이퍼 링크 / 정적 / 동적 라우팅 (0) | 2020.10.14 |
| [Web]포트폴리오 웹사이트 제작 - 6 . 레이아웃 구성 (5) - main / Main Text 추가 (0) | 2020.10.13 |
| [Web]포트폴리오 웹사이트 제작 - 5 . 레이아웃 구성 (4) - 구글 폰트 사용하기 / Noto Sans KR (0) | 2020.10.13 |
| [Web]포트폴리오 웹사이트 제작 - 4 . 레이아웃 구성 (3) - 전체 디자인 / main 컨텐츠 수정 - sidebar (0) | 2020.10.13 |
