HTML 형광펜과 인라인 영역 — mark · span 완전 정리

 

 

Web Development · HTML Text

HTML 형광펜과 인라인 영역 —
mark · span 완전 정리

노란 형광펜 효과 + 글자 일부에 스타일 주는 방법

시작 오늘 분석할 코드

본문 안에서 특정 단어를 형광펜으로 칠한 듯 강조하고, 글 일부에만 색을 입히는 방법을 다룬다.

<h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2> <p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 ... 현재 제주에만 건축물이 남아있으며, <span style="color:blue;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가합니다.</p>

실제 출력 결과

야외 텐트를 닮은 건축물 "테쉬폰"

아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며, 국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.

용어 용어 정리

mark형광펜 강조 — 노란 배경 자동

span의미 없는 인라인 영역

style 속성태그에 직접 CSS 적용 (인라인 스타일)

인라인한 줄 안에 흐르는 요소 (글자처럼)

블록한 줄 통째로 차지 (div 등)

div의미 없는 블록 영역 (span의 블록판)

---

1 <mark> — 자동 형광펜 효과

<mark>는 HTML5에서 추가된 태그로, "이 부분은 주목할 만하다"는 의미를 부여한다. 어떤 CSS도 작성하지 않아도 브라우저가 자동으로 노란 배경을 그려준다.

이런 식으로 노란 형광펜 효과가 자동으로 입혀진다. CSS를 따로 안 써도 됨.

언제 사용하는가?

상황	예시
핵심 키워드 강조	본문 중 중요 용어를 노란 마커로
검색 결과 하이라이트	구글에서 검색어 부분만 강조하는 그것
인용된 글에서 주목 부분	긴 인용 안 핵심 한 문장
참조 시 강조	"제 8조 3항을 참고"

---

2 <mark> vs <strong> vs <em>

셋 다 강조 태그지만 강조하는 이유와 시각 효과가 다르다.

태그	의미	시각	예시
<mark>	주목할 만함 / 관련성	노란 배경	검색어 하이라이트, 핵심 단어
<strong>	중요함	굵게	경고, 주요 정보
<em>	강조 (억양)	기울임	"매우 중요해요"

※ 형광펜처럼 "여기 봐주세요" 느낌 → mark.
중요도가 강함을 알리는 → strong.
발음·억양 강조 → em.

---

3 <span> — 의미 없는 인라인 영역

<span>은 의미가 없다. 그게 핵심이다. 글 안의 일부 단어에만 스타일을 입히고 싶을 때 "이 영역만 따로 묶을 수 있게 빈 통"을 제공한다.

<p> 본문 중에 <span style="color:red;">빨간 단어</span>만 따로 색을 줄 수 있다. </p>

왜 의미 없는 태그가 필요한가?

strong·em은 의미를 동반한다. "이 단어 굵게만 만들고 싶지, 중요하다는 뜻은 없는데..." 같은 상황에서 의미를 끼우면 SEO나 접근성에 거짓 정보가 들어간다. 그래서 "순수한 디자인 컨테이너"가 필요하고 그 역할이 span이다.

---

4 <span> vs <div> — 인라인과 블록

span과 div는 둘 다 의미 없는 컨테이너다. 차이는 레이아웃 동작 방식이다.

<span> — 인라인

한 줄 안에 흐름
글자처럼 동작
너비·높이 못 줌 (의미 없음)
여백은 좌우만 명확

<div> — 블록

한 줄 통째로 차지
다음 요소는 다음 줄로
너비·높이 자유롭게
모든 방향 여백 가능

<p> 글 안에 <span>인라인 영역</span>은 흐름 안에 들어감. </p> <div> div는 한 줄을 통째로 차지함. </div> <p> 다음 단락은 div 아래에 새 줄로. </p>

반응형

---

5 인라인 스타일 — style 속성

이번 코드에서 <span style="color:blue;">처럼 태그에 직접 CSS를 적는 방식을 인라인 스타일이라고 한다. 가장 빨리 적용되는 방법이지만 단점도 있다.

방식	위치	장점	단점
인라인	태그의 style 속성	즉시 적용	재사용 불가, 수정 어려움
내부 CSS	head의 style 태그	한 페이지 통합 관리	여러 페이지에 못 씀
외부 CSS	별도 .css 파일	모든 페이지 공유, 유지보수 ↑	HTTP 요청 추가

※ 우선순위: 인라인 > 내부 CSS > 외부 CSS. 인라인이 가장 강해서 디버깅 시 의도치 않게 외부 CSS를 덮어쓸 수 있다. 일반적으로는 외부 CSS를 권장.

---

6 CSS의 color 속성

color는 글자 색을 지정한다. 값은 여러 형식으로 쓸 수 있다.

형식	예시	설명
색 이름	blue red	140여 개 표준 색상명
16진수	#0000ff #0f0	가장 흔히 쓰는 표기
rgb()	rgb(0, 0, 255)	0~255 값 3개
rgba()	rgba(0, 0, 255, 0.5)	마지막은 투명도 (0~1)
hsl()	hsl(240, 100%, 50%)	색조-채도-명도

---

7 자주 하는 실수

실수	증상	해결
mark를 단순 색 강조로	의미 정보 안 맞음	형광펜 의미면 mark, 색만이면 span
모든 강조에 mark	형광펜이 너무 많아 식상	핵심 1~2개만
span을 블록처럼 쓰려고 함	너비/여백 안 먹음	div 사용, 또는 display: block
인라인 스타일 남발	유지보수 지옥	외부 CSS + 클래스
color 색상명 오타	색이 안 적용됨	16진수가 안전

---

핵심 한 줄 요약

<mark>형광펜 강조 — 노란 배경 자동

<span>의미 없는 인라인 컨테이너

<div>의미 없는 블록 컨테이너

style="..."인라인 스타일 — 즉시지만 재사용 X

우선순위인라인 > 내부 CSS > 외부 CSS

color글자색 — 이름·16진수·rgb 가능

의미 vs 디자인의미는 mark·strong·em, 순수 디자인은 span

Tags

#mark #span #div #HTML #형광펜 #인라인 #인라인스타일 #color #글자색 #시맨틱태그 #CSS #웹개발 #티스토리

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

mark, span, div, HTML, 형광펜, 인라인, 인라인스타일, color, 글자색, 시맨틱태그, CSS, 웹개발, 티스토리