[CSS] 과제: 커뮤니티 대학 홈페이지 레이아웃

https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Typesetting_a_homepage

커뮤니티 대학 홈페이지 레이아웃 구성하기 - Web 개발 학습하기 | MDN

 

 

폴더 구조

폰트는 https://www.fontsquirrel.com/여기서 임의로 두개 다운 받아서 사용했습니다!

폴더 구조

 

 

index.html

수정 하나도 안했어요! 넘어갈게요!

 

style.css

차근차근 따라오시면 금방하실 수 있을 거 같아요. 다만 레이아웃이 없다가 이제 처음으로 과제에서 나온 거라 어색할 수는 있어요!

/* General setup */
@font-face {
  font-family: "abhaya_librebold";
  src: url("fonts/abhayalibre-bold-webfont.woff2") format("woff2"),
    url("fonts/abhayalibre-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sansregular";
  src: url("fonts/opensans-regular-webfont.woff2") format("woff2"),
    url("fonts/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  font-size: 10px;
}

html {
  font-family: "open_sansregular", sans-serif;
}

body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
}

/* Layout */

section {
  float: left;
  width: 50%;
}

aside {
  float: left;
  width: 30%;
}

nav {
  float: left;
  width: 20%;
}

footer {
  clear: both;
}

header,
section,
aside,
nav,
footer {
  padding: 20px;
}

/* header and footer */

header,
footer {
  border-top: 5px solid #a66;
  border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */

h1,
h2,
nav a {
  font-family: "abhaya_librebold", sans-serif;
}

header h1 {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.2rem;
}

h2 {
  font-size: 2rem;
}

section {
  line-height: 1.5;
  letter-spacing: 0.01rem;
  word-spacing: 0.0001rem;
}

p {
  font-size: 1.2rem;
  color: #59595e;
}

section h2 + p {
  text-indent: 20px;
}

a {
  font-size: 1.2rem;
  outline: none;
}

a:link {
  color: #5d5fe4;
}

a:visited {
  color: #f06ca9;
}

a:focus {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
  color: #e8856c;
}

a[href^="http"] {
  padding-right: 10px;
  background: url(asset/external-link-52.png) no-repeat 100% 50%;
  background-size: 8px 8px;
}

ul {
  line-height: 1.5;
  list-style-type: square;
}

nav ul > li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  padding: 15px;
  margin: 10px auto;
  list-style-type: none;
  border: 2px solid #a66;
}

nav a:link,
a:visited {
  text-decoration: none;
  color: #a66;
}

nav a {
  font-size: 1.5rem;
}

 

 

 

 

결과

 

 

 

코드가 점점 길어지네요. 서식을 한 번 만들어서 올려 볼게요!

오류 있으면 댓글로 남겨주세요. 감사합니다!