| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- DNS #네트워크 기초 #ISP
- error
- running-config
- https
- docker image build
- Dockerfile
- L2 Network
- docker 기본
- OpenSSL
- GigabitEthernet
- 실내 유산소
- create-react-app
- mdn
- Hello 지문
- 스포틀러
- LG gram
- http proxy
- ssl
- security-level
- docker container
- docker
- Squid Proxy
- ASAv
- TroubleShooting
- docker run
- HTTPS Proxy
- docker nginx
- react
- NPX
- docker volumes
- Today
- Total
최끼리 스토리
[HTML 기초] 1-1. HTML 시작하기 본문
안녕하세요!
계룡산에 서식중인 최끼리입니다.
제가 요즘에 갑자기 웹 개발을 해보고 싶은 욕구가 번쩍이기 시작하여, React를 수박 겉핥기식으로 조금 해보았으나, 웹 개발에 대한 기초적인 지식이 없는 상태로 개발을 하다보니, 코드에 대한 효율성 없이 마구 잡이로 코딩을 하고 있다는 것을 깨달았습니다...
이에 웹 개발의 기초인 HTML(HyperText Markup Language) 부터 빠르게 공부해보자는 마음으로, HTML에 대한 블로그를 시작하고자 합니다. 해당 내용은 https://developer.mozilla.org/ko/ 를 참고하여, 공부하면서 정리하는 마음으로 작성하였으니, 좀 더 자세한 내용을 보고싶은 분들은 위 URL을 참고하시기 바랍니다.
그럼 시작하겠습니다!!!!!!!!!!!!
HTML이란?
HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하고 내용을 표현하는 데 사용되는 언어입니다. 이 언어를 사용하여 텍스트, 이미지, 링크, 표 등 다양한 요소를 웹 페이지에 구조적으로 배치할 수 있고, 웹 브라우저가 이해하고 해석할 수 있는 언어로 웹 페이지의 뼈대를 형성할 수 있습니다.
(출처: ChatGPT 검색)
HTML은 기본적으로 요소(Elements)로 구성되어 있으며, 이러한 요소들은 컨텐츠의 서로 다른 부분들을 씌우거나 감싸서 다양한 형태로 만들어주고, 특정한 방식으로 동작할 수 있도록 합니다.
HTML 요소 구조
<p> Hello Wolrd </p>
|--| Tag |--|
|- Content -|
|----- Element -----|- Tag <p>,</p>: Opening Tag(<p>)와 Closing Tag(</p>)로 구성되어 있으며, 요소(Element)의 시작과 끝을 나타냅니다.
- Content: HTML 요소 안에 포함된 실제 내용이 들어가는 부분입니다.
- Element: HTML 문서의 구조를 형성하는 기본 단위이며, 시작 Tag('<tag>')와 종료 Tag('</tag>')로 구성되어 있습니다.
HTML 요소 속성
<p class="editor-note"> Hello World </p>
|---- Attribute ----|
HTML의 요소는 위와 같이 속성(Attribute)도 가질 수 있으며, 속성은 요소에 대한 추가적인 정보를 제공하거나 요소의 동작을 제어하는 데 사용됩니다. 속성은 일반적으로 시작 Tag에 추가하며, 속성 이름과 속성 값이라는 두 부분으로 이루어져 있습니다.
1. 'class' 속성
<p class="highlight"> 강조된 단락입니다. <p>
'class' 속성은 여러 요소에 동일한 스타일이나 특성을 적용하고자 할 때 사용됩니다. 동일한 클래스를 가진 여러 요소들을 그룹화하여 스타일시트(CSS)에서 스타일을 일괄적으로 적용할 수 있습니다.
2. 'id' 속성
<p id="unique-id"> 고유한 단락입니다. <p>'id' 속성은 문서 내에서 고유한 식별자를 제공합니다. 주로 JavaScript나 CSS에서 특정 요소를 선택하거나 스타일을 지정할 때 사용합니다.
3. 'src' 속성
<img src="image.jpg" alt="이미지 설명">'src' 속성은 이미지, 비디오, 오디오 등과 같은 미디어 파일의 소스 경로를 지정할 때 사용합니다.
이 외에도 다양한 속성들이 있으며, 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept 에서 확인할 수 있습니다.
위와 같은 속성들을 사용할 때는 아래와 같은 규칙을 꼭 지켜서 사용해야 합니다.
- 요소 이름(또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
- 속성 이름 뒤에는 등호(=)가 와야 합니다.
- 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
HTML 요소 중첩
HTML에서는 요소를 중첩하여 사용할 수 있는데, 이는 요소를 다른 요소안에 넣어서 사용하는 것을 의미합니다. 예를 들어서 "이것은 강조된 단락입니다." 문장과 같이 중간에 텍스트를 강조하는 단락을 넣고자 한다면 아래와 같이 작성하면 됩니다.
<p> 이것은 <strong>강조된</strong> 단락입니다. </p>위 코드에서 '<strong>'은 텍스트를 강조하는 요소이며, <p> 단락 요소의 컨텐츠에 중첩되어 사용되었습니다. 이러한 요소 중첩을 사용할 때는 시작 Tag와 종료 Tag의 순서를 잘 지켜야 합니다.
<p> 이것은 <strong> 강조된 </p> 단락입니다. </strong> X위와 같이 중첩된 요소인 <strong> Tag를 닫지 않고, 바깥쪽에 있는 <p> Tag를 먼저 닫으면 잘못된 소스 코드 입니다.
HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<title> 페이지 제목 </title>
</head>
<body>
<h1> 제목 </h1>
<p> Hello World </p>
</body>
</html>
- <!DOCTYPE html>: HTML 문서임을 정의합니다.
- <html></html>: HTML 문서의 시작과 끝을 알리는 Tag입니다.
- <head></head>: 웹 페이지에 대한 부가적인 정보를 포함하는 부분으로, 접속하는 사람들에게 보여주는 컨텐츠가 아닌, HTML 페이지에 포함하고 싶은 정보를 위한 컨테이너 역할 부분이라고 생각하시면 됩니다.
- <title></title>: 페이지의 제목을 설정하는 Tag이며, Load된 페이지 브라우저의 탭에 나타나는 제목입니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
- <body></body>: 접속한 웹 사용자들에게 보여주고자 하는 컨텐츠를 담고 있으며, 다양한 요소를 포함할 수 있습니다.
마무리
이번 페이지는 HTML에 대한 간단한 소개와 기본적인 구조, 그리고 HTML을 구성하는 요소(Element)에 대해서 설명하였습니다. 이어서 다음 장에서는 간단한 HTML 소스 코드를 Visual Studio Code 편집기를 통해 작성해보고, 실제 웹 브라우저를 통해 작성한 HTML 페이지를 만들어보는 실습을 진행하도록 하겠습니다.
그럼 20000 !!!!