CSS 코드와 웹사이트의 구조

 

1. 초기화 및 기본 설정 (Reset & Base)

모든 브라우저는 기본 스타일을 가지고 있어서, 이를 초기화해야 원하는 대로 디자인할 수 있다.

• *{ margin: 0; padding: 0; box-sizing: border-box; }: 모든 요소의 기본 여백을 없애고, 테두리까지 포함해서 크기를 계산하도록 설정. (레이아웃 설계의 필수)
• body{ ... }: 페이지 전체의 기본 글꼴, 색상, 배경색을 지정.
• a{ text-decoration: none; color: inherit; }: 링크의 밑줄을 없애고, 색상은 부모 요소의 색상을 그대로 따라가게 함
• img{ max-width: 100%; display: block; }: 이미지가 부모 영역보다 커져서 튀어나가는 것을 방지합니다.

2. 레이아웃의 틀 (Wrapper & Header)

• .wrapper{ max-width: 1120px; margin: 0 auto; }: 사이트 콘텐츠를 화면 중앙에 1120px 너비로 고정하여 배치
• .header{ display: flex; justify-content: space-between; ... }: 로고, 검색창, 메뉴를 가로로 배치하고 양쪽 끝으로 밀어내어 균형을 맞춤
• .search{ flex: 1; ... }: 검색창이 헤더의 남은 공간을 알아서 차지하도록 설정

3. 내비게이션 & 드롭다운 (Navigation)

•  
• .nav .submenu{ position: absolute; ... opacity: 0; visibility: hidden; }: 서브 메뉴를 기본적으로 숨겨두었다가, 마우스를 올렸을 때 나타나도록 함
• .nav > ul > li:hover .submenu{ opacity: 1; ... }: 마우스를 올렸을 때 서브 메뉴를 부드럽게 나타나게 함

4. 메인 컨텐츠 (Flex & Grid)

정렬

• .main{ display: flex; gap: 24px; }: 메인 영역을 왼쪽(Section)과 오른쪽(Aside)으로 나눔
• .main .section{ flex: 7; } .main .aside{ flex: 3; }: 전체 화면을 10:3 비율로 나누어 왼쪽을 훨씬 넓게 씀.
• .cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }: 카드 3개를 가로로 똑같은 크기(1fr)로 3등분하여 정렬

5. 컴포넌트 세부 디자인 (Banner & Card & Login)

• .banner{ background: linear-gradient(...); }: 단색이 아닌 그라데이션 색상을 사용하여 세련된 느낌을 준다.
• .notice{ display: flex; align-items: center; }: 공지사항 아이콘과 텍스트를 수평으로 정렬.
• .box{ border: 1px solid gainsboro; border-radius: 12px; }: 모서리가 둥근 테두리 박스를 만들어 강조.
• .login input, .login button{ ... }: 로그인 폼의 높이, 테두리, 여백을 설정하여 버튼과 입력창을 보기 좋게 만든다.

 

💡 학습 포인트

1. Flexbox: 메뉴나 헤더처럼 한 줄로 정렬할 때 (display: flex)
2. Grid: 카드 목록처럼 여러 줄로 정렬할 때 (display: grid)