HTML 기초 실습하기

Seong Hyeon Kim·2025년 3월 21일

오즈코딩

목록 보기

2/5

여기서는 day1 이라는 파일명으로 생성해주었고, 확장자는 html 파일이기 때문에 .html 이라는 확장자를 지정해서 생성해줍니다.

여기서 간단하게 뼈대를 생성할수 있는 팁은 ! 를 입력하면 자동완성된 기능으로 쉽게 뼈대를 불러오기를 할 수 있고 이어서 바로 엔터키를 눌러서 실행하면 html 파일의 기본뼈대를 간단하고 빠르게 생성할수 있습니다.

<html lang="en">: HTML 문서의 시작을 나타내며, 여기서 lang 속성은 문서의 언어를 지정합니다.
<head>: 문서에 대한 메타 정보를 담고 있습니다. 예를 들면 문자 인코딩, 뷰포트 설정, 제목 등이 있습니다.
<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 적절한 뷰포트를 설정합니다.
<title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
<body>: 실제 콘텐츠가 들어가는 부분으로, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.
<h1>, <p> 등은 각각 제목과 단락을 나타내는 태그입니다. HTML은 이러한 태그를 사용하여 문서의 구조를 형성하며, 각 태그는 특정 의미를 가지고 있습니다.

위 출처를 참고해서 작성된 html 문서를 실시간으로 확인할 있는 확장 프로그램을 설치해주고 실행해줍니다.

스펠링이 조금 틀린것 같지만, 딱히 중요한건 아니고 코딩을 하다하면 결국에는 같은 의미가 될거니깐(?) 원래 목적인 입력된 글자가 잘 나오는지만 확인합니다.

원래 파일을 수정하고 저장을 하지 않으면 왼쪽상단에 파일명 우측에 흰색 동그라미가 생성되는데요,
이건 저장이 안됬다는것을 의미해서 원래는 작업한게 반영이 되지 않는데, 우리가 설치한 확장프로그램이 아주 쌈@뽕한 익스텐션이라서 저장을 안해도 바로 변경내역대로 보여주는군요.
하지만 실전에서는 저장을 해야 보인다는것을 꼭 인지하고 컨트롤 + s 혹은 cmd + s 를 눌러서 저장하는 습관을 들입시다.

큰제목 만들기

접기 기능 만들기

전 여기에 있는 접는 태그를 한번도 만들어보지 않아서 만드는 방법은 이제부터 찾아야 하는데요,
MDN, w3school 등의 공식문서급 사이트에서 찾아보는 방법도 있지만, 그러기엔 너무 오래걸릴것 같아서 빠르게 구글링을 해줍시다.
하지만 시간이 있다면 공식문서도 꼭 찾아보는게 더 도움은 될것 같네요.

html 에서 펼쳐보기 기능을 쓸것이라서 위와같이 검색했고,
구글 알고리즘의 선택을 받아서 가장 상단에 있는 축복받은 티스토리 블로그 하나를 들어가보겠습니다.

역시 코리안 스택 오버플로우 라고 불리는 티스토리 답게, 원하는 기능을 친절하게 설명해주었네요. 이 기능을 예쁘게 긁어서 가져와 줍니다.
아 그리고 이런걸 가져올때에는 가능하면 출처를 적어주는게 일종의 매너이자 국룰같은 거라고 생각합니다.
마치 운전하다가 차선바꿀려고 끼어들기에 성공했을때 뒷차에게 감사의 표시이자 셰례머니로 비상등 2번 켰다가 끄는것과 같은 급의 매너라고 생각합니다.

<detail> 태그를 먼저 생성해주면 상세정보 라는 기본 이름이 뜹니다. 우리는 펼쳐보기의 제목을 변경해야하니깐 티스토리에서 본것을 참조 해서<summary> 태그를 한개 더 생성해주고 이름을 변경해줍시다.
과제랑 색깔이 달라서 조금 맘에 안들지만 일단은 그냥 넘어가고 나중에 한번에 변경하는걸로 하겠습니다.

오늘의 할일 적기

각 태그에 개별적으로 적용해도 되지만 여기서는 태그 자체가 몇개 없기도 하고,
개인적으로 각 태그별로 적용하는 인라인 스타일은 지저분해보이고 나중에 관리하기도 불편해서 싫어하는지라, 이번에는 html 파일 상단에 CSS 를 전부다 때려박는 내부 스타일 시트 로 해보겠습니다

- 근데 생각해보니 밑줄긋기도 사용을 많이 안해본 태그인지라, 이것도 빠르게 구글링을 해서 찾아보겠습니다.