개발자가 되기 위한 첫걸음 - 1. cascading 과 시멘틱 태그에 대하여

About this offer

프론트엔드 면접 질문을 정리하다 보니 HTML/CSS 기초에서 꼭 나오는 질문이 몇 개 있었다. 그중 이번에는 시맨틱 태그 랑 CSS Cascading 두 개를 묶어서 정리해 보려고 한다. 둘 다 "그냥 쓰면 되는 거 아닌가?" 싶었는데, 막상 말로 설명하려니 생각보다 막히는 부분이 많았다. 1. 시맨틱 태그를 사용하면 좋은 점은? 면접 질문: "시맨틱 태그를 사용하면 좋은 점은 무엇인가요?" 짧게 답하면 시맨틱 태그는 생긴 모양이 아니라 의미를 나타내는 태그 다. 쓰면 코드 읽기가 쉬워지고, 검색 엔진이 페이지를 더 잘 이해하고, 스크린 리더 사용자도 페이지를 편하게 탐색할 수 있다. 시맨틱 태그가 뭔데? semantic은 "의미의"라는 뜻이다. 그러니까 시맨틱 태그는 이름만 봐도 안에 뭐가 들어가는지 알 수 있는 태그라고 보면 된다. 자주 쓰는 것들만 정리하면 이 정도다. <header> : 머리말 영역. 로고나 제목 같은 것 <nav> : 메뉴, 내비게이션 링크 <main> : 페이지의 핵심 내용 (한 페이지에 하나) <article> : 그 자체로 완결된 글. 블로그 글이나 뉴스 기사 <section> : 주제별로 묶은 영역 <aside> : 사이드바처럼 본문과 살짝 관련된 내용 <footer> : 꼬리말. 저작권이나 연락처 반대로 <div> 나 <span> 은 아무 의미가 없는 태그다. 화면을 나누는 데는 문제없지만 그게 무슨 영역인지는 알려주지 않는다. 그래서 왜 좋은가 첫 번째는 코드가 읽기 쉬워진다는 점이다. 처음 HTML 배울 때는 거의 <div class="header"> , <div class="menu"> 이런 식으로 짰는데, 나중에 다시 열어보면 div가 너무 많아서 어디서 어디까지가 메뉴인지 찾느라 한참 걸렸다. <header> , <nav> , <main> 을 쓰면 태그 이름만 봐도 구조가 보이니까 수정할 때도, 다른 사람이랑 같이 작업할 때도 훨씬 편하다. 두 번째는 SEO다. 검색 엔진도 결국 HTML을 읽어서 페이지를 파악하는데, <main> 이나 <article> 안에 있는 게 핵심 내용이고 <nav> 는 메뉴라는 걸 더 정확하게 알 수 있다. 다만 시맨틱 태그를 썼다고 검색 순위가 바로 올라가는 건 아니고, 검색 엔진이 내용을 이해하기 좋게 도와주는 쪽에 가깝다고 이해했다. 세 번째는 웹 접근성이다. 개인적으로 이 부분이 제일 와닿았다. 스크린 리더는 <nav> 를 "내비게이션", <main> 을 "본문"처럼 랜드마크로 인식해서, 사용자가 단축키로 원하는 영역에 바로 이동할 수 있다고 한다. div로만 짜면 이게 전부 그냥 "상자"로 읽힌다. 직접 비교해 봤다 같은 블로그 화면을 두 가지로 짜 봤다. div로만 짠 버전: <div class="header"> <div class="logo">My Blog</div> <div class="menu"> <a href="/">홈</a> <a href="/posts">글 목록</a> </div> </div> <div class="content"> <div class="post"> <div class="title">시맨틱 태그란?</div> <div class="body">시맨틱 태그는 의미를 가진 태그다...</div> </div> <div class="sidebar">인기 글 목록</div> </div> <div class="footer">© 2026 My Blog</div> 시맨틱 태그로 바꾼 버전: <header> <h1>My Blog</h1> <nav> <a href="/">홈</a> <a href="/posts">글 목록</a> </nav> </header> <main> <article> <h2>시맨틱 태그란?</h2> <p>시맨틱 태그는 의미를 가진 태그다...</p> </article> <aside>인기 글 목록</aside> </main> <footer>© 2026 My Blog</footer> CSS만 똑같이 주면 화면은 차이가 없다. 그런데 크롬 개발자도구의 Accessibility 탭에서 보면 차이가 확실히 보인다. div 버전은 전부 generic 으로 나오고, 시맨틱 버전은 banner , navigation , main 같은 이름으로 나온다. 같이 나올 만한 질문 <section> 이랑 <article> 은 뭐가 다른가? 처음에 제일 헷갈렸던 부분이다. <article> 은 떼어서 다른 곳에 가져다 놔도 말이 되는 콘텐츠(글, 댓글, 기사)에 쓰고, <section> 은 그냥 주제별로 묶은 덩어리라서 혼자서는 의미가 완결되지 않을 수 있다. 그럼 div는 이제 쓰면 안 되나? 그건 아니다. 스타일이나 레이아웃 때문에 묶기만 할 때는 div가 맞다. 의미가 있는 영역까지 전부 div로 처리하는 게 문제다. <b> 와 <strong> 은 같은 거 아닌가? 화면에서는 둘 다 굵게 나오지만 <b> 는 그냥 굵은 글씨고, <strong> 은 "중요하다"는 의미가 있다. <i> 와 <em> 도 같은 관계다. 2. CSS의 Cascading이란? 면접 질문: "CSS의 Cascading이 무엇인지 설명해 주세요." 짧게 답하면 하나의 요소에 스타일이 여러 개 걸려서 충돌할 때 어떤 스타일을 적용할지 정하는 규칙 이다. 중요도 → 명시도 → 선언 순서 순서로 비교한다. 왜 이런 규칙이 필요할까 CSS를 쓰다 보면 분명 color: red 를 줬는데 안 바뀌는 경우가 있다. 나도 처음엔 이유를 몰라서 그냥 !important 를 붙여서 해결했는데(...) 나중에 보니 이게 Cascading을 몰라서 생긴 문제였다. 스타일은 여러 곳에서 선언될 수 있으니까, 겹쳤을 때 누가 이기는지 정해 둔 게 Cascading이다. CSS의 C가 바로 이 Cascading이다. 브라우저는 세 가지를 순서대로 비교하고, 앞에서 결판이 나면 뒤는 안 본다. 1 중요도 스타일이 어디서 왔는지를 먼저 본다. !important 가 붙은 스타일 개발자가 작성한 스타일 브라우저 기본 스타일 개발자가 작성한 스타일 중에서는 인라인 스타일( style="..." )이 <style> 태그나 외부 CSS 파일보다 우선한다. 2 명시도 선택자가 얼마나 구체적인지를 본다. 인라인 스타일 > id > class, 속성, 가상 클래스 > 태그 보통 (id 개수, class 개수, 태그 개수) 로 세는데, 예를 들면 이렇다. p → (0, 0, 1) .text → (0, 1, 0) p.text → (0, 1, 1) #title → (1, 0, 0) #title .text p → (1, 1, 1) 앞자리부터 비교하기 때문에 class를 10개 넘게 붙여도 id 하나를 못 이긴다. 이건 직접 해보고 나서야 확실히 이해했다. 3 선언 순서 중요도랑 명시도가 같으면 나중에 쓴 게 이긴다. 그래서 CSS 파일을 여러 개 불러올 때 <link> 순서도 신경 써야 한다. 같이 알아두면 좋은 것: 상속 color , font-size 처럼 글자와 관련된 속성은 부모 값이 자식한테 그대로 내려간다. 반대로 margin , padding , border 같은 박스 관련 속성은 상속되지 않는다. 그리고 상속받은 값은 직접 선언한 스타일보다 항상 우선순위가 낮다. 직접 해봤다 <p id="title" class="text" style="color: green;">무슨 색일까?</p> p { color: blue; } .text { color: red; } #title { color: purple; } 처음엔 초록색이 나온다. 인라인 스타일이 제일 세기 때문이다. 여기서 하나씩 지워 보면 이렇게 바뀐다. 인라인 스타일을 지우면 → 보라색 (id가 제일 구체적) #title 까지 지우면 → 빨간색 (class가 태그보다 구체적) .text 까지 지우면 → 파란색 그리고 p { color: blue !important; } 로 바꾸면 인라인 스타일이 있어도 파란색이 된다. 이걸 보고 !important 가 왜 위험한지 좀 감이 왔다. 개발자도구 Styles 패널을 보면 적용 안 된 스타일에 취소선이 그어져 있어서 어떤 게 이겼는지 바로 보인다. 요즘은 스타일이 안 먹으면 여기부터 확인한다. 같이 나올 만한 질문 !important 를 쓰면 안 되는 이유는? 명시도 규칙을 무시하고 강제로 이기게 만들기 때문이다. 한 번 쓰기 시작하면 그걸 덮으려고 또 !important 를 쓰게 되고, 결국 뭐가 왜 적용되는지 알 수 없게 된다. 외부 라이브러리 스타일을 어쩔 수 없이 덮어야 할 때 정도만 쓰는 게 맞는 것 같다. class 11개랑 id 1개 중에 누가 이기나? id가 이긴다. 명시도는 자리별로 비교하기 때문에 (0, 11, 0) 은 (1, 0, 0) 을 넘을 수 없다. 스타일이 안 먹을 때 어떻게 찾나? 개발자도구 Styles 패널에서 취소선이 그어진 속성을 찾고, 어떤 규칙한테 졌는지 확인한다. 그 다음에 !important 대신 선택자를 조금 더 구체적으로 쓰거나 순서를 바꿔서 해결한다. 정리하면서 느낀 점 두 개를 같이 정리해 보니 공통점이 있었다. 둘 다 "일단 화면에 나오면 됐지"에서 한 단계 더 나아가는 내용이라는 것이다. 시맨틱 태그는 HTML을 의미에 맞게 쓰는 거고, Cascading은 CSS가 왜 이렇게 적용되는지 이해하고 쓰는 거다. 결국 둘 다 나중에 나나 다른 사람이 코드를 봤을 때 덜 헤매게 하려는 것 같다. 참고 MDN - HTML 요소 참고서 MDN - 계단식, 우선순위, 상속