https://o-fireheart-o.github.io/ 불꽃심장의 기술 학습 및 트러블 슈팅 기록 공간입니다. 기술적 글쓰기를 위한 미니멀하고 반응형인 지킬 테마입니다. 2026-07-31T14:29:43+09:00 FlameHeart https://o-fireheart-o.github.io/ Jekyll © 2026 FlameHeart /assets/img/favicons/favicon.ico /assets/img/favicons/favicon-96x96.png 2026-07-31T00:00:00+09:00 2026-07-31T14:29:02+09:00 https://o-fireheart-o.github.io/posts/04_%EA%B7%B8%EB%A3%B9-%EC%A7%93%EA%B8%B0/ FlameHeart

HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다. 예를 들어, 네이버 메인 페이지는 검색영역, 로그인 영역, 본문 배너 영역 등 관련 있는 요소끼리 그룹 지어져 있다. 웹 페이지를 만들 때 이렇게 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워지고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있다. HTML에서는 이런 그룹 짓기 작업을 div 태그와 span 태그로 수행한다. 01. hn 태그 hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용 <hn>제목</hn> hn태그는 h1부터 h6까지 6개의 태그가 있는데, 여기서 h는 heading을 의미하고 n에들어가는 숫자는 중요도를 나타낸다. 즉 같은 hn태그라...

2026-07-17T00:00:00+09:00 2026-07-31T14:06:14+09:00 https://o-fireheart-o.github.io/posts/03_%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0/ FlameHeart

01. hn 태그 hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용 <hn>제목</hn> hn태그는 h1부터 h6까지 6개의 태그가 있는데, 여기서 h는 heading을 의미하고 n에들어가는 숫자는 중요도를 나타낸다. 즉 같은 hn태그라도 h1태그가 가장 중요하며 h6태그가 상대적으로 덜 중요하다. 그냥 옵시디언의 제목 태그와 비슷한 느낌이라고 이해하면 될 것 같다. 각 태그 번호를 순차적으로 사용해야 한다고 한다(중간에 번호를 건너 뛸 수 없다). 옵시디언의 제목과는 다르다. hn태그로 작성된 텍스트는 검색 엔진에서 검색되는 키워드로 인식된다. 02. p 태그 p 태그는 본문의 문단(paragraph)를 작성할 때 사용한다. <p>내용&...

2026-07-17T00:00:00+09:00 2026-07-17T08:44:56+09:00 https://o-fireheart-o.github.io/posts/02_HTML-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0/ FlameHeart

<!DOCTYPE html> <html lang="ko">     <head>         <meta charset="UTF-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <title>My First Web Page!</title>     </head>     <body>         <!--웹 페이지에 표시할 내용을 적습니다.-->         <p...

2026-07-17T00:00:00+09:00 2026-07-17T08:44:56+09:00 https://o-fireheart-o.github.io/posts/01_HTML-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95/ FlameHeart

<!DOCTYPE html> <html lang="ko">     <head>         <meta charset="UTF-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <title>My First Web Page!</title>     </head>     <body>         <!--웹 페이지에 표시할 내용을 적습니다.-->         <p...

2026-07-17T00:00:00+09:00 2026-07-31T14:29:02+09:00 https://o-fireheart-o.github.io/posts/00_%ED%95%84%EC%88%98-Extentions/ FlameHeart

Live Server / Ritwick Dey Live Server는 가상 서버를 이용해, 작성한 HTML 코드를 실시간으로 확인할 수 있는 확장 프로그램. Auto Rename Tag / Jun Hana HTML 태그는 시작 태그와 종료태그로 구성되어 있다. 시작 태그와 종료태그는 항상 같은 태그명이어야 해서, Auto Rename Tag는 둘 중 한 쪽을 수정했을 때 다른 쪽은 자동으로 수정되게 설정 가능 HTML to CSS autocompletion / solnurkarim HTML 문서에서 class 속성으로 작성한 값을 연결된 CSS 파일에서 자동 완성되도록 지원 HTML CSS support / ecmel CSS 파일에서 작성한 클래스나 아이디 선택자 값을 연결된 HTML 문서...