HTML 응용(1) - element들 간의 관계, 이미지 삽입하기

이번 포스팅에서는 앞서 배웠던 html 엘리먼트들을 활용하는 법에 대해 다루도록 하겠다.

<목차>

엘리먼트들 간의 관계
이미지 삽입하기

<엘리먼트들 간의 관계>

엘리먼트들 사이의 관계에 대해 얘기하기 전에 우선 다음과 같은 코드로 html과 css를 작성하였다고 하자.

<!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">
    <title>Document</title>

    <link href=".\css\practice.css" type="text/css" rel="stylesheet">    
</head>
<body>
    <div id="wrap">
        안녕하세요
    </div>
    <div id="header">
        환영합니다.
    </div>
</body>
</html>

/* CSS style sheet */

*{
    margin:0;
}

#wrap{
    background: red;
    height:500px;
    width:500px;
}

#header{
    background: yellow;
    height:250px;
    width:250px;
}

해당 코드를 실행한 결과는 아래와 같은 모습을 띠고있다.

앞서 배웠던 것처럼 <body>엘리먼트 안에 두개의 <div>를 작성 할 경우 페이지에 두개의 영역이 블럭 속성으로 자리잡게 된다. 그렇다면 두개의 <div>를 나란히 같은 계급으로 작성하지 않고 <div> 안에 또 다른 <div>를 넣는 경우에는 어떤 식으로 페이지가 나타나게 될까? 즉, 특정 엘리먼트 안에 똑같은 엘리먼트를 작성할 경우 어떤 결과값이 출력되게 되는 것일까?

<!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">
    <title>Document</title>

    <link href=".\css\practice.css" type="text/css" rel="stylesheet">    
</head>
<body>
    <div id="wrap">
        안녕하세요
        <div id="header">
            환영합니다.
        </div>
    </div>
</body>
</html>

위의 코드처럼 <div>안에 <div>를 작성하게 되면 두개의 <div> 사이에서 부모 자식 관계가 만들어진다. 두개의 <div>가 같은 계급으로 존재하는 것이 아니라 상위 <div>는 부모 자격으로 하위 <div>는 자식 자격으로 존재하게 되는 것이다. 해당 코드를 실행한 결과는 아래와 같이 출력된다.

출력된 페이지를 살펴보면 <div id="wrap"> 안에 <div id="header">가 들어가 있는 것을 확인할 수 있다. 짚고 넘어가야 할 중요한 사실은 부모 자격을 갖는 <div id="wrap"> 안에서만 <div id="header">가 존재한다는 것이다. (여기서 블럭 속성과 width의 차이에 대해 알고 있어야 하는데 해당 내용은 css 파트에서 다루도록 하자.)

또 한가지 중요한 것은 <div> 안에 다른 <div>들이 존재하더라도 <div>의 내용이 왼쪽 상단 위에서 시작하는 것은 변함이 없다는 사실이다. <div>의 기준점은 "무조건 왼쪽 상단 끝"이기 때문에 <div>가 여러개 필요한 경우 우리는 정렬을 통해서 화면을 꾸며주게 된다. <div>를 정렬하는 자세한 방법에 대해서는 CSS 파트에서 다루도록 하고 여기서는 html에서 엘리먼트 안에 똑같은 엘리먼트가 들어갔을 때 어떠한 형태로 웹 페이지 상에 나타나는지에 대해서만 알아보고 넘어가고자 한다.

이렇게 부모, 자식 관계가 만들어진 두개의 <div>에서 부모 자격을 갖는 <div id="wrap">이 이동하게 되면 과연 자식 자격을 가지고 있는 <div id="header">는 어떻게 될까?

/* CSS style sheet */

*{
    margin:0;
}

#wrap{
    background: red;
    height:500px;
    width:500px;
    margin: 0 auto;
}

#header{
    background: yellow;
    height:250px;
    width:250px;
}

#wrap{ } 부분에 margin: 0 auto; 를 추가하면 아래와 같은 화면이 나타나게 된다.

(cf) 여기서 margin: 0 auto; 는 위,아래 margin값을 0으로 왼쪽,오른쪽의 margin값을 자동으로 맞추어 양쪽정렬을 하는 효과를 가져온다. 가운데 정렬을 하고 싶을 때 사용하는 속성이다.

출력된 결과물을 보면 알 수 있듯이 부모 자격을 갖고 있는 <div id="wrap">이 이동하자 자식 자격을 가진 <div id="header">가 따라서 이동하는 것을 볼 수 있다. 왼쪽 상단 끝을 기준점으로 간직한 채 부모 엘리먼트가 이동한 것과 똑같이 자식 엘리먼트도 이동한 것을 확인할 수 있다.

해당 내용들을 요약하면 다음과 같다.

엘리먼트들 간에 부모, 자식 관계가 만들어질 수 있다.
부모 엘리먼트가 누구인지에 따라 자식 엘리먼트가 시작하는 위치가 다르다.
부모 엘리먼트가 이동하면 자식 엘리먼트도 따라서 같이 이동한다.

<이미지 삽입하기>

html 코드를 통해 이미지를 삽입하기 위해서는 이미지를 삽입하고자 하는 영역의 엘리먼트 안에서 <img>엘리먼트를 작성해주면 된다. 아래의 코드를 통해 살펴 보도록 하자.

<!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">
    <title>Document</title>

    <link href=".\css\practice.css" type="text/css" rel="stylesheet">    
</head>
<body>
    <div id="wrap">
        안녕하세요
        <div id="header">
            환영합니다.
        </div>
    </div>
    <div id="visual">
        <img src=".\blockchain.jpg" alt="blockchain image">
    </div>
</body>
</html>

/* CSS style sheet */

*{
    margin:0;
}

#wrap{
    background: red;
    height:500px;
    width:500px;
    margin: 0 auto;
}

#header{
    background: yellow;
    height:250px;
    width:250px;
}

#visual{
    width:563px;
    height:375px;
    margin: 0 auto;
}

<div id="visual">엘리먼트 안에 <img>엘리먼트를 작성하여 <div id="visual">엘리먼트가 가지는 블럭 안에 이미지가 삽입되도록 하였다. 삽입하고자 하는 이미지의 사이즈만큼 <div id="visual">엘리먼트의 블럭에서 컨텐츠가 들어가는 영역을 width와 height로 조절해 주었고 margin: 0 auto;를 사용하여 가운데 정렬을 해주었다.

웹페이지 상에 출력된 결과값은 아래와 같다.

이제 마지막으로 <img>엘리먼트에 들어가는 속성에 대해 알아보도록 하자.

<img>엘리먼트는 기본적으로 다음의 두가지 속성을 가진다.

src="경로" : src의 속성값으로 삽입하고자 하는 이미지 파일의 경로를 작성.
alt="설명" : alt의 속성값으로 삽입하고자 하는 이미지에 대한 설명이나 내용을 작성.

<img>엘리먼트의 속성 중에서 alt는 그 값이 없다고 해서 기능적으 다르게 보여지거나 처리되는 것이 없다. <img src=".\blockchain.jpg">로 작성하여도 기능상 아무런 차이가 없다.

'HTML' 카테고리의 다른 글

HTML 응용 - <table> , <input> , <form> 엘리먼트를 활용해 게시판 형식 만들기 (1)	2021.12.29
HTML의 기초(4) - <label> 엘리먼트 (0)	2021.12.27
HTML의 기초(3) - table 생성하기 (0)	2021.12.21
HTML 코드 (1)~(2) (0)	2021.12.20
HTML의 기초(2) - <a>, <input> element (0)	2021.12.20

<목차>

<엘리먼트들 간의 관계>

<이미지 삽입하기>

'HTML' 카테고리의 다른 글

티스토리툴바