20250825 - 학습일지
- active 상용 예시
body, ul, li{
padding:0px;
margin:0px;
list-style:none;
}
a{
color : inherit;
text-decoration : none;
}
.menu-1{
color : white;
text-align:center;
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
.menu-1 > ul{
text-align:center;
padding : 0 10px;
}
.menu-1 > ul > li{
display:inline-block;
text-align:center;
}
.menu-1 > ul > li > a {
padding : 10px;
display: block;
}
.menu-1 > ul > li:hover > a {
padding : 10px;
display: block;
color : black;
background-color : white;
}
.menu-1 > ul > li.active > a {
background-color: white;
color: black;
}
<nav class="menu-1">
<ul>
<li><a href="#">메뉴 목록 1</a></li>
<li><a href="#">메뉴 목록 2</a></li>
<li><a href="#">메뉴 목록 3</a></li>
<li class="active"><a href="#">메뉴 목록 4</a></li>
</ul>
</nav>
- 시맨틱 태그
<body>
<header>
<h1>창훈의 웹사이트</h1>
<nav>
<a href="#home">홈</a>
<a href="#about">소개</a>
</nav>
</header>
<main>
<section>
<article>
<h2>최신 블로그 글</h2>
<p>HTML5의 시맨틱 태그에 대해 알아봅시다.</p>
</article>
<aside>
<h3>추천 글</h3>
<ul>
<li><a href="#">CSS 기초</a></li>
<li><a href="#">JavaScript 입문</a></li>
</ul>
</aside>
</section>
</main>
<footer>
<p>© 2025 창훈. 모든 권리 보유.</p>
</footer>
</body>
- 3번 답
<div class="menu-box">
<!-- 메뉴 -->
<div>
<!-- 메뉴 아이템 -->
<div>
<!-- 메뉴 아이템 텍스트 -->
<div>메뉴 아이템 1</div>
</div>
<div>
<!-- 메뉴 아이템 텍스트 -->
<div>메뉴 아이템 2</div>
</div>
<div>
<!-- 메뉴 아이템 텍스트 -->
<div>메뉴 아이템 3</div>
</div>
<div>
<!-- 메뉴 아이템 텍스트 -->
<div>메뉴 아이템 4</div>
</div>
</div>
</div>
/* 노말라이즈 */
a {
color:inherit;
text-decoration:none;
}
/* 커스텀 */
/* 메뉴박스 */
.menu-box {
text-align:center;
}
/* 메뉴 */
.menu-box > div {
/* 메뉴에는 배경색이 있다. */
background-color:#dfdfdf;
/* 메뉴는 너비가 최대한 줄어든다. */
display:inline-block;
border-radius:5px;
padding:0 10px;
}
/* 메뉴 아이템 */
.menu-box > div > div {
/* 메뉴 아이템은 너비가 최대한 줄어들고 한줄에 여러개 나온다. */
display:inline-block;
}
/* 메뉴 아이템 텍스트 */
.menu-box > div > div > div {
padding:10px;
/* 커서를 포인터로 바꿈 */
cursor:pointer;
}
/* 마우스가 올려진 메뉴 아이템의 자식인 텍스트 */
.menu-box > div > div:hover > div {
background-color:black;
color:white;
}
- normalize
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
<br><br>
<a href="#">링크 1</a>
body, ul, li{
padding:0px;
margin:0px;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}- H 태그
<h1>H[1~6] tag</h1>- div 태그
- ul[ol]/li
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li><div>항목</div><div>항목</div></li>
</ul>
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li><div>항목</div><div>항목</div></li>
</ol>
한줄소개불가