오늘 수업은 wiki.html을 css로 꾸미는 실습을 하였다!
수업시간에 해봤는데 아직 셀렉터를 활용을 잘못하고 엉망진창으로 코드를 작성한 거 같아 마치고 다시 해봤다!!
검색하고 내가 전에 썼던 블로그도 보면서 해결할 수 있었다
블로그 쓰는 게 재밌기도 하지만 매일매일 쓴다는게 귀찮아서 미룬 적도 많지만 오늘만큼은 유용하게 쓴 거 같아서 기분이 좋다 😎 아직도 많이 미흡해보이지만 코드와 결과화면을 올리겠다!!
01-wiki.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/wiki.css">
<title>wiki-page</title>
</head>
<body>
<div id="wrap">
<header>
<h1>위키백과:요청</h1>
<hr>
<p>위키백과, 우리 모두의 백과사전.</p>
</header>
<div class="management-request">
<h2>관리 요청</h2>
<p>
도움이 필요하신가요? 각 사항 요청에 맞는 페이지를 방문해 주세요. 요청을 하기 전에 반드시 가이드라인을 읽어 주세요.
</p>
</div>
<div class="delete-request">
<h4>삭제 요청</h4>
<p>
문서의 삭제를 신청하시는 경우 해당 문서에 {{삭제 신청}} 또는 {{특정판 삭제 신청}} 틀을 붙여주세요. 삭제 토론은 위키백과:삭제 토론에서 하실 수 있습니다.
</p>
</div>
<div class="administrator-request">
<h4>관리자에게 요청</h4>
<div class="document-management">
<h3>문서 관리 요청</h3>
<p>문서 보호/해제</p>
</div>
<ul>
<li>
관리자의 주시가 필요한 사항은 관리자 알림판에 남겨주세요.
</li>
</ul>
</div>
<div class="requested-term">
<h4>다른 요청 사항</h4>
<ul>
<li>
비자유 저작물 업로드 - 파일 업로드 요청에 요청을 남겨주세요.
</li>
<li>
봇 등록 신청 - 위키백과:봇/등록 신청에 요청을 남겨주세요.
</li>
<li>
봇 편집 요청 - 위키백과:봇 편집 요청에 요청을 남겨주세요.
</li>
<li>
계정 이름 변경 요청/계정 인수 신청 - 위키백과:계정 이름 변경 요청에 요청을 남겨주세요.
</li>
<li>
다중 계정 검사 - 다중 계정 검사 요청에 요청을 남겨주세요.
</li>
<li>
기타 관리자 권한과 관계없는 요청 - 위키백과:사랑방에 요청을 남겨주세요.
</li>
<li>
관리자의 주시가 필요한 사항은 관리자 알림판에 남겨주세요.
</li>
</ul>
</div>
<footer>
<a href="#">
분류: 위키백과 요청 | 위키백과 디렉토리
</a>
</footer>
</div>
</body>
</html>
reset.css
@charset "utf-8";
/* reset.css */
/* universal 전체 영역 */
* {
margin: 0;
padding: 0;
/* 모든 크기를 width, height에 맞춘다 */
box-sizing: border-box;
font-size: 12px;
}
a {
text-decoration: none;
color: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
ul, ol, li {
list-style: none;
list-style-type: disc;
}
wiki.css
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrap {
padding: 25px;
}
#wrap > div {
margin-top: 15px;
padding: 15px;
border: 1px solid #BBDDFF;
}
header h1, .management-request h2 {
font-size: 25px;
font-weight: bold;
}
header p {
padding-top: 13px;
}
.management-request p {
padding-top: 10px;
}
.delete-request h4, .administrator-request h4, .requested-term h4 {
font-weight: bold;
background-color: #BBDDFF;
padding: 5px;
margin-bottom: 10px;
}
.document-management {
padding: 15px;
margin-top: 13px;
margin-bottom: 13px;
width: 200px;
height: 70px;
box-shadow: 0 0 2px;
text-align: center;
line-height: 20px;
}
.document-management h3 {
font-size: 16px;
font-weight: bold;
color: #0000cc;
}
.administrator-request ul, .requested-term ul {
margin-left: 15px;
}
footer {
margin-top: 10px;
padding: 5px;
border: 1px solid #000;
height: 27px;
font-weight: bold;
color: #0000ccbb;
}
결과화면
* 부족한 점 : 가상셀렉터나 복합셀렉터에 대한 이해가 아직 덜됬다,, 이것저것 넣어보면서 내가 만족하는 결과화면이 나오면 그냥 패스했다,, 왜 저렇게 나오는 지 더 해봐야할 거 같다,, 그리고 display 속성의 차이에 대해 많이 부족한 거 같다 !!
* 잘한 점 : 최대한 적은 양으로 결과화면을 보여주기 위해 노력하다보니 전보다 많이 깔끔해진 거 같다! 다양하게 검색해보고, 이것저것 넣어보면서 태그의 속성에 대해 많이 이해할 수 있었다!
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_34] css 복습하기 (0) | 2021.03.14 |
|---|---|
| [코딩 공부_33] css, 가로·세로 중앙정렬하기 (0) | 2021.03.13 |
| [코딩 공부_31] CSS 박스 모델 (0) | 2021.03.11 |
| [코딩 공부_30] wiki.html을 css로 꾸며보자 2 (0) | 2021.03.11 |
| [코딩 공부_29] line-height / text-align 에 대하여 (0) | 2021.03.10 |
댓글