웹 이해해보기

웹 페이지

• 웹 페이지는 HTML, CSS, Javascript 세가지 언어로 구성되어 있다.
• HTML 을 구조
• CSS 은 시각
• Javascript 는 기능을 담당한다.

---

브라우저

• 웹 페이지를 그려주는 도구
• 크롬, 사파리 등이 있다.
• 공통적으로 HTML, CSS, Javascript 만을 인식할 수 있다.

---

HTML

• HyperTextMarkupLanguage
• 본질은 사용자 간의 소통을 위해 정해진 약속이다.
• 웹 페이지에 문서를 작성하는데 정해진 약속
• 태그를 통해 웹 페이지에 보여질 내용을 나타낸다.

---

태그

•  태그란?
  • 하나의 약속된 명령어이며, 고유한 기능을 가지고 있다.
  • <시작태그> + 내용 + </종료태그> 로 구성된 한줄을 HTML Element (요소) 라고 부른다.
  • <태그> 안에 들어간 문법에 따라 고유의 기능을 가지고 있다.
• 꾸며주는 태그
  • <strong> -> 굵은 글씨
  • <u> -> 글자 밑줄긋기
  • <i> -> 글자 기울이기
• 빈 태그 (self closing tag)
  • <br> : 줄바꿈 태그
  • <hr> : 수평선 긋는 태그
• 특정 기능이 있는 태그
  • <button> : 버튼
  • <textarea> : 입력창
• 이미지/동영상 태그
  • <img src="이미지.png"/>
  • <video muted="muted" loop="loop">
    • <source src="video.mp4">

---

특정 기능이 있는 태그와 속성 (attribute, value)

• 특정 태그는 속성과 속성의 값을 주어 더 구체적인 기능을 구현할 수 있다.
• 속성과 값은 중첩이 가능하다.

---

태그의 특징

• block 요소 : 태그 하나가 화면의 가로 넓이를 차지하는 요소
• inline 요소 : 태그 하나가 자기 넓이만 차지하는 요소

---

종속 태그

• 다른 태그와 상호작용을 통해서만 작동하는 태그

---

정리

• HTML은 공간을 만들고, 그 안에 어떤 내용으로 채워줄지 결정지어 주는 언어
  • 시작 태그와 종료 태그안에 내용을 넣어서 만들어준다.
  • 태그는 약속된 명령어다.
    • 고유의 기능을 가지고 있다.
    • 여기에 속성과 값으로 부가적인 기능을 구현할 수 있다.
      • 중첩해서 사용이 가능하다.