[CSS] MDN 과제: 학교 커뮤니티 홈페이지 만들기 ("Assessment wanted for Typesetting a community school homepage")

Give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px.

section>p{
  text-indent: 20px;
}

Make it so that external links have the external link icon inserted next to them.

section p a{
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 1em;
  padding-right: 1.2em;
}

flex

flex

컨테이너 : 전체 공간 설정
아이템 : 배치 형태에 관여
inline 요소처럼 내용물 만큼의 공간만 차지

컨테이너

flex-direction: 가로/세로 나열방향 설정
- row/column(-reverse)
flex-wrap: 아이템 줄바꿈 방법 설정
- nowarp: 줄바꿈 하지않고 삐져나감
- wrap: 줄바꿈
- wrap-reverse: 줄바꿈, 아이템 역순 배치

flex-flow : direction, wrap 한번에 설정
justify-content: 메인축 방향으로 정렬
- flex-start/end, center
- space-between: 아이템 사이 간격 균일하게
- space-around: 아이템 마다 좌우 간격 균일하게
- space-evenly: 앞뒤 여백 포함 사이 가격 균일하게
align-items : 수직축 방향으로 정렬
- flex-start/end, center
- stretch(default) : 수직축으로 늘리기
- baseline : 텍스트 베이스라인 기준으로 아이템 정렬
align-content : 여러행 정렬

아이템

flex-basis : flex 아이템의 기본 크기 설정(단위)
- width가 무조건 맞추는 것과 달리 flex-basis는 최소크기만 조정
flex-grow : 아이템이 basis 값보다 커질 수 있는지 설정
- 기본값: 0
- 내용물을 제외한 여백을 어떻게 나눠가질지 비율로 지정

/* ex) 1:2:1 비율로 설정 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

flex-shrink : 아이템이 basis 값보다 작아질 수 있는지 설정
- 기본값:1
- 0으로 설정하면 고정폭
flex : flex-grow, flex-shrink, flex-basis 한번에설정

<참고> https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

결과물

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>St Huxley's Community College</title>
    <link href="assessment.css" type="text/css" rel="stylesheet">
  </head>
  <body>

  <header>
    <h1>St Huxley's Community College</h1>
  </header>

  <section>
      <h2>Brave new world</h2>

      <p>It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they start to move into the adult world of <a href="https://en.wikipedia.org/wiki/Examination">examinations</a>, <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>, <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and other life choices. Having the wrong mindset, becoming <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or making the wrong choices can contribute to them experiencing difficulty in taking their rightful place in today's ideal society.</p>

      <p>As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the right place.</p>

      <h2>The best start in life</h2>

      <p>At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them the societal and emotional intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data mining, and chemistry, but we also include compulsory lessons in:</p>

      <ul>
        <li>Emotional control</li>
        <li>Judgement</li>
        <li>Assertion</li>
        <li>Focus and resolve</li>
      </ul>

      <p>If you are interested, then you next steps will likely be to:</p>
      
      <ol>
        <li><a href="#">Call us</a> for more information</li>
        <li><a href="#">Ask for a brochure</a>, which includes signup form</li>
        <li><a href="#">Book a visit</a>!</li>
      </ol>
  </section>

  <aside>

    <h2>Top course choices</h2>

    <ul>
      <li><a href="#">Genetic engineering</a></li>
      <li><a href="#">Genetic mutation</a></li>
      <li><a href="#">Organic Chemistry</a></li>
      <li><a href="#">Pharmaceuticals</a></li>
      <li><a href="#">Biochemistry with behaviour</a></li>
      <li><a href="#">Pure biochemistry</a></li>
      <li><a href="#">Data mining</a></li>
      <li><a href="#">Computer security</a></li>
      <li><a href="#">Bioinformatics</a></li>
      <li><a href="#">Cybernetics</a></li>
    </ul>

    <p><a href="#">See more</a></p>

  </aside>

  <nav>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Finding us</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Staff</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Prospectus</a></li>
    </ul>

  </nav>

  <footer>

    <p>&copy; 2016 St Huxley's Community College</p>

  </footer>

  </body>
</html>

@font-face {
  font-family: 'advent_promedium';
  src: url('fonts/adventpro-medium-webfont.woff2') format('woff2'),
       url('fonts/adventpro-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

@font-face {
  font-family: 'bebas_kairegular';
  src: url('fonts/bebaskai-webfont.woff2') format('woff2'),
       url('fonts/bebaskai-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* General setup */

* {
  box-sizing: border-box;
}

html {
  font-family: 'antic_slabregular';
  font-size: 10px;
}

body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
  font-size: 1.5rem;
}

/* 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 */

header h1{
  font-family: 'bebas_kairegular';
  font-size: 4rem;
  text-align: center;
  letter-spacing: 0.2rem;
}

h2{
  font-family: 'advent_promedium';
  font-size: 2.5rem;
  letter-spacing: 0.1rem;
}

section p{
  line-height: 1.5;
  word-spacing: 0.2rem;
}

section>p{
  text-indent: 20px;
}

/* link styling*/

a{
  color: rgb(22,160,133);
  text-decoration: underline;
}

a:visited{
  color: rgb(52,73,94);
}

a:focus{
  outline: none;
  color: rgb(237,90,100);
}

a:hover{
  text-decoration: none;
}

a:active{
  color: rgb(26,188,156);
}

section p a{
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 1em;
  padding-right: 1.2em;
}

section ul{
  line-height: 1.5;

}

nav ul{
  margin: 0;
  padding: 0;
}

nav a{
  display: flex;
  justify-content: center;
  flex : 1;
  text-decoration: none;
  line-height: 3;
  color: black;
  font-weight: bold;
  margin: 0.3em;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav a:link{
  background: rgb(163,228,215);
  color: black;
}

nav a:hover{
  text-decoration: underline;
}

nav a:visited,
nav a:focus {
  background: rgb(247,189,193);
}

'코딩 > HTML\CSS\JS' 카테고리의 다른 글

[CSS] MDN CSS 정리3 (0)	2023.02.08
[CSS] MDN 과제: 멋진 박스 만들기 (Assessment wanted for A cool-looking box) (0)	2023.02.03
[CSS] MDN 과제: 이쁜 레터 모양 종이 만들기 (Assessment wanted for Creating fancy letterheaded paper) (0)	2023.02.03
[CSS] MDN 과제: 기본적인 CSS이해 (0)	2023.02.03
[CSS] MDN 정리2 (0)	2023.01.04

flex

'코딩 > HTML\CSS\JS' 카테고리의 다른 글

티스토리툴바