티스토리 뷰

HTML & CSS

[HTML & CSS] Supporting Content

Dongi 2021. 12. 15. 01:48

안녕하세요 동기 여러분! 오늘은 어제에 이어서 점보트론 아래에 내용을 채워주도록 하겠습니다!

 

Supporting Content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main2.css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>동기의 디아블로 2 레저렉션</title>
</head>
<body>
    <header class="container">
        <div class="row">
            <h1 class="col-md-4">디아블로 2 레저렉션</h1>
            <nav class="col-md-8">
                <p>패치 노트</p>
                <p>클래스</p>
                <p>아이템</p>
                <p>토론장</p>
            </nav>
        </div>
    </header>
    <section class="jumbotron">
        <div class="container">
            <div class="row text-center">
                <h2>동기의 디아블로 2</h2>
                <h3>패치 노트</h3>
                <a class="btn btn-primary" href="#" role="button"><b>알아보기</b></a>
            </div>
        </div>
    </section>
    <section class="container">
        <div class="row">
            <figure class="col-sm-6">
                <p>육성법</p>
                <img src="https://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-diablo-print-large.jpg"/>
            </figure>
            <figure class="col-sm-6">
                <p>세계관</p>
                <img src="https://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-0078-large.jpg"/>
            </figure>
        </div>
        <div class="row">
            <figure class="col-sm-6">
                <p>파밍장소</p>
                <img src="https://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-0125-large.jpg"/>
            </figure>
            <figure class="col-sm-6">
                <p>대악마</p>
                <img src="https://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-0119-large.jpg"/>
            </figure>
        </div>
    </section>
</body>
</html>
  • </section> 밑에 <div class="row">를 두 개 넣고 그 안에 <figure class="col-sm-6">로 네 가지의 이미지와 설명을 넣어 주었습니다.
  • <figure class="col-sm-6>는 모바일 사이즈에서도 적용이 잘 되는 sm으로 하였고 columns는 6개씩 2개로 나누어지게 설정했습니다.

 

CSS 적용 전 실행 화면

이미지들이 고유의 크기가 다 달라서 삐뚤 빼뚤 엉망인 모습입니다.

 

 

CSS 코드로 이미지를 정렬해보겠습니다.

첫 번째 CSS 코드

section .row img {
  width: 500px;
  height: 300px;
  object-fit: cover;
}
  • section이라는 태그 안에 row라는 클래스를 가진 div안의 img 태그를 위한 코드입니다.
  • width: 500px; = 이미지의 너비를 500px로 맞춤
  • height: 300px; = 이미지의 높이를 300xp로 맞춤
  • object-fit: cover; = object-fit은 이미지나 비디오 같은 요소의 크기를 어떻게 맞출지 설정하는 속성입니다. 값이 cover일 경우 이미지의 가로 세로 비율을 유지하면서 요소의 내용을 가득 채웁니다. - 비율이 일치하지 않을 경우 일부가 잘려나감.

두 번째 CSS 코드 

<p>로 쓰인 육성법과 세계관이 위에 있는 점보트론과 너무 붙어 있어서 띄워주는 코드입니다.

section .row p {
  margin-top: 50px;
}
  • section이라는 태그 안에 row라는 클래스를 가진 div안의 p 태그를 위한 코드입니다.
  • margin-top: 50px; - p태그의 내용 위에 여백을 50px 주었습니다.

 

 

모두 적용 후 실행 화면

전체 화면
창을 확 줄인 실행 화면

 

 

오늘의 느낌

세상의 진짜 악마는 사람들이 아닐까? 

디아블로와 그의 형제들... 악마들... 모두 학살당하고 있는데

고작 아이템 때문엨ㅋㅋ

 

 

이미지 출처

디아블로 3 공식 사이트 - 자료실 
링크 : https://kr.diablo3.com/ko-kr/media/artwork/?page=1
 

원화

원화 - 자료실 - 디아블로 III

kr.diablo3.com

 

'HTML & CSS' 카테고리의 다른 글

[HTML & CSS] How Websites Work  (0) 2021.12.15
[HTML & CSS] Footers  (0) 2021.12.15
[HTML & CSS] The Jumbotron  (0) 2021.12.14
[HTML & CSS] Header/Navigation  (0) 2021.12.13
[HTML & CSS] On the Grid  (0) 2021.12.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함