css
1. 전체 초기화 영역
*{margin: 0;padding: 0;}
- 의미: 모든 태그의 기본 margin, padding 제거
- 이유: 브라우저마다 다른 기본 여백을 통일
- 활용: 레이아웃 잡을 때 필수 초기화
a{text-decoration: none;}
- 의미: 링크 밑줄 제거
- 활용: 메뉴, 버튼처럼 링크를 디자인 요소로 쓸 때
ul,li{list-style: none;}
- 의미: 목록 앞 점(●) 제거
- 활용: 네비게이션, 갤러리, 아이콘 정렬용 리스트
2. header 영역
header{text-align: center;}
- 의미: header 안 텍스트 가운데 정렬
- 주의: inline / inline-block 요소에만 영향
header>nav{ background-color: black; color:white; width: 10%; margin: auto; padding: 1%; }
- 의미
- > : header 바로 아래 nav만 선택
- 검은 배경, 흰 글씨
- 너비 10%, 가운데 정렬
- 활용: 모바일용 메뉴 버튼 같은 느낌
header>div#navi{display: none;}
- 의미: navi 메뉴 숨김
- 활용: 모바일/PC 메뉴 분리할 때 자주 씀
header>div#sns>ul{width: 8%;margin: auto;}
- 의미: SNS 아이콘 영역 작게 중앙 배치
- 구조 이해
header → div#sns → ul
header>div#sns>ul>li{ float: left; width: 50%; }
- 의미
- li를 가로로 배치
- 두 개 아이콘이 반반 차지
- 활용: 아이콘 2개 나란히
3. section 영역
section{clear: both;padding: 2%;}
- 의미
- float 영향 제거
- 안쪽 여백 확보
- 활용: 위에서 float 썼을 때 필수 정리
section>div>span{ border: 3px solid black; padding: 1%; display: inline-block; margin-top: 20px; margin-bottom: 30px; }
- 의미
- span을 박스처럼 사용
- 위아래 여백 조절 가능
- 핵심: inline-block → 크기/여백 가능
section>div:last-child{ border: 1px solid red; margin: auto; box-sizing: border-box; }
- 의미
- section 안 마지막 div만 선택
- border 포함한 크기 계산
- 활용: 특정 블록 강조/debug용
4. works (작업물 영역)
div#works{ padding: 1%;}
- 의미: 작업물 전체 여백
div#works>ul{ display: flex; flex-wrap: wrap; justify-content: space-around; }
- 의미
- flex 레이아웃
- 줄바꿈 허용
- 아이템 균등 간격
- 활용: 반응형 갤러리 핵심 구조
div#works>ul>li{ width: 45vw; height: 45vw; margin: 1%; border: 1px solid red; box-sizing: border-box; }
- 의미
- 화면 기준 크기(vw)
- 정사각형 카드
- 활용: 비율 유지 썸네일
div#works>ul>li:last-child{display: none;}
- 의미: 마지막 카드 숨김
- 활용: 화면 크기에 따라 아이템 수 조절
5. 공통 텍스트 스타일
h2, h2+p, span{text-align: center;}
- 의미
- h2
- h2 바로 뒤 p
- span
전부 가운데 정렬
span{ display: block; width: 15%; border: 3px solid black; padding: 2%; margin: auto; }
- 의미
- span을 블록 요소처럼 사용
- 활용: 버튼/라벨처럼 쓰기
6. article 영역
article{padding: 2%;}
- 의미: 글 영역 여백
article figure>img{ width: 100%; border: 1px solid red; display: block; }
- 의미
- 이미지 부모에 꽉 채움
- 이미지 아래 여백 제거
- 활용: 이미지 레이아웃 기본 세팅
7. 미디어쿼리 (720px 이상)
@media screen and (min-width: 720px) {
- 의미: 태블릿 이상 화면
header>nav{display: none;} header>div#navi{display: block;}
- 의미: 모바일 메뉴 숨기고 PC 메뉴 표시
header>div#navi>ul{ width: 70%; margin: auto; } header>div#navi>ul>li{ float: left; width: 25%; }
- 의미: 메뉴 4개 가로 정렬
section{overflow: hidden;} section>div{ width: 50%; float: left; }
- 의미: section을 2단 구성
div#works>ul>li{ width: 30vw; height: 30vw; } div#works>ul>li:last-child{display: block;}
- 의미: 카드 크기 줄이고 숨겼던 카드 표시
article figure{ float: left; width: 50%; } article figure>img{width: 95%;}
- 의미: 이미지 + 텍스트 2단 배치
footer{ display: flex; justify-content: space-around; } footer>dl{ width: 30vw; border: 1px solid red; }
- 의미: footer 정보 가로 분산 배치
8. 미디어쿼리 (1000px 이상)
@media screen and (min-width: 1000px){
- 의미: 데스크탑
header>h1{float: left;width: 20%;} header>div#navi{float: left;width: 70%;} header>div#sns{float: right;width: 10%;}
- 의미: 로고 / 메뉴 / SNS 3분할
div#works>ul>li{ width: 22vw; height: 22vw; } div#works>ul>li:last-child{display: none;}
- 의미: 카드 더 작게 + 개수 조절
article figure{ float: left; width: 30vw; }
- 의미: 이미지 영역 더 줄여 텍스트 비중 증가
html
1. 문서 기본 구조
<!DOCTYPE html>
- 의미: HTML5 문서 선언
- 역할: 브라우저에게 “이 문서는 HTML5야”라고 알려줌
- 공부 포인트: 이거 없으면 구형 렌더링 모드로 들어갈 수 있음
<html lang="en">
- 의미: HTML 문서의 최상위 태그
- lang="en": 문서 기본 언어가 영어
- 실무 팁: 한국어 페이지면 lang="ko"가 맞음 (접근성, SEO)
<head>
- 의미: 화면에 안 보이는 설정 영역
- 역할: 문자 인코딩, 반응형 설정, CSS 연결 등
<meta charset="UTF-8">
- 의미: 문자 인코딩 설정
- 이유: 한글 깨짐 방지
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 의미: 반응형 웹 필수 설정
- 효과: 모바일 화면에서 실제 디바이스 폭 기준으로 표시
<title>자기소개홈페이지</title>
- 의미: 브라우저 탭 제목
- 활용: 검색 결과 제목에도 영향
<link rel="stylesheet" href="css/style.css">
- 의미: 외부 CSS 연결
- 연결 관계: 아까 올린 CSS가 이 HTML 전체에 적용됨
2. header 영역 (상단)
<header>
- 의미: 페이지 상단 영역
- 구성 요소: 로고, 네비게이션, SNS
로고
<h1> <a href="index.html">로고</a> </h1>
- 의미
- h1: 페이지 대표 제목
- 로고 클릭 시 메인으로 이동
- CSS 연결
- header>h1 → 1000px 이상에서 float 적용됨
모바일 네비
<nav><!--모바일네비--> menu </nav>
- 의미: 모바일 전용 메뉴
- CSS
- 기본 화면에서는 보임
- 720px 이상에서 display:none
태블릿 / PC 네비
<div id="navi">
- 의미: 큰 화면용 메뉴 컨테이너
- CSS
- 모바일에서는 숨김
- 720px 이상부터 표시
<ul> <li><a href="#">메뉴1</a></li> ... </ul>
- 의미: 메뉴 목록
- CSS
- li { float:left; width:25%; }
→ 4개 메뉴 가로 배치
- li { float:left; width:25%; }
SNS 영역
<div id="sns">
- 의미: SNS 링크 모음
<ul> <li><a href="#>">유튜브</a></li> <li><a href="#>">인스타</a></li> </ul>
- CSS
- li { float:left; width:50%; }
→ 아이콘 2개 가로 배치
- li { float:left; width:50%; }
3. section (인트로 영역)
<section>
- 의미: 페이지의 주요 콘텐츠 묶음
<div> <p>...</p> <span>채용공고</span> </div>
- 의미
- 설명 텍스트 + 버튼 역할 span
- CSS
- span에 테두리, 중앙 정렬
- 버튼처럼 보이게 디자인
<div> <img src="" alt="팬던트로고"> </div>
- 의미: 소개 이미지 영역
- ⚠️ src 비어 있음 → 이미지 안 나옴
4. works (작업물 갤러리)
<div id="works">
- 의미: 포트폴리오 작업물 영역
<ul> <li><img ...></li> ... </ul>
- 구조 이유
- ul/li + flex → 반응형 갤러리
- CSS
- vw 단위로 정사각형 유지
- 화면 크기별로 개수 조절
5. 중간 소개 영역
<h2>제목넣기</h2> <p>...</p> <span>more info</span>
- 의미
- 섹션 제목 + 설명 + 버튼
- CSS
- h2, h2+p, span { text-align:center }
<div id="about">
- 의미: 자기소개 / 방향성 설명 영역
6. article (콘텐츠 상세)
<article>
- 의미: 독립적인 콘텐츠 묶음
- 활용: 블로그 글, 프로젝트 설명
<figure> <img crc="" alt="이미지1"> <figcaption>내용작성</figcaption> </figure>
- 의미
- figure: 이미지 + 설명 세트
- CSS
- 720px 이상에서 float으로 가로 배치
7. contact + footer
<div id="contact">
- 의미: 연락 / 정보 영역
<footer>
- 의미: 페이지 하단 정보
<dl> <dt>제목</dt> <dd>내용</dd> </dl>
- 의미
- dt: 용어/제목
- dd: 설명
- CSS
- flex로 가로 배치
'Wep·App > html&css' 카테고리의 다른 글
| 자기소개웹사이트만들기 #3 (1) | 2026.01.06 |
|---|---|
| 자기소개웹사이트만들기 #2 (2) | 2025.12.23 |