IT/HTML&CSS

[CSS] html+css ํ™œ์šฉ ์˜ˆ์ œ ํ’€๊ธฐ(2021-10-26)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 25.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>์˜ˆ์ œ_๋ณต์ง€ํฌํƒˆ</title>
    <link rel="stylesheet" href="./css/study1.css">
  </head>
  <body>
    <!-- ์ „์ฒด -->
    <div class="wrap">
      <!-- ์ƒ๋‹จ -->
      <header>
        <h1><a href="#"><img src="./images/title_3.gif" alt="๋ณต์ง€ํฌํ„ธ๋กœ๊ณ "></a></h1>
        <p>Home>์šฐ์ •๋ณต์ง€์ฆ์ง„>๋ณต์ง€ํฌํ„ธ์‚ฌ์ดํŠธ</p>
      </header>
      <!-- ์ฝ˜ํ…์ธ  -->
      <div class="con1">
        <div class="leftbox">
          <img src="./images/img_01.gif" alt="๋ณต์ง€ํฌํƒˆ์†Œ๊ฐœ๋ฉ”์ผํŽ˜์ด์ง€์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€">
        </div>
        <div class="rightbox">
          <h3><img src="./images/title_4.gif" alt="์šฐ์ •์‚ฌ์—…๋ณธ๋ถ€ ๋ณต์ง€ํฌํƒˆ ์‚ฌ์ดํŠธ"></h3>
          <h4><img src="./images/title_5.gif" alt="๋ณต์ง€ํฌํƒˆ์‚ฌ์ดํŠธ ์†Œ๊ฐœ"></h4>
          <p>๋งž์ถคํ˜• ๋ณต์ง€์ œ๋„๋กœ ์ผ๋ฐฉ์ ์œผ๋กœ ์ œ๊ณต๋˜๋Š” ๊ธฐ์กด ๋ณต์ง€ ์„œ๋น„์Šค์™€๋Š” ๋‹ฌ๋ฆฌ ์šฐ์ •์‚ฌ์—…๋ณธ๋ถ€ ๋ณต์ง€ํฌํƒˆ ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด ์šฐ์ •์ข…์‚ฌ์ž๋“ค์˜ ์„ ํ˜ธ์™€ ํ•„์š”์„ฑ์— ๋”ฐ๋ผ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ž์‹ ์—๊ฒŒ ์ ํ•ฉํ•œ ํ˜œํƒ์„ ์„ ํƒํ•˜์—ฌ ๋ณต์ง€์ ‘์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ œ๋„์— ์ดˆ์ ์„ ๋งž์ถฐ<b>๋งž์ถคํ˜•๋ณต์ง€,๋ณต์ง€ํ”Œ๋ผ์ž, ์ˆ˜๋ จ์›์˜ˆ์•ก,์ปค๋ฎค๋‹ˆํ‹ฐ ํ™œ๋™, ๋ณต์ง€์ •๋ณด ๋“ฑ</b> ๋‹ค์–‘ํ•˜๊ณ  ์•Œ์ฐฌ๋ฉ”๋‰ด๋ฅผ ์ข…ํ•ฉ์ ์ด๊ณ  ์ฒด๊ณ„์ ์œผ๋กœ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.์•ž์œผ๋กœ๋„ ์ง€์†์ ์œผ๋กœ ์šฐ์ •์ข…์‚ฌ๋ผ ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ ๋ณด๋‹ค ํ’์š”๋กœ์šด ์‚ถ์˜ ์งˆ์  ํ–ฅ์ƒ๊ณผ ๊ฑด์ „ํ•œ ์—ฌ๊ฐ€ํ™œ๋™ ์ฆ์ง„์„ ์œ„ํ•œ ๊ตฌ์‹ฌ์  ์—ญํ• ์„ ์ถฉ์‹คํžˆ ์ˆ˜ํ–‰ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.</p>
        </div>
      </div>
      <!-- ํ‘œ -->
      <div class="con2">
        <h4><img src="./images/title_6.gif" alt="์ฃผ์š”์„œ๋น„์Šค ์•ˆ๋‚ด"></h4>
        <table>
          <tr>
            <th>๋ถ„์•ผ</th>
            <th>๋‚ด์šฉ</th>
          </tr>
          <tr>
            <td>๋งž์ถคํ˜•๋ณต์ง€</td>
            <td>๋‚˜์˜ ๋ณต์ง€์ ์ˆ˜, ์‚ฌ์šฉ๋‚ด์—ญ์กฐํšŒ ์„œ๋น„์Šค ๋ฐ ์‚ฌ์šฉ๋ฒ•, ๋ณต์ง€์นด๋“œ์— ๋Œ€ํ•œ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.</td>
          </tr>
          <tr>
            <td>๋ณต์ง€ํ”Œ๋ผ์ž</td>
            <td>์šฐ์ •์ข…์‚ฌ์ž๋“ค์„ ์œ„ํ•œ ๊ฐ์ข… ์ œํœด์„œ๋น„์Šค๋ฅผ ํ•œ๋ˆˆ์— ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</td>
          </tr>
          <tr>
            <td>์ˆ˜๋ จ์›</td>
            <td>์šด์˜์ค‘์ธ ์ˆ˜๋ จ์› ์†Œ๊ฐœ ๋ฐ ์•ˆ๋‚ด, ์˜ˆ์•ฝ์„œ๋น„์Šค, ์ด์šฉ์ž ์ฐธ์—ฌ๊ณต๊ฐ„์ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.</td>
          </tr>
          <tr>
            <td>์ปค๋ฎค๋‹ˆํ‹ฐ</td>
            <td>์šฐ์ •์ข…์‚ฌ์ž๋ถ„๋“ค ๊ฐ„์˜ ํ™”ํ•ฉ์„ ๋„๋ชจํ•˜๊ณ  ๊ฑด๊ฐ•ํ•œ ์ง์žฅ๋ฌธํ™” ์กฐ์„ฑ์„ ์œ„ํ•ด ์นดํŽ˜ ํ™œ๋™์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.</td>
          </tr>
          <tr>
            <td>๋ณต์ง€์ •๋ณด</td>
            <td>๋ฒ•๋ฅ , ๋ฌธํ™”, ๊ฑด๊ฐ•, ๋ถ€๋™์‚ฐ ๊ด€๋ จ ํ…Œ๋งˆ๋ณ„ ์œ ์šฉํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

 

/* reset - ๋Œ€๋ถ€๋ถ„ ํƒœ๊ทธ์— ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ๋ชจ๋‘ ์—†์• ์ฃผ๋Š” ์ž‘์—…*/
*{margin:0;padding:0;}
a{text-decoration: none;color:black;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:inherit;}
b,strong{font-weight:normal;}
i,em,address{font-style:normal;}
ul,ol{list-style:none;}

/* common(๊ณตํ†ต์Šคํƒ€์ผ ์ ์šฉ) */
body{font-family: Dotum,"๋‹์›€",sans-serif;font-size:12px;}

/* layout - ์˜์—ญ(divํƒœ๊ทธ)๋“ค์˜ ๋Œ€๋žต์ ์ธ ์œ„์น˜๋ฅผ ์žก๋Š” ์ž‘์—…(ํฐ์˜์—ญ >> ์ž‘์€์˜์—ญ ์ˆœ์„œ๋กœ) */
.wrap{
  border:1px solid red;
  width:730px;
  margin:0 auto;
}
.con1{}
.leftbox{margin-right: 20px;width:320px;float:left;box-sizing: border-box;}
.rightbox{width:390px;float:left;}
.con1:after{content:"";display:block;clear:both}
/* con1 ์ตœํ›„์˜ ์ž์‹(์—†์œผ๋ฉด ๊ฐ€์ƒํƒœ๊ทธ๋กœ ๋งŒ๋“ค์–ด ์ค˜์•ผํ•œ๋‹ค.)์—๋‹ค๊ฐ€ ํด๋ฆฌ์–ด ํƒœ๊ทธ๋ฅผ ์‹ฌ์–ด์ค€๋‹ค. */
.con2{}

/* header */
header{
  background:url("../images/bg_top.gif") no-repeat 0 0;
}
header h1{float:left;}
header p{
  float:right;margin-top: 54px;
  background:url("../images/blet.gif") no-repeat 0 center;
  padding-left:10px;
}
header:after{content: "";display: block;clear:both;}

/* con1 */
.rightbox>p{
  margin-top: 10px;
  line-height: 165%;
}

 

์˜ˆ์ œ ์ด๋ฏธ์ง€

๋Œ“๊ธ€