html , css

html,css 연습(1) border, margin, padding 식당

고로케 2021. 5. 28.

만들 html 페이지 정보

1. font 불러오기, 배경색 설정(css)

@font-face{
  src:url("../fonts/BMJUA_otf.otf");
  font-family: jua;
}
* {
  box-sizing: border-box;   
  # border 사이즈를 안쪽 padding, margin 과 상관없이 고정해주는 옵션
}
body{
  background-color: #f0e8d9;
}

2. 맨 위 타이틀 작성

<html>

<body>
  <h1 class="title1">고로케 식당</h1>
  <h2 class="title2">맛있는거 좋아하시죠? <br>여러가지 메뉴를 고로케 만들어 드립니다</h2>

<CSS>

.title1{
  margin-top: 75px;
  margin-bottom: 0px;
  text-align: center;
  font-size: 64px;
  color: #58595b;
  font-family: jua;
}

.title2{
  margin-top: 30px;
  margin-bottom: 75px;
  text-align: center;
  font-size: 32px;
  color: #58595b;
  font-family: jua;  
}

3. 음식 사진과 설명 작성

<html>

  <div class="food">
    <img src="images/bibimbap.jpg" width="300px" height="200px">
    <div class="info">
      <h3>비빔밥</h3>
      <p>비빔밥의 나라에서 만든 수 많은 재료들이 들어간 비빔밥!!</p>
      <a href="#">바로 결제</a>
    </div>
  </div>

<CSS>

.food{
  background-color: white;
  width: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  border-radius: 10px;
  overflow: hidden;  <---- * 설명-1
  font-family: jua;
}
.food img{
  vertical-align: top;  <---- * 설명-2
}
.food h3{
  color: #58595b;
  font-size: 32px;
  margin-top: 0px;      <---- * 설명-3
  margin-bottom: 20px;
}
.food p{
  color: #58595b;
  font-size: 16px;
  text-align: left;
}
.food .info{
  padding: 20px;
}
.food a{
  text-decoration: none;	<---- * 설명-4
}

*설명 -1 : over-flow: hidden;

border-radius 값을 주게 되도 이미지의 상단은 적용이 되지 않는다.

border위로 넘어서 표시가 안되도록

넘는 부분 over-flow : hidden 으로 설정해주어 radius에 맞춰 잘리게한다.

*설명 -2 : vertical-align: top; 이미지와 글자사이의 약간의 공간 제거하기

보다시피 이미지와 글 사이에 약간의 여백이 존재한다.

이미지의 속성을 보면 inline 으로 되어있는데

글자는 자간이 존재하는데 inline은 이 속성을 가져오기 때문에

이미지 밑에 약간의 공간이 생성된 것이다.

해결 방법 -1

display : block ; 설정해준다.

.food img{
  display: block;
}

다만 수평으로 여러개의 사진이 게시 되는 형태에는 적용이 어려울 수 있다.

해결 방법 -2

vertical-aligh: top ; 옵션을 준다.

.food img{
  vertical-align: top;
}

수평으로 이미지가 배열돼도 적용 된다고 한다.

이 옵션을 줘도 display가 block 으로 바뀌면서 공간이 사라진다.

https://stackoverflow.com/questions/7774814/remove-white-space-below-image

여기에서 참고.

*설명-3 margin-top : 0px;

이 옵션 없이 적용해보면 자동으로 margin-top이 폰트 사이즈인 32px 만큼 생성된다.

따라서 margin-top : 0px ; 로 제거해주자.

*설명-4 text-decoration: none;

a태그의 href 주소는 기본값으로 링크에 밑줄이 생긴다.

text-decoration: none 으로 밑줄을 제거해주자.

(반대로 다른 글자에 밑줄은 underline 으로 생성가능)

4. 완성 코드

'html , css' 카테고리의 다른 글

Display 정리 (0)	2021.05.28
html, css 선택자 정리 class 조건 정리 (0)	2021.05.28
[html] 기본 골격 (0)	2021.05.27
background 정리 (0)	2021.05.27
border 정리 (0)	2021.05.26