-
CSS 연습문제프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:28
CSS 파일로 HTML 문서 외부에 정의
(1) CSS 파일 인코딩 : UTF-8 설정
- Window / Preferences / Web / CSS Files 선택하고
- 오른쪽 Encoding: ISO 10646/Unicode(UTF-8) 선택
- [Apply and Close]
(2) CSS 파일 생성
(3) HTML : <link….>
CSS 연습문제
- cssEx.html
- cssEx.css
- 메뉴 항목에 마우스 올렸을 때 글자색 빨간색, 밑줄 표시
- text-decoration:none; /* 밑줄 없애기 */
- text-decoration:underline; /* 밑줄 표시 */
- [공지사항]과 [커뮤니티] 각 항목에 마우스 올렸을 때 빨간색
@charset "UTF-8"; #wrap { margin:0 auto; /* 내가 가운데 정렬 */ width:800px; /* 가운데 정렬하기 위해서는 width 값 있어야 함 */ text-align:center; /* 내 안에 들어 있는 요소를 가운데 정렬 */ } #mainMenuBox { height:35px; line-height:35px; /* 줄 간격 - 수직으로 가운데 정렬 효과 */ background-color:#555; margin-top:30px; margin-bottom:30px; } #mainMenuBox ul { padding-left:0; margin:0; list-style:none; /* type 없음 */ } #mainMenuBox ul li { /* #mainMenuBox li */ float:left; /* 한 줄로 정렬 */ text-align:center; width:25%; /* 항목 4개를 동일한 너비로 */ } #mainMenuBox a { /* #mainMenuBox ul li a */ text-decoration:none; /* <a> 태그 밑줄 없애기 */ color:white; /* 글자색 흰색 */ display:block; /* 여백 */ font-size:14px; font-weight:bold; } #mainMenuBox a:hover { color:red; text-decoration:underline; /* <a> 태그 밑줄 보이기 */ background-color:black; } .product { margin-bottom:30px; } .product div { display:inline-block; margin:10px; } .prdName { color:blue; font-weight:bold; } .prdPrice { color:red; } .box { display:inline-block; /* 옆으로 나란히 배치 */ border:solid 1px grey; width:320px; height:150px; font-size:small; border-radius:10px; padding-left:20px; padding-right:20px; margin:10px; text-align:left; } .box a:hover { color:red; } .product { margin-bottom:30px; } .product div { display:inline-block; } .prdName { color:blue; font-weight:bold; } .prdPrice { color:red; } .box{ display:inline-block; /*옆으로 나란히 배치*/ border:solid 1px grey; width:320px; height:150px; font-size:small; border-radius:10px; padding-left:20px; padding-right:20px; margin:10px; text-align:left; } .box a:hover { color:red; }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS 예제</title> <link href="cssEx2.css" rel="stylesheet"> </head> <body> <div id="wrap"> <div id="mainMenuBox"> <ul id="menuItem"> <li><a href="#">패션잡화</a></li> <li><a href="#">주방용품</a></li> <li><a href="#">생활건강</a></li> <li><a href="#">DIY가구</a></li> </ul> </div> <div class="product"> <div> <img src="image/fashion1.png"><br> <span class="prdName">캐주얼화<br>스니커즈</span><br> <span class="prdPrice">35,000원</span> </div> <div> <img src="image/fashion2.png"><br> <span class="prdName">미니크로스<br>여성 가방</span><br> <span class="prdPrice">20,000원</span> </div> <div> <img src="image/fashion3.png"><br> <span class="prdName">페이퍼플레인<br>겨울 신발</span><br> <span class="prdPrice">25,800원</span> </div> </div> <div id="info"> <div class="box"> <h4>공지사항</h4> <a href="#">[배송] : 무료배송 변경 안내 2021.08.25</a><br> <a href="#">[전시] : DIY 가구 전시 안내 2021.09.01</a><br> <a href="#">[판매] : 11월 특가 상품 안내 2021.11.01</a><br> </div> <div class="box"> <h4>커뮤니티</h4> <a href="#">[레시피] : 살 안찌는 야식 만들기</a><br> <a href="#">[가구] : 헌집 새집 베스트 가구</a><br> <a href="#">[후기] : 배송이 잘못 됐어요 ㅠㅠ</a><br> </div> </div> </div> </body> </html>'프론트엔드 프로그래밍 > CSS' 카테고리의 다른 글
반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스) (0) 2022.01.26 자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자) (0) 2022.01.26 CSS 속성 선택자 (0) 2022.01.26 CSS의 기본 형식 + 선택자(태그, 아이디, 클래스) (0) 2022.01.26 CSS (스타일 시트)란? (0) 2022.01.26