[AI 웹개발 취업캠프] 4Day - css 꾸미기(1)

해야할 작업들.

1. 스크롤 내렸을때 상단에 헤더가 고정
2. 로고 좌측, 메뉴 우측
3. main 과 side 구분 및 아래 footer 부분까지

변경된 코드

내부 스타일 시트가 아닌 외부 스타일 시트 사용을 위해 헤드부분에 코드추가

<link rel="stylesheet" href="index.css">

 

헤더에 로고랑 메뉴 구분을 하기 위에 각각의 클래스명 부여

    <nav>
      <div class="Logo"><a href="/">logo</a></div>
      <ul class="Menu">
        <li><a href="/menu1">메뉴 1</a></li>
        <li><a href="/menu2">메뉴 2</a></li>
        <li><a href="/menu3">메뉴 3</a></li>
        <li><a href="/menu4">메뉴 4</a></li>
        <li><a href="/menu5">메뉴 5</a></li>
      </ul>
    </nav>

 

오늘은 구역만 나눠보기로 했다

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f0f0f0;
  padding: 10px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Logo {
  flex: 1;
}

.Logo a {
  text-decoration: none;
  color: #000;
  font-size: 24px;
}

.Menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.Menu li {
  margin-right: 15px;
}

.Menu li:last-child {
  margin-right: 0;
}

.Menu a {
  text-decoration: none;
  color: #000;
}

section {
  display: flex;
  height: 1000px;
}

.Main {
  flex: 1;
  background-color: #f0f0f0;
  padding: 20px;
}

.Side {
  flex-basis: 300px;
  background-color: #d3d3d3;
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}

 

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성되었습니다.