<strong>정답</strong>: 내부에 감싸야 할 콘텐츠(텍스트나 다른 태그)가 있는지
여부에 따라 구분합니다.
<strong>풀이 과정</strong>: 특정 텍스트 구간에 효과를 주려면 그 구간의 시작과
끝을 명확히 알려주어야 합니다. 반면, 줄바꿈이나 이미지 삽입처럼 그 자체로 독립적인 역할을 하는 요소는 구간을 나눌 필요가 없습니다.
<p>
<strong>중요한 텍스트 구간입니다.</strong>
<br />
<img src="logo.png" alt="사이트 로고" />
</p><strong>빈 태그(Empty Tag)</strong>: 내부 콘텐츠나 닫는 태그가 없는 태그를
의미합니다.
<strong>팁</strong>: HTML5에서는 빈 요소의 끝에 슬래시를 생략해도 동작하지만,
리액트의 JSX나 엄격한 마크업 환경에서는 반드시 아래 코드처럼 명시적으로 닫아주어야 에러를 방지할 수 있습니다.
---
<strong>정답</strong>: a 태그에는 href 속성을, img 태그에는 src와 alt 속성을
사용합니다.
<strong>풀이 과정</strong>: 링크를 연결하는 a 태그가 이미지 태그인 img를
감싸는 형태로 작성해야 합니다. a 태그는 클릭 시 이동할 목적지를 알아야 하고, img 태그는 화면에 그릴 파일의 위치와 대체 텍스트를 가지고 있어야 합니다.
<a href="https://example.com">
<img src="dog.jpg" alt="뛰어노는 강아지" />
</a><strong>href</strong>: 이동할 목적지 URL을 지정합니다. <strong>src</strong>: 브라우저가 불러올 파일의 경로를 지정합니다. <strong>alt</strong>: 이미지를 로드하지 못했을 때 보여줄 텍스트이자, 시각
장애인을 위한 스크린 리더기가 읽어줄 필수 접근성 정보입니다.
<strong>팁</strong>: 웹 접근성 검사 도구에서 alt 속성이 누락된 img 태그는 SEO
감점 요소입니다. 단순 장식용 이미지라서 읽어줄 필요가 없다면 alt 속성에 빈 문자열을 명시해 주는 것이 원칙이에요.
<strong>팁1</strong>: SEO에 대해 최근 화두에 오른 GEO, AEO에서도 중요한 요소
중 하나입니다.
<strong>팁2</strong>: 사실 HTML5 시멘틱 태그로 넘어오면서 속성으로 aria를
맞추는 일이 줄어들긴 했습니다. 그러나 리액트에서 뭔가 시멘틱으로 만들기 애매한 컴포먼트(모달, 탭)는 속성 값을 넣어주는게 좋겠죠?
---
<strong>정답</strong>: 적용 범위와 유지보수의 용이성에 차이가 있으며, 주로
별도의 css 파일을 만들어 link로 연결하는 방식을 사용합니다.
<strong>풀이 과정</strong>: 태그에 직접 적는 인라인 방식은 가장 강력하게
적용되지만 코드가 지저분해집니다. HTML 문서 내부에 적는 방식은 해당 문서 안에서만 적용됩니다. 외부 파일을 연결하면 여러 HTML 페이지에서 하나의 CSS 파일을 공유할 수 있어 일관된 디자인 수정이 가능합니다.
<head>
<link rel="stylesheet" href="styles.css" />
</head><strong>인라인 스타일</strong>: 태그 내부에 직접 작성 (재사용 불가) <strong>내부 스타일시트</strong>: HTML 문서의 head 태그 내부에 작성 <strong>외부 스타일시트</strong>: 별도의 css 파일을 만들어 head 태그 내에서
link로 불러옴
<strong>팁</strong>: 특별히 자바스크립트로 동적인 스타일 값을 계산해서
넣어주어야 하는 상황이 아니라면, 인라인 스타일 사용은 최대한 지양하는 것이 좋습니다.
<strong>팁1</strong>: 사실 tailwindCSS 같은 스타일 프레임워크를 사용할 땐,
인라인 스타일 느낌으로 사용합니다.
<strong>팁2</strong>: 최근 많이 쓰이는 바닐라 익스트랙(Vanilla Extract) 같은
라이브러리는 성능 최적화를 위해 자바스크립트 대신 빌드 타임에 외부 스타일시트(정적 CSS 파일)를 생성해 냅니다. 이처럼 최신 프레임워크들도 결국 CSS 분리라는 기본 원리를 활용하고 있으니 꼭 알아야 하는 개념입니다.
---
<strong>정답</strong>: 글자 주변의 내부 여백은 padding을, 다른 버튼과의 외부
간격은 margin을 사용합니다.
<strong>풀이 과정</strong>: 모든 HTML 요소는 보이지 않는 사각형 박스로
이루어져 있습니다. 콘텐츠(글자)와 테두리(border) 사이의 공간을 넓히려면 padding을 늘려야 하고, 내 버튼의 테두리와 다른 요소 사이의 거리를 벌리려면 margin을 늘려야 합니다.
.button {
padding: 10px 20px; /* 위아래 10px, 양옆 20px의 내부 여백 */
margin-right: 15px; /* 오른쪽 다른 버튼과의 외부 간격 15px */
}<strong>Padding</strong>: 요소의 테두리 안쪽 여백. 배경색이 적용되는
영역입니다.
<strong>Margin</strong>: 요소의 테두리 바깥쪽 여백. 다른 요소와의 간격을
밀어냅니다.
<strong>팁</strong>: margin과 padding이 직관적으로 모르겠고, 왜 따로 쓰는지
모르겠다면, F12로 관리자 모드를 켜보시고 왼쪽 상단의 화살표가 있는 버튼을 눌러보세요. 화면을 구성하는 요소들의 margin, padding을 시각적으로 볼 수 있습니다.
---
MDN Web Docs: HTML 시작하기
MDN Web Docs: CSS 박스 모델
Post Q&A
사전 진단 퀴즈 1단계 (HTML/CSS) 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
스터디 커리큘럼 방향을 정하기 위한 마지막 사전 진단 퀴즈입니다. React 컴포넌트를 다루기 위해 필수적인 배열 고차 함수(map, filter)와 비동기 통신(async/await) 능력을 점검합니다.