포트폴리오 공통 CSS — mportpolio.css 완전 정리

 

 

Web Development · Shared CSS

포트폴리오 공통 CSS — mportpolio.css 분석

스타일 초기화 · @media 반응형 · 부등호 자식 셀렉터 · 자손 셀렉터

시작 오늘 분석할 코드

4페이지 포트폴리오가 공유하는 단일 CSS 파일이다. 페이지마다 다른 스타일은 #id로 구분해 한 파일에서 모두 처리한다. 핵심 영역: 스타일 초기화, 헤더·푸터·네비, 미디어쿼리 반응형, 페이지별 id 스타일.

/* 1. 스타일 초기화 */ * { margin:0px; padding:0px; } /* 2. 글꼴·크기 */ header, body, footer { font-size: 14px; font-family: 나눔고딕,굴림,돋음,'Times New Roman',serif; width: 100%; } header, footer { text-align: center; } body { margin: auto; } footer { position: fixed; bottom: 0px; } /* 3. 헤더 텍스트 */ h1 { padding:15px; font-size:30px; color:white; } h2 { font-size:15px; color:white; } h3 { margin:10px; font-size:15px; color:green; text-shadow:4px 4px 7px green; } h1, h2 { background-image:url(bg.jpg); background-repeat:repeat-x; } /* 4. 네비게이션 */ nav { margin:5px 5px; } nav > span > a { font-style:bold; padding:3px; border:2px solid purple; float:right; text-decoration:none; background:purple; color:white; } nav > span > a:hover { background:#ff00ff; color:white; } /* 5. 반응형 — 가로 모드일 때만 2단 */ @media only screen and (min-width: 321px) and (orientation: landscape) { section { width:80%; float:left; } aside { width:20%; text-align:center; float:right; } footer { clear:both; } } .content { clear:both; } .section1 ul li { list-style-position:inside; list-style-image:url("li.jpg"); } /* 6. 페이지별 id 스타일 */ #stu-pic { width:6em; height:8em; float:left; } #year-table { table-layout:auto; width:80%; border-collapse:seperate; } #year-table thead { background:#E4F2D0; } #logo { position:fixed; top:130px; left:70px; opacity:0.3; } video { margin:5px; width:300px; height:200px; } .semi-pic { width:4em; height:3em; } #pic-container { overflow:hidden; } #pic-container:hover { height:220px; } #pic1:hover { transform:scale(0.5); } /* webkit는 scale(7,7), 충돌 */

용어 용어 정리

* 셀렉터전체 요소(universal) 선택

A > BA의 직계 자식 B만 (자식 셀렉터)

A BA 안의 모든 B (자손 셀렉터)

A:hover마우스가 올라간 상태

@media조건부 스타일 (반응형)

orientationportrait(세로) / landscape(가로)

text-shadow글자 그림자 — x y blur color

list-style-image불릿 대신 이미지로

---

1 * { margin:0; padding:0 } — 왜 가장 먼저 쓰는가?

브라우저마다 기본값이 다르다. 어떤 브라우저는 body에 8px 마진을 주고, 어떤 브라우저는 ul에 40px padding-left를 준다. * { margin:0; padding:0 }은 모든 요소의 외부·내부 여백을 0으로 초기화해 어디서 보든 일관된 출발점을 만든다.

※ 현대식 reset

• 한 줄 *로 끝내지 않고 reset.css(Eric Meyer) 또는 normalize.css 사용
• 2026년 권장: tailwind preflight, modern-normalize 등
• 핵심: 의도하지 않은 기본 여백을 제거해 디자인을 처음부터 본인 의지로 만들기

---

2 nav > span > a — 자식 셀렉터의 정확성

>는 직계 자식만 선택한다. 공백으로 띄우면 자손 전체에 적용되는데, 자식 셀렉터로 정확히 한 단계만 좁히면 의도치 않은 스타일 누수를 막을 수 있다.

자손 (공백)

nav span a
nav 안의 모든 단계의 a (깊이 무관)

자식 (>)

nav > span > a
nav 직계 span의 직계 a만 — 한 단계씩 정확히

---

3 @media — 반응형의 핵심

이번 코드의 @media only screen and (min-width: 321px) and (orientation: landscape)는 "화면 너비가 321px 이상이면서 가로 방향일 때"만 안의 규칙을 적용한다. 모바일 세로 모드에서는 section이 100% 폭으로 나타나고, 가로로 돌리거나 PC에선 section 80% + aside 20%의 2단 레이아웃이 된다.

@media only screen and (min-width: 321px) and (orientation: landscape) { section { width: 80%; float: left; } aside { width: 20%; float: right; } footer { clear: both; } }

※ 미디어 쿼리 자주 쓰는 조건

• min-width — 이 너비 이상
• max-width — 이 너비 이하
• orientation: portrait | landscape — 세로/가로
• prefers-color-scheme: dark — 다크 모드 감지
• only screen — 인쇄·점자 매체 제외

---

 

반응형

 

4 footer position:fixed의 함정

footer가 position:fixed; bottom:0이라 스크롤해도 항상 화면 하단에 박혀있다. 모바일에서 키보드가 올라오거나 콘텐츠가 길면, footer가 본문을 가린다. 또 fixed는 viewport 기준이므로 인쇄 시 매 페이지에 푸터가 찍힐 수 있다.

※ "스크롤하면 따라오는 푸터"는 인기 패턴이지만, 모바일·인쇄에서 문제를 일으킨다. 일반 footer로 두고 본문이 짧을 때만 하단에 붙이려면 flex의 flex-direction:column + min-height:100vh + flex:1 패턴이 권장된다.

---

5 자주 하는 실수 + 원본의 결함

문제	증상	해결
seperate 오타	의도 무시, 기본값 적용	separate 또는 collapse
webkit과 표준 transform 값 충돌	최신 브라우저에서 0.5배 축소가 됨	같은 값으로 통일 또는 prefix 제거
font-style:bold	유효하지 않음 — bold는 font-weight	font-weight: bold
* { margin:0 } 만으로 초기화	일부 요소(table 등) 기본값 잔존	normalize.css 같은 본격 reset
footer fixed가 본문 가림	마지막 콘텐츠 안 보임	본문에 padding-bottom 추가 또는 fixed 제거
> 셀렉터 남발	마크업 변경 시 깨지기 쉬움	의미 단위 클래스로 안정성 확보

---

6 페이지 매핑

이 한 파일이 4페이지 모두에 적용된다. 페이지별 영향 범위는 다음과 같다.

스타일	대상 페이지	역할
* / header / nav / footer / h1·h2·h3	4페이지 공통	전체 골격
@media + section/aside	4페이지 공통	2단 레이아웃
#stu-pic	mintro.html	증명사진 float
#year-table / #logo	minfo.html	학력 표 + 워터마크
video	mstudy.html	영상 크기
.semi-pic / #pic-container / #pic1~3:hover	mcareer.html	세미나 사진 hover 확대

---

핵심 한 줄 요약

* margin:0브라우저 기본값 초기화 — 일관된 출발점

A > B 셀렉터직계 자식만 — 정확한 한 단계

@media조건부 스타일 — 반응형 핵심

footer fixed본문 가릴 위험 — padding-bottom 보완

id별 스타일한 CSS로 4페이지 모두 처리

font-style:bold ✗font-weight:bold가 정답

vendor prefix 충돌표준 속성과 값 일치시키기

Tags

#공통CSS #리셋CSS #universal-selector #child-selector #descendant-selector #media-query #반응형 #footer-fixed #hover #transform #vendor-prefix #font-weight #CSS #HTML #포트폴리오 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

공통CSS, 리셋CSS, universal-selector, child-selector, descendant-selector, media-query, 반응형, footer-fixed, hover, transform, vendor-prefix, font-weight, CSS, HTML, 포트폴리오, 웹개발, 티스토리