6-5. CSS 3๋‹จ ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ_์—ฐ์Šต๋ฌธ์ œ 1,2

2021. 10. 12. 23:17ใ†HTML + CSS + JS

728x90

* ์—ฐ์Šต๋ฌธ์ œ 1

์—ฐ์Šต๋ฌธ์ œ 1 ๊ฒฐ๊ณผ

html 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS ๋ ˆ์ด์•„์›ƒ - 2๋‹จ ๋ ˆ์ด์•„์›ƒ</title>
  <link rel="stylesheet" href="css/2column.css">
</head>
<body>
  <div id="container">
    <header id="header">
      <h1>์‚ฌ์ดํŠธ ์ œ๋ชฉ</h1>
    </header>
    <aside id="sidebar">
      <h2>์‚ฌ์ด๋“œ๋ฐ”</h2>				
    </aside>
    <section id="contents">
      <h2>๋ณธ๋ฌธ</h2>
    </section>
    <footer id="footer">
      <h2>ํ‘ธํ„ฐ</h2>
    <footer>
  </div>
</body>
</html>

CSS

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

#container {
  width: 1200px;
  margin: 20px auto;
}

#header {
  width: 100%;
  height: 120px;
  background-color: #acacac;
}

#sidebar {
  width: 300px;
  height: 600px;
  background-color: #e9e9e9;
  float: left;
}

#contents {
  width: 900px;
  background-color: #f7f7f7;
  height: 600px;
  float: left;
}

#footer {
  clear: left;
  width: 100%;
  height: 100px;
  background-color: #888888;
}

 

 

 

 

 

* ์—ฐ์Šต๋ฌธ์ œ 2

์—ฐ์Šต๋ฌธ์ œ 2

 

html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<title>CSS ๋ ˆ์ด์•„์›ƒ - 3๋‹จ ๋ ˆ์ด์•„์›ƒ</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/3column.css">
	</head>
	<body>
		<div id="container">
			<header id="header">
				<h1>์‚ฌ์ดํŠธ ์ œ๋ชฉ</h1>
      </header>
			<aside id="left-sidebar">
				<h2>์‚ฌ์ด๋“œ๋ฐ”</h2>				
      </aside>
			<section id="contents">
				<h2>๋ณธ๋ฌธ</h2>
      </section>
			<aside id="right-sidebar">
				<h2>์‚ฌ์ด๋“œ๋ฐ”</h2>
      </aside>
			<footer id="footer">
				<h2>ํ‘ธํ„ฐ</h2>
			<footer>
		</div>
	</body>
</html>

CSS

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

#container {
  width: 1200px;
  margin: 20px auto;
}

#header {
  width: 100%;
  height: 120px;
  background-color: #acacac;
}

#left-sidebar {
  width: 250px;
  height: 600px;
  float: left;
  background-color:#e9e9e9;
}

#contents {
  width: 800px;
  height: 600px;
  float: left;
  background-color:#f7f7f7;
}

#right-sidebar {
  width: 150px;
  height: 600px;
  float: left;
  background-color:#e9e9e9;
}

#footer {
  clear: left;
  width: 100%;
  height: 100px;
  background-color: #888888;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'HTML + CSS + JS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

6-7. CSS ๊ธฐ์ดˆ ์—ฐ์Šต๋ฌธ์ œ 1,2,3  (0) 2021.10.12
6-6. ์›น ์š”์†Œ ์œ„์น˜ ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•- position(static, relative, absolute, fixed)  (0) 2021.10.12
6-4. CSS ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ, display, float โญโญ  (0) 2021.10.12
6-3. CSS margin, padding  (0) 2021.10.12
6-2. CSS ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ box-style, border-width, border-color, border- radius  (1) 2021.10.12

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€ 0

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”