[웹페이지 #01] 3. 메인페이지 상단 공지 & 하단 푸터 (HTML, CSS)

1. 상단 공지 

* HTML 코드

<div class="notice">
      <p class="notice-word">
        [ TMI 공지 ] 추석 전에는 7조였는데,, 쉬고 오니 2조가 되었습니다. 👉 안녕하세요 7ㅏ즈아 2조입니다. 😃
      </p>
</div>

* CSS 코드

.notice-word {
  /*상단 공지*/
  color: #f9f3cc;
  font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  background-color: #6b85a0db;
}

2. 하단 푸터 <footer> HTML & CSS

* HTML 코드

 <footer>
      <section class="last">
        <div class="last01">리액트 3기 여러분 화이팅합시다!</div>
        <p class="common-word">* 7조 같지만 2조😃</p>
        <div class="last-word">
          <a
              href="https://spartacodingclub.kr/?utm_source=google&utm_medium=bs&utm_campaign=online&utm_content=brand&utm_term=%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9&gcl_keyword=%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9&gcl_network=g&gclid=Cj0KCQjwgNanBhDUARIsAAeIcAvgdWR32S2LPQf_y41t0TkriZRepP9yTvU5H92OLLOz6w-0JeI-3d8aAmnyEALw_wcB"
              target="_blank"
          >스파르타 코딩클럽 공부하러 가기👉👉
          </a>
        </div>
      </section>
 </footer>

* CSS 코드

.last {
  /*하단*/
  background-color: #6b85a0db;
  height: 250px;
}

.last01 {
  /*하단 부분 :리액트 3기 여러분 화이팅합시다 */
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 30px;
  font-weight: 700;
  width: 100%;
  color: white;
  padding: 50px 0 0 0;
  text-align: center;
  width: 100%;
}

.common-word {
  /*하단 부분 :* 7조 같지만 2조😃*/
  justify-content: center;
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif !important;
  width: 100%;
  font-size: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  color: white;
}

.last-word a {
  /*하단 부분 :리액트 3기 여러분 화이팅합시다 --> <a>태그 부분 */
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif !important;
  width: 100%;
  font-size: 20px;
  color: white;
}

3. 정리

(1) HTML

1) <a> 태그 href 연결시 target="_blank" 로 새창 열기

 

(2) CSS

[font 관련]
* font-weight : 글자 굵기 (숫자, bold, inherit:부모요소값 상속 )
* font-family :  글꼴 (sans-serif : 고딕계열, monospace: 폭&간격 일정)


[flex 관련]
* display : flex ( 아이템 가로 배치 )
* flex-direction : column (아이템 배치 축 방향 결정 : 메인축을 가로(row) / 세로(column))
* justify-content : center

  (메인축 방향 정렬 : flex-start, flex-end, center, space-between:사이균일간격, space around: 둘레균일간격)
* align-items : center (수직축 방향 정렬 : stretch(기본값)-수직축으로 끝까지 쭉)

[다음에 사용해봐야지]
**flex-wrap : 아이템 줄바꿈 (wrap / nowrap)
**aling-content : flex-wrap:wrap 설정시 2줄 이상 수직축 방향 결정 (여러행 정렬)
**flex-basis : flex 아이템 기본 크기 설정 (flex-direction :row이면 너비, column: 높이)