* 실습 예제(1) - 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 rel="stylesheet" href = "index01(답안).css">
</head>
<body>
<header id = "main_header">
<div class = "title">
<h3>개발자 도구를 활용</h3>
<h3>전체 너비 960px</h3>
</div>
<div class = "main">
<ul>
<li><a href = "#">Web</a></li>
<li><a href = "#">Tablet</a></li>
<li><a href = "#">Mobile</a></li>
<li><a href = "#">Login</a></li>
<li><a href = "#">Regist</a></li>
</ul>
</div>
<div class = "bottom">
<ul>
<li><a href = "#">HTML</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JS</a></li>
<li><a href = "#">JQuery</a></li>
</ul>
</div>
</header>
<section id = "main_section">
<div class = "left"> <!-- 왼 -->
<article>
<h3>Main...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article>
<h3>Main...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article>
<h3>Main...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
</div>
<div class = "right"> <!-- 오 -->
<div class = "buttons">
<label for = "first">HTML</label>
<label for = "second">CSS3</label>
</div>
<div class = "tab_item">
<ul>
<li>
<a href ="#" class ="item"> <!-- 블럭.. -->
<div class = "thum"><img src = "#" alt = "이미지"></div>
<div class = "content">
<strong>HTML5</strong>
<p>2022-12-23</p>
</div>
</a>
</li>
<li>
<a href ="#" class ="item"> <!-- 블럭.. -->
<div class = "thum"><img src = "#" alt = "이미지"></div>
<div class = "content">
<strong>HTML5</strong>
<p>2022-12-23</p>
</div>
</a>
</li>
<li>
<a href ="#" class ="item"> <!-- 블럭.. -->
<div class = "thum"><img src = "#" alt = "이미지"></div>
<div class = "content">
<strong>HTML5</strong>
<p>2022-12-23</p>
</div>
</a>
</li>
<li>
<a href ="#" class ="item"> <!-- 블럭.. -->
<div class = "thum"><img src = "#" alt = "이미지"></div>
<div class = "content">
<strong>HTML5</strong>
<p>2022-12-23</p>
</div>
</a>
</li>
<li>
<a href ="#" class ="item"> <!-- 블럭.. -->
<div class = "thum"><img src = "#" alt = "이미지"></div>
<div class = "content">
<strong>HTML5</strong>
<p>2022-12-23</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<footer id = "main_footer">
<h3>HTML + CSS 베이직</h3>
<address>웹 레이아웃 베이직</address>
</footer>
</body>
</html>* {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
img {max-width: 100%; height: auto;}
#main_header {
width: 960px;
margin: 0 auto;
height: 160px;
position: relative;
}
#main_header .title {position: absolute; left: 0; top: 50px;}
#main_header .main {position: absolute; right: 0; top: 0;}
#main_header .bottom {position: absolute; bottom: 20px; right: 0;}
#main_header .main ul {overflow: hidden;}
#main_header .main ul li {float: left;}
#main_header .main ul li a {display: inline-block; padding: 2px 10px; border: 1px solid #777;}
#main_header .main ul li:nth-child(1) a {border-radius: 10px 0 0 10px;}
#main_header .main ul li:nth-child(5) a {border-radius: 0 10px 10px 0;}
#main_header .bottom ul {overflow: hidden;}
#main_header .bottom ul li {float: left;}
#main_header .bottom ul li a {display: inline-block; padding: 2px 10px; border: 1px solid #777;}
#main_header .bottom ul li:nth-child(1) a {border-radius: 10px 0 0 10px;}
#main_header .bottom ul li:nth-child(4) a {border-radius: 0 10px 10px 0;}
#main_section {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#main_section .left {float: left; width: 750px;}
#main_section .left article {border: 1px solid #777; padding: 20px;}
#main_section .right {float: right; width: 200px; margin-bottom: 10px;}
#main_section .right .buttons {overflow: hidden;}
#main_section .right .buttons label {float:left; width: 50%; background-color: #333; color: #fff; text-align: center; padding: 5px 10px; box-sizing: border-box;}
.tab_item ul li .item {
display: block;
overflow: hidden;
border: 1px solid #777;
padding: 10px;
}
.tab_item ul li .item .thum{
float: left;
}
.tab_item ul li .item .content{
float: left;
margin-left: 10px;
}
.tab_item ul li .item .content strong{
/* 위에 3개는 넘치는거 숨겨주고, 줄바꿈 하지 않겠다. 글이 넘치면 ...으로 표시해줌 */
/* 너비가 지정되어 있을 때 넘어가는 컨텐츠를 생략하고 .으로 대체 */
*/
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
width: 100px;
}
#main_footer {
width: 960px;
border: 1px solid #777;
margin: 0 auto;
text-align: center;
padding: 30px 50px;
}
