๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/HTML CSS

HTML ์ธ๋ผ์ธ ์š”์†Œ, ๋ธ”๋ก์š”์†Œ, ์ธ๋ผ์ธ๋ธ”๋ก

by KASSID 2022. 1. 5.

๋ชฉ์ฐจ

    728x90

    ์ธ๋ผ์ธ(inline) ์š”์†Œ

    - ํ•œ์ค„์— ์—ฌ๋Ÿฌ๊ฐœ ๋ฐฐ์น˜

    - ๊ธฐ๋ณธ ๋„ˆ๋น„๊ฐ’ = ์ปจํ…์ธ  width๊ฐ’

    - ํฌ๊ธฐ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์—†์Œ

    - ์ƒ-ํ•˜ margin X (์ขŒ์šฐ O)

    (text์„œ์‹)

     

    ๋ธ”๋ก(block) ์š”์†Œ

    - ํ•œ์ค„์— only One

    - ๊ธฐ๋ณธ ๋„ˆ๋น„๊ฐ’ = 100%

    - ํฌ๊ธฐ๊ฐ’ O

    - ์ƒํ•˜์ขŒ์šฐ margin O

    (๋ ˆ์ด์•„์›ƒ)

     

    ์ธ๋ผ์ธ ๋ธ”๋ก(inline-block) ์š”์†Œ

    - ํ•œ์ค„์— ์—ฌ๋Ÿฌ๊ฐœ

    - ๊ธฐ๋ณธ ๋„ˆ๋น„๊ฐ’ = ์ปจํ…์ธ  width๊ฐ’

    - ํฌ๊ธฐ๊ฐ’ O

    - ์ƒํ•˜์ขŒ์šฐ margin O

     

     

    ์ธ๋ผ์ธ ๋ธ”๋ก ์ธ๋ผ์ธ-๋ธ”๋ก
    span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, abbr, time div, p, table, blockquote, ul, ol, li, dl, dd, table, tr, td, th, form, hr, h1~h6, header, nav, footer, main, section, article, asid, figure, figcaption, summery, details, address img, input, button, textarea, select, Font Icon(๋Œ€๋ถ€๋ถ„), video, audio, iframe

     


    ์˜ˆ์‹œ์™€ ํ•จ๊ป˜

    ์ธ๋ผ์ธ ์š”์†Œ

    ์ธ๋ผ์ธ ์š”์†Œ์˜ ํŠน์ง•์„ ํ•œ ๋ฒˆ ์•Œ์•„๋ณด์ž

    <a href="http://www.naver.com">๋„ค์ด๋ฒ„</a>
    <a href="http://www.google.com">๊ตฌ๊ธ€</a>
    <a href="http://www.daum.net">๋‹ค์Œ</a>
    a { /*ํ† ๋ง‰์ƒ์‹ : aํƒœ๊ทธ๋Š” ์œ ์ผํ•˜๊ฒŒ body์˜ ์ปฌ๋Ÿฌ์ง€์ • ๋”ฐ๋ฅด์ง€ ์•Š์Œ*/
        color: black;
        text-decoration: none;
        border: 1px solid red;
    }

    ์ธ๋ผ์ธ์š”์†Œ ์ค‘์— ํ•˜๋‚˜์ธ aํƒœ๊ทธ์ด๋‹ค.

    width์™€ height ๊ฐ’์„ ๋”ฐ๋กœ ์ง€์ •ํ•˜์ง€ ์•Š๊ณ  border ์†์„ฑ์„ ์ฃผ์—ˆ์„ ๋•Œ

    content์˜ ๋„ˆ๋น„์— ๋งž๊ฒŒ ์œค๊ณฝ์„ ์ด ์ƒ๊ธด ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. (๊ธฐ๋ณธ ๋„ˆ๋น„๊ฐ’= ์ปจํ…์ธ  width๊ฐ’)

     

    a { 
        color: black;
        text-decoration: none;
        border: 1px solid red;
        width: 400;
        height: 300px;
        margin: 50px;
    }

    ํฌ๊ธฐ ๊ฐ’์„ ์ง€์ •ํ•˜๊ณ  margin๊ฐ’์„ ๋„ฃ์–ด๋ณด์•˜๋‹ค.

    width, height๋Š” ์ ์šฉ์ด ๋˜์ง€ ์•Š์€ ๋ชจ์Šต์ด๊ณ , (ํฌ๊ธฐ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์—†์Œ)

    margin ๊ฐ’์€ ํ•˜๋‚˜๋ฅผ ๋„ฃ์—ˆ์„ ๋•Œ ์ƒ-ํ•˜-์ขŒ-์šฐ ๊ฐ€ ๋™์ผํ•˜๊ฒŒ ์ ์šฉ์ด ๋˜์–ด์•ผ ํ•˜์ง€๋งŒ

    ์ขŒ,์šฐ ๋งŒ ์ ์šฉ์ด ๋˜์—ˆ๋‹ค. (์ƒ-ํ•˜ margin X (์ขŒ์šฐ O))


    ๋ธ”๋ก ์š”์†Œ

    ์ด๋ฒˆ์—๋Š” ๋ธ”๋ก์š”์†Œ!

    <div></div>
    <div></div>
    <div></div>
    div {
        border: 1px solid red;
    }

    ๋ธ”๋ก ์š”์†Œ์ธ divํƒœ๊ทธ์ด๋‹ค.

    border ์†์„ฑ๋งŒ ์ฃผ๊ณ  ํฌ๊ธฐ ๊ฐ’์„ ์ง€์ •ํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ

    width์˜ ๊ธฐ๋ณธ๊ฐ’์ด 100%๋กœ ์ง€์ •๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. (๊ธฐ๋ณธ ๋„ˆ๋น„๊ฐ’ = 100%)

     

    div {
        border: 1px solid red;
        width: 100px;
        height: 100px;
        margin: 50px
    }

    ํฌ๊ธฐ ๊ฐ’์„ ๋„ฃ์–ด์ฃผ์—ˆ๋‹ค. (ํฌ๊ธฐ๊ฐ’ ์ ์šฉ ๊ฐ€๋Šฅ)

    ์ธ๋ผ์ธ ์š”์†Œ์™€ ๋‹ฌ๋ฆฌ ์ž˜ ์ ์šฉ์ด ๋˜์—ˆ๊ณ , ๊ฐ ์š”์†Œ๊ฐ€ ์„ธ๋กœ๋กœ, ํ•œ ์ค„์— ํ•˜๋‚˜์”ฉ ๋ฐฐ์น˜๋˜์–ด์žˆ๋‹ค.

    ๋˜ํ•œ margin๊ฐ’์ด ์ƒํ•˜ ์ขŒ์šฐ๋กœ ๋™์ผํ•˜๊ฒŒ ๋“ค์–ด๊ฐ„ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. (์ƒํ•˜์ขŒ์šฐ margin O)


    ์ธ๋ผ์ธ-๋ธ”๋ก

    ๋งˆ์ง€๋ง‰์œผ๋กœ ์ธ๋ผ์ธ-๋ธ”๋ก ์š”์†Œ

    <img src="images/google.png" alt="">
    <img src="images/naver.png" alt="">
    <img src="images/daum.png" alt="">
    img {
        border: 1px solid red;
    }

    ์ธ๋ผ์ธ-๋ธ”๋Ÿญ ์š”์†Œ ์ค‘ ํ•˜๋‚˜์ธ imgํƒœ๊ทธ์ด๋‹ค.

    borderํŠน์„ฑ๋งŒ ์ค€ ์ƒํƒœ์ธ๋ฐ

    3๊ฐœ์˜ ์ด๋ฏธ์ง€๊ฐ€ ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜๋˜์–ด์žˆ๊ณ , (ํ•œ์ค„์— ์—ฌ๋Ÿฌ๊ฐœ)

    ์œค๊ณฝ์„ ์ด ์ด๋ฏธ์ง€์— ๋”ฑ ๋งž๊ฒŒ ์„ค์ •์ด ๋˜์–ด์žˆ๋‹ค. (๊ธฐ๋ณธ ๋„ˆ๋น„๊ฐ’ = ์ปจํ…์ธ  width๊ฐ’)

     

    img {
        border: 1px solid red;
        height: 50px;
        width: 200px;
        margin: 20px;
    }

    ์ด๋ฒˆ์—” ํฌ๊ธฐ ๊ฐ’๋„ ์ง€์ •ํ•˜๊ณ , margin๊ฐ’์„ ์ฃผ์—ˆ๋‹ค.

    width, height ๊ฐ’์ด ์ ์šฉ์ด ๋œ ๋ชจ์Šต์ด๊ณ , (ํฌ๊ธฐ๊ฐ’ O)

    margin๋„ ์ƒํ•˜์ขŒ์šฐ๊ฐ€ ๋™์ผํ•˜๊ฒŒ ์ ์šฉ์ด ๋˜์—ˆ๋‹ค. (์ƒํ•˜์ขŒ์šฐ margin O)

     


    3๊ฐœ์˜ ์š”์†Œ๋ฅผ ์„œ๋กœ์„œ๋กœ ๋ณ€ํ™˜?!

     

    ์ง€๊ธˆ๊นŒ์ง€ 3๊ฐ€์ง€ ์ข…๋ฅ˜์˜ ์š”์†Œ๋ฅผ ์•Œ์•„๋ณด์•˜๋Š”๋ฐ

    ์ด ์„ธ๊ฐ€์ง€ ์š”์†Œ๋ฅผ ๋ณ€ํ™˜์„ ํ•˜๋ฉฐ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ๋ฐ”๋กœ display ์†์„ฑ์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ!

     

    display์— ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’

    : block, inline-block, inline, none, flex

     

    ์˜ˆ์‹œ

    <a href="http://www.google.com">๊ตฌ๊ธ€</a>
    <a href="http://www.naver.com">๋„ค์ด๋ฒ„</a>
    <a href="http://www.daum.com">๋‹ค์Œ</a>
    a {
        color: #000;
        text-decoration: none;
        border: 1px solid rgb(201, 201, 201);
    }

     

    ์ธ๋ผ์ธ ์š”์†Œ์ธ aํƒœ๊ทธ์ด๋‹ค.

    ์ด๊ฒƒ์„ display๋ฅผ ์ด์šฉํ•ด ๋ธ”๋ก ์š”์†Œ๋กœ ๋ฐ”๊พธ์–ด๋ณด๋ฉด?

    a {
        color: #000;
        text-decoration: none;
        border: 1px solid rgb(201, 201, 201);
        display: block;
    }

     

    ๋ธ”๋Ÿญ์š”์†Œ์˜ ํŠน์ง•์ธ ํ•œ ์ค„์— ํ•˜๋‚˜, width ๊ธฐ๋ณธ๊ฐ’ 100%๊ฐ€ ์ ์šฉ๋œ ๋ชจ์Šต์ด๋‹ค.

    a {
        color: #000;
        text-decoration: none;
        border: 1px solid rgb(201, 201, 201);
        display: block;
        width: 200px;
        margin: 5px;
        padding: 5px;
        text-align: center;
        border-radius: 5px;
    }

     

    ์œ„์ฒ˜๋Ÿผ ๋ธ”๋ก์š”์†Œ๋กœ ๋ฐ”๊ฟ”์„œ ํฌ๊ธฐ๊ฐ’, ์ƒ-ํ•˜ margin ๋“ฑ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ํ•˜์ง€๋งŒ ๋ธ”๋ก์š”์†Œ๋Š” ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜๋ฅผ ํ•  ์ˆ˜ ์—†๋‹ค. 

     

    ์ด๋ฒˆ์—” ์ธ๋ผ์ธ-๋ธ”๋ก ์š”์†Œ๋กœ ๋ฐ”๊พธ์–ด๋ณด๋ฉด?

    a {
        color: #000;
        text-decoration: none;
        border: 1px solid rgb(201, 201, 201);
        display: inline-block;
        width: 200px;
        margin: 5px;
        padding: 5px;
        text-align: center;
        border-radius: 5px;
    }

     

    ๊ฐ€๋กœ๋กœ ์ž˜ ๋ฐฐ์น˜๊ฐ€ ๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

     

     

    ์ด๋Ÿฐ ์‹์œผ๋กœ ์ž์‹ ์ด ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๋ฐฉ์‹๋Œ€๋กœ

    ์ธ๋ผ์ธ, ๋ธ”๋ก, ์ธ๋ผ์ธ-๋ธ”๋ก์„ ์„ ํƒํ•˜๋ฉด ๋œ๋‹ค!

     

    ๋Œ“๊ธ€