CONTENTS
CSS Practice
중간 퀴즈
홈페이지 레이아웃 : header, nav 부분
-----------------------------------------------------------
CSS Practice
중간 퀴즈
| 문항 |
| 1. 아이콘을 사용하기 위해 폰트어썸을 연결해야한다. 연결방법은? 2. HTML에서 큰 레이아웃 태그 6개는 무엇인가? 3. HTML에서 제목 태그는 무엇인가? 4. HTML에서 문단 태그는 무엇인가? 5. HTML에서 순서 없는 리스트 태그는 무엇이며, 리스트의 각 항목을 나타내는 태그는 무엇인가? 6. 의미는 없으나 주컨텐츠를 하나의 그룹으로 묶는 블록레벨의 대표적인 태그는 무엇인가? 7. 의미는 없으나 단순히 일부 글꼴 꾸미기 위해 사용하는 인라인레벨의 대표적인 태그는 무엇인가? 8. HTML 파일 내에 CSS 적용방법 2가지를 설명하시오 9. 별도의 CSS파일을 만들었는데 HTML과 연결해야한다. 그 방법을 작성하시오. 10. 기본 선택자 (전체, 타입, 클래스, 아이디)의 사용 표기법 작성하시오. 11. 부모에서 자식 정렬하는 속성 3가지 작성하시오. (일종의 세트) 12. 위치를 세부 조정하기 위한 속성 2가지 이상 작성하시오. |
| 답변 |
| 1. kit주소 <head>에 넣기 2. <header>, <nav>, <section>, <article>, <aside>, <footer> 3. <h1>~<h6> 4. <p> 5. <ul>, <li> 6. <div> 7. <span> 8. 인라인 스타일 시트 적용: HTML요소의 style 속성에 직접 CSS 작성, 내부 스타일 시트 적용: <head> 섹션에 <style>태그 사용 9. 외부 스타일 시트 적용: <head> 내 <link rel="stylesheet" href="./style.css"></link> 10. *{ }, p{ }, .class{ }, #id{ } 11. dispaly: flex, justify-content, align-items 12. position, margin, padding, transform: translate( ); |
홈페이지 레이아웃 : header, nav 부분
예제1)
Boxing
Dom tree
html
<body>
<nav class="container">
<div class="logo">
<img src="./famms_logo.png" alt="logo">
</div>
<div class="list">
<ul>
<li><a href="#"><span>HOME</span></a></li>
<li><a href="#">PAGES
<i class="fa-solid fa-sort-down"></i>
</a></li>
</i>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><i class="fa-solid fa-cart-shopping"></i></a></li>
<li><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
</ul>
</div>
</nav>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
.container {
width: 80%;
margin: 0 auto;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo img{
width: 200px;
}
.list{
display: flex;
justify-content: center;
align-items: center;
}
.list ul{
display: flex;
justify-content: center;
}
.list ul li{
margin-right: 20px;
font-weight: 700;
}
span{
color: red;
}
예제2)
Boxing
Dom tree
html
<body>
<header>
<div class="header_top">
<div class="container">
<div>
<i class="fa-solid fa-envelope"></i>
<span>info@company.com</span>
<i class="fa-solid fa-phone-flip"></i>
<span>010-020-0340</span>
</div>
<div class="icon">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
<nav class="nav container">
<div>
<h2>Zay</h2>
</div>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-cart-shopping"></i>
<i class="fa-solid fa-user-large"></i>
</div>
</nav>
</header>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
.container {
width: 80%;
margin: 0 auto;
}
.header_top{
background-color: #212934;
color: white;
padding: 10px 0;
}
.header_top .container {
display: flex;
justify-content: space-between;
}
.icon i{
margin-right: 5px;
}
.nav{
display: flex;
justify-content: space-between;
/* background-color: red; */
}
.nav ul{
display: flex;
justify-content: center;
}
.nav ul a{
margin: 30px;
}
h2{
color: #59ab6e;
font-size: 50px;
}
.nav i{
margin-right: 5px;
}
'웹프로그래밍 > CSS' 카테고리의 다른 글
| 프로그래밍 언어 활용 15일차 (24/11/29) (4) | 2024.11.29 |
|---|---|
| 프로그래밍 언어 활용 14일차 (24/11/28) (0) | 2024.11.28 |
| 프로그래밍 언어 활용 12일차 (24/11/26) (0) | 2024.11.26 |
| 프로그래밍 언어 활용 11일차 (24/11/25) (0) | 2024.11.25 |
| 프로그래밍 언어 활용 10일차 (24/11/22) (0) | 2024.11.22 |