HTML abbr & dfn 태그 – 용어 설명을 우아하게! HTML 문서에서 특정 용어나 약어를 사용자에게 더 친절하게 전달하고 싶을 때, 그냥 텍스트로만 보여주기엔 아쉽습니다. 그럴 땐 abbr와 dfn 태그를 활용하면 ...

HTML figure 태그 완전정복 HTML figure 태그 – 콘텐츠와 설명을 세트로 묶는 법 웹페이지를 만들다 보면 단순히 이미지만 넣는 경우가 많습니다. 그런데 이미지를 넣다 보면 이런 생각이 들죠. “이 이미지가 ...

HTML blockquote 태그 – 인용문 표현 제대로 배우기 웹페이지를 만들다 보면 이런 고민이 생깁니다. “명언을 넣고 싶은데 어떻게 해야 예쁘게 표현할까?” “책에서 본 문장을 인용하고 싶은데 어떻게 넣지?” 이럴 때 ...

HTML에서 줄바꿈과 공백 유지하기 – pre 태그 완전 이해하기 HTML로 글을 쓰다 보면 이런 상황을 자주 만나게 됩니다. “띄어쓰기를 여러 번 했는데 한 칸만 보여요!” “엔터를 쳤는데 왜 줄바꿈이 안 ...

HTML 코드 보여주기 – code 태그 완전정복! HTML 공부하다 보면 코드 예제를 글에 넣고 싶은데, 그냥 태그를 쓰면 실행돼버리는 일이 많습니다. 예를 들어 <p>문단입니다</p>를 보여주고 싶은데, 실제로는 문단이 만들어져버리죠. 이럴 ...

HTML del / ins 태그, 웹에서 삭제와 추가를 정확하게 표현하는 법 웹사이트를 운영하다 보면 글을 수정하거나 가격을 바꾸는 일이 자주 발생합니다. 이때 단순히 글씨에 줄을 긋거나 밑줄을 긋는 것으로 끝내면 ...

HTML sub과 sup 태그, 아래·위 첨자 제대로 쓰기 웹 페이지를 만들다 보면 단순한 글씨 표현을 넘어서, 위 첨자와 아래 첨자를 써야 할 때가 있습니다. 예를 들어, 수학 공식의 제곱 표현이나 ...

HTML small 태그, 작게 쓰는 게 전부일까? 웹 페이지를 만들다 보면 ‘덜 중요한 정보’를 표현해야 할 때가 있습니다. 예를 들어 저작권 안내나 부가 설명 같은 부분이죠. 이런 경우 단순히 글자를 ...

HTML에서 구분선을 넣는 태그, <hr> 완전 해부! 웹 페이지를 읽다 보면 ‘여기서 한 호흡 쉬어야겠다’ 싶은 지점이 있죠. 글의 분위기를 바꾸거나, 본문과 요약을 나누거나, 여러 항목을 정돈하는 데 꼭 필요한 ...

HTML에서 줄바꿈이 필요할 때 쓰는 태그, <br> 완전정복! 텍스트를 예쁘게 정리해 보여주고 싶었는데, 화면에서는 줄이 이어져 나와 당황해본 적 있으신가요? HTML에서는 우리가 엔터키를 눌러 줄을 바꿨다고 해서 그대로 표현되지 않아요. ...

보조 정보의 공간을 만드는 시맨틱 태그, <aside> 1. <aside> 태그란? <aside> 태그는 문서의 주된 흐름과는 다소 떨어진 보조적인 콘텐츠를 정의할 때 사용됩니다. 이 태그 안에는 관련 링크, 광고, 참고 정보, ...

웹사이트 구조를 책임지는 HTML의 길잡이, <nav> 태그 1. <nav> 태그란? <nav> 태그는 웹페이지의 내비게이션(길잡이 역할)을 담당하는 영역을 명시합니다. 흔히 웹사이트 상단 메뉴, 사이드바 메뉴, 푸터의 링크 목록 등에 쓰입니다. 이 ...