포트폴리오 — 자기소개(mintro.html) 완전 정리

 

 

Web Development · Portfolio HTML

포트폴리오 — 자기소개 페이지(mintro.html) 분석

사진 float + 텍스트 흐름 · em 단위 · 긴 자기소개 단락

시작 오늘 분석할 코드

포트폴리오 4페이지 중 자기소개 페이지다. 핵심은 증명사진을 왼쪽에 띄우고, 그 옆으로 자기소개 텍스트가 자연스럽게 흐르도록 만드는 것 — 신문이나 잡지에서 본문 옆에 사진이 박힌 듯한 레이아웃이다.

<section class="section1"> <h3>자기소개</h3> <img id="stu-pic" src="stu.jpg"/> <p> 저는 한국대학교 컴퓨터학과를 졸업하고 모바일 컴퓨팅 관련 분야에 관심을 갖고 있는 홍길동입니다. ... </p> </section>

/* 관련 CSS */ #stu-pic { width:6em; height:8em; float:left; }

실제 출력 미리보기

홍길동 홈페이지

경력학술인적소개

자기소개

PHOTO

저는 한국대학교 컴퓨터학과를 졸업하고 모바일 컴퓨팅 관련 분야에 관심을 갖고 있는 홍길동입니다. 평소 프로그래밍을 즐겨하였고 특히, 웹 기술 관련하여 XML과 jQuery, jQuery Mobile, PhoneGap 등에 관심이 많고 다수 개발 경험이 있습니다. 모바일 게임 관련 업체에서 인턴쉽을 수행했으며 데이터베이스 모델링과 튜닝에도 깊은 관심을 가지고 연구하였으며 데이터베이스진흥원에서 주관하는 데이터베이스 관련 공인 자격증도 취득하였습니다.

 

참조링크

naver

google

daum

Copyright © 2014 Hong, GilDong

용어 용어 정리

float:left왼쪽으로 띄움 — 옆으로 텍스트가 흐름

em 단위현재 폰트 크기의 배수

px 단위고정 픽셀 — 글자 크기 영향 없음

img 태그이미지 삽입 — 인라인 요소 기본

p 태그단락(paragraph) — 블록 요소

clearfloat 해제 — 다음 요소를 아래로

id 셀렉터CSS에서 #으로 선택

type="text/css"link 태그 옛 속성 (HTML5에선 생략 가능)

---

1 float:left — 신문 레이아웃의 핵심

이미지에 float:left를 주면 이미지가 왼쪽으로 치우치고, 뒤따르는 인라인 콘텐츠(여기선 p의 텍스트)가 이미지 오른쪽 빈 공간을 따라 흐른다. 신문·잡지에서 자주 보는 "사진 옆에 본문이 흐르는" 레이아웃이다.

[float 없음] [float:left] ┌──────────┐ ┌─────┬────────────┐ │ 사진 │ │ 사진│ 텍스트가 옆│ └──────────┘ │ │ 으로 흐름 │ 텍스트는 사진 아래로 └─────┤ │ 줄바꿈 │ 사진 끝나면│ │ 아래로 복귀│ └────────────┘

---

2 em 단위 — 6em × 8em의 의미

1em = 현재 요소의 font-size다. 부모 폰트가 14px이면 1em = 14px, 6em = 84px이 된다. 이번 코드의 width: 6em; height: 8em은 현재 글자 크기 기준 6글자 × 8글자 정도의 박스다.

단위	기준	특징
px	고정 픽셀	예측 쉽지만 사용자가 글자를 키워도 그대로
em	부모 font-size	중첩 시 누적됨 (1.2em이 또 1.2em이면 1.44배)
rem	html(root) font-size	중첩 누적 없음 — 실무에서 권장
%	부모 width/height	반응형 레이아웃에 적합

※ em을 쓰는 이유

• 사용자가 브라우저에서 글자를 키우면 사진도 같이 커진다 → 접근성
• 이미지가 텍스트와 균형 잡힌 비율로 따라옴
• 단점: 부모 폰트가 바뀌면 사진 크기도 바뀜 (의도 안 맞을 수 있음)

---

3 float의 함정 — 부모 영역 붕괴

이번 코드는 section 안에 float된 img + 일반 p 만 있다. 부모(section)는 자식이 모두 float일 때 높이를 계산하지 못해 영역이 무너진다(아래 footer가 위로 올라옴 등).

문제 — float만 있는 부모

부모 높이가 0으로 계산되어
다음 요소가 위로 올라감

해결 — clearfix 패턴

.section1::after { content:""; display:block; clear:both; }

※ 이번 원본은 section 끝부분에 p가 길게 있어서 자연스럽게 영역이 잡혀 있지만, 텍스트가 사진보다 짧으면 어색해진다. .content { clear: both; }가 다음 컨테이너에서 float를 끊어주는 역할도 한다.

---

 

반응형

 

4 p 태그 — 자기소개의 기본 그릇

<p>는 단락(paragraph)을 의미한다. 검색엔진과 스크린 리더에 "이건 한 단락의 글이다"라고 알려준다. 단순히 줄바꿈이 필요해서가 아니라 의미 단위로 묶기 위해 쓴다.

※ <br>로 단락을 만드는 건 잘못된 패턴. <p>로 단락을 묶고, 단락 내부의 줄바꿈만 <br>을 쓴다.

---

5 link 태그의 type 속성

이번 mintro.html만 <link rel="stylesheet" type="text/css" href="...">으로 type="text/css"가 붙어있다. HTML5에서는 생략 가능하다. 다른 3페이지엔 없다 — 일관성 면에서는 통일하는 게 좋다.

[옛 방식] <link rel="stylesheet" type="text/css" href="..."> [HTML5] <link rel="stylesheet" href="...">

---

6 자주 하는 실수

실수	증상	해결
float 후 clear 누락	다음 요소가 위로 올라감	clear:both 또는 clearfix
float에 margin 안 줌	이미지·텍스트가 딱 붙음	margin-right: 1em 등 여백
br로 단락 만들기	의미 없는 줄바꿈만 늘어남	<p>로 단락 묶기
em 중첩 누적	요소가 점점 커지거나 작아짐	최상위는 rem, 자식은 em으로 분리
4페이지 link 속성 불일치	유지보수 혼란	type 등 통일

---

7 현대식 대안 — flex로 사진+텍스트

옛 방식 (float)

#stu-pic { float:left; }
p { ... }

clearfix 필요, 정렬 까다로움

현대식 (flex)

.section1 {
  display: flex;
  gap: 12px;
}

정렬·간격 한 줄로 깔끔

---

핵심 한 줄 요약

float:left신문 레이아웃 — 사진 옆 텍스트 흐름

em 단위폰트 크기 기준 — 글자 키울 때 같이 커짐

float 부모 붕괴clear:both 또는 clearfix로 해결

p vs br단락은 p, 단락 내 줄바꿈만 br

type="text/css"HTML5에선 생략 가능

현대식 대안flex로 정렬·간격 한 번에

Tags

#자기소개 #float #em단위 #clearfix #p태그 #br태그 #신문레이아웃 #텍스트흐름 #flex대안 #CSS #HTML #포트폴리오 #웹개발 #티스토리

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

자기소개, float, em단위, clearfix, p태그, br태그, 신문레이아웃, 텍스트흐름, flex대안, CSS, HTML, 포트폴리오, 웹개발, 티스토리