오늘 한 일

• GPT 웹개발 1주차
• 데일리모토 만들기
• 멜로디데이 만들기
• SQL 문제(41~50)

---

GPT 웹개발 1주차

데일리모토

웹페이지의 구조는 크게 3가지 요소로 구성된다.

• 네비게이션 바(Navbar)
  홈페이지 상단에 위치, 주로 메뉴항목이 포함, 사용자가 웹사이트 내에서 이동하고자 하는 다른 페이지로 연결

• 본문(Main)
  주요 컨텐츠가 포함되는 영역

• 푸터(Footer)
  홈페이지 하단에 위치, 추가 정보, 사이트에 대한 부가적인 링크, 연락처, 저작권, 이용약관 링크, 개인정보 처리 방침 등을 포함

배경에 이미지 설정하기

<style>
  body {
  	background-image: url("(이미지 url)");
  	background-position: center;
  	background-size: cover;
  	color: white;
</style>

background-position: 이미지를 화면의 어디에 위치할 것인가
background-size: 이미지의 크기, cover는 화면 크기에 맞게 공백 없이 설정하는 것
color: 글자색

Margin, Padding

• Margin
  HTML 박스 모델에서 border의 바깥쪽, 각 요소들과의 거리를 설정하는 영역

• Padding
  HTML 박스 모델에서 border의 안쪽, content와 border의 거리를 설정하는 영역

Navbar

<style>
  .navbar {
  	display: flex;
  	justify-content: space-beween;
  	align-items: center;
  }
</style>

<nav class="navbar">
  <img class="logo" src="..."/>
  <div class="weather">
    <img .../>
    <p>...</p>
  </div>
</nav>

display: flex: 행렬 변환, 다른 요소를 가로로 배치할 수 있게 해줌
justify-content: space-between: 요소를 일정한 간격을 두고 배치, 두 개면 양쪽에 위치
align-items: center: 주축에 수직인 방향으로 가운데 정렬, 여기선 세로

Footer

.footer {
    position: fixed;
    color: white;
    left: 0;
    bottom: 0;

    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
  }

position: fixed: 화면에 고정, 스크롤을 움직여도 바뀌지 않음
width: 100%: 이미지, div와 달리 text는 글자 만큼의 박스만 차지하기 때문에 화면 가운데 정렬을 하기 위해서 박스 크기를 키워줘야 함

bootstrap

만들어진 CSS를 모아둔 것

bootstrap docs에서 다양한 부트스트랩을 선택해서 사용 가능

---

SQL 문제(41~50)