묻고답하기
고수님들 html도와주세요ㅜㅜㅜㅜㅜㅜㅜ
2018.11.12 21:42
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>홈페이지 실습</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link href="layout.css" rel="stylesheet">
</head>
<body topmargin="0" leftmargin="0">
<div class="sec">
<div class="service">
<img src="BG/BackGround2.jpg">
<div class="box">
<a href="https://www.python.org/downloads/">
<img src="IC/icon-1.png"><br>Main Drag
</a>
</div>
<div class="box">
<a href="https://good12388.wixsite.com/mysite">
<img src="IC/icon-2.png"><br>Learning Machine
</a>
</div>
<div class="box">
<a href="https://www.naver.com/">
<img src="IC/icon-3.png"><br>An End
</a>
</div>
<div class="box">
<a href="https://www.naver.com/">
<img src="IC/icon-5.png" style="width: 110px;"><br>Sweet Talk
</a>
</div>
<div class="box">
<a href="https://www.naver.com/">
<img src="IC/icon-4.png" style="width: 80px; height: 80px;"><br>Inquire
</a>
</div>
<div class="icon">
<a href="joinus.html">
<img class="icon1"src="IC/joinus.png"><br>Join Us
</a>
</div>
<div class="icon">
<a href="login.html">
<img class="icon2"src="IC/login.png"><br>Log In
</a>
</div>
<div class="icon">
<a href="https://www.naver.com/">
<img class="icon3"src="IC/mypage.png"><br>My Page
</a>
</div>
</div>
</div>
</body>
</html>
지금 제가 코딩한 페이지가 이런데요....
질문1: 결과를 보면 배경 이미지 밑에 하얀 빈 공간이 뜨는데, 이건 div를 설정해놔서 그런 것같아요...저 상태 그대로 하얀 공간만 없앨 수 있는 방법이 있을까요...?
질문2: 결과를 보면 아시겠지만 하얀 공간에 제가 써놓은 Join Us, Log In, My Page가 있어요;;;;이거 어떻게 해야 아이콘 밑으로 옮길 수 있나요..?
p.s: 저기 있는 아이콘들은 다른 곳에서 퍼온게 아니라 제가 일러스트레이터로 만든 것입니다!
제가 올린 질문 외에도 잘못된 부분이 있다면 지적해 주세요ㅠㅠ
감사합니다!
배경이미지 밑에 약간의 공간이라기 보다는 이미지 밑에 약간의 공간이 될거 같습니다. 달리 배경이미치 처리는 안한거 같아서
이런 문제가 발생하는 이유는 html5에서는 display에 inline 속성이 있으면 line-height가 잡히면서 하단에 줄이생깁니다.
지금상황에서는 가장 간편한 해결책이
css에서 img{vertical-align:middle;} 처리를 하시면 문제 해결이 될겁니다.