오늘은 어제 실습한 위키 2를 복습해보면서 새로 정리해보았다
위키 2를 할때 어떻게든 되면 됬지 싶어서 div ~ div로 셀렉터를 잡았었는데 선생님이 많이 당황해하셨다 ㅎㅋㅋㅋ
그 뒤로 삐뽀삐뽀 위기다!! 위기!라고 생각해서 열심히 복습 중이다 😂
잘하고 있는 건지는 잘모르겠지만 ,, 확실히 그 전에 쳤던 코드보다 깔끔하고! 빠른 시간안에 해결했다 !
어제 복습할 떄는 2시간 30분정도로 해결했는데 오늘은 1시간 30분정도 걸렸다! 뿌듯하다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> wiki-2 </title>
<link rel="stylesheet" href="./css/02-wiki.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
</head>
<body>
<div id="wrap">
<header>
<h1>
위키백과:사용자 모임
</h1>
<hr>
<p>
위키백과, 우리 모두의 백과사전.
</p>
</header>
<div class="wikipedia-user">
<h2>
위키백과 사용자 모임
</h2>
<p>
한국어 위키백과의 커뮤니티 포털로, 사용자들의 편집 활동을 보조하기 위한 도움말이나 프로젝트를 모아둔 곳입니다.
토론과 의견 교환은 사랑방에서 이루어지고 있습니다. 위키백과에 관해 궁금한 점은 질문방에서 물어보세요.
</p>
</div>
<div class="help">
<div>
<i class="xi-help"></i>
<p>
도움말
</p>
</div>
</div>
<div class="news">
<h4>
위키 소식
</h4>
<p>
요즘 위키에서는 무슨 일이 일어나고 있을까요?
</p>
<ul>
<li>
사용자:Altostratus에 대한 관리자 선거가 2021년 3월 11일까지 진행됩니다.
</li>
</ul>
</div>
<div class="request-comments">
<h4>
의견 요청
</h4>
<p>
함께 검토하기 | 알찬 글 후보 | 좋은 글 후보 | 알찬 목록 후보 | 삭제 토론 | 복구 토론
</p>
<hr>
<ul>
<li>
위키백과토론:분류, 목록 및 둘러보기 틀 - 비슷한 용도로 사용되는 분류, 목록, 둘러보기 틀의 용도를 명확하게 구분하여 사용자에게 안내해줘야 합니다.
</li>
<li>
토론:돈가스 (대한민국 요리) - 표제어 문제 (돈가스 유지 or 돈가스 (한국 요리))를 결정하기 위해
</li>
<li>
위키프로젝트토론:한국 - 성씨 문서의 편집 지침을 정하기 위해
</li>
<li>
위키백과토론:비자유 저작물의 공정한 이용 - 비자유 저작물 저 해상도에 관한 논의
</li>
<li>
위키백과:사랑방/2021년 제6주 - ZEM 유입 1년이 지난 지금, 공동체는 묵인하고 있었던 학생 사용자들의 문제에 마침표를 찍어야만 합니다
</li>
<li>
토론:플라워링 하트 - 시즌 3 등의 후속 프로그램 내용
</li>
<li>
토론:우수하 - 3기 및 스핀오프에서의 행적의 실재 여부
</li>
</ul>
</div>
<footer>
<h4>
위키프로젝트
</h4>
<h6>
위키프로젝트는 특정 주제의 문서에 대한 지침을 만들거나, 그 주제에 대한 의견을 교환하는 사용자간의 모임입니다.
</h6>
<p>
프로젝트 목차 · 새로운 프로젝트 제안
</p>
<div>
<i class="xi-wrench"></i>
<p>
유지 보수 프로젝트
</p>
</div>
</footer>
</div>
</body>
</html>
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrap {
padding: 15px;
}
header h1 {
font-size: 20px;
}
header p {
padding-top: 8px;
}
#wrap > div, footer {
border: 1px solid #000;
padding: 15px;
margin-top: 15px;
}
.wikipedia-user h2 {
font-size: 20px;
font-weight: bold;
padding-bottom: 15px;
}
.help div:first-child {
width: 150px;
height: 100px;
box-shadow: 0 0 3px;
margin: 5px;
line-height: 25px;
text-align: center;
padding-top: 20px;
}
.help i, footer i{
font-size: 30px;
}
.help p {
font-size: 15px;
font-weight: bold;
color: rgb(18, 15, 186);
}
.news h4, .request-comments h4 {
font-size: 15px;
font-weight: bold;
text-align: center;
/* padding-bottom: 10px; */
}
.news p {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.news ul, .request-comments ul {
padding-left: 15px;
}
.request-comments p {
text-align: center;
padding-top: 10px;
padding-bottom: 7px;
color: rgb(18, 15, 186);
}
.request-comments ul {
padding-top: 15px;
}
footer h4 {
color: rgb(18, 15, 186);
text-align: center;
padding-bottom: 15px;
}
footer h6, footer p {
text-align: center;
}
footer div {
width: 150px;
height: 100px;
box-shadow: 0 0 2px;
padding-top: 20px;
text-align: center;
}
footer p {
padding-top: 12px;
font-size: 10px;
color: rgb(18, 15, 186);
}
* 부족한 점 : 이게 무슨 개념인지 모르고 그냥 쓰고 있다 ㅎㅎ,, 여기엔 이게 들어가구나!!만 아는 정도이다
* 잘한 점: 시간 단축!
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_32] wiki.html을 css로 꾸며보자 (0) | 2021.03.12 |
|---|---|
| [코딩 공부_31] CSS 박스 모델 (0) | 2021.03.11 |
| [코딩 공부_29] line-height / text-align 에 대하여 (0) | 2021.03.10 |
| [코딩 공부_28] reset.css (0) | 2021.03.10 |
| [코딩 공부_27] box-shadow가 무엇일까 (0) | 2021.03.10 |
댓글