HTML&&CSS

HTML

꽃달린감나무 2022. 5. 9. 22:41
728x90
  • HTML(HyperText Markup Language)
    1. 웹 페이지를 만드는 언어
    2. HyperTex는 단순한 텍스트와 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트(링크)
    3. Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현이 가능
    4. 파일 확장자 :  .html 
  • 태그(Tag) : 무언가를 표시하기 위한 꼬리표, 이름표
<h1> hello, html</h1>
<시작태그> 내용 </종료태그>
요소  --> 시작태그 + 내용 + 종료태그
  1. 태그는 <, > 기호로 표현하며, <,> 기호 사이에 태그이름이 들어간다.
  2. 두개가 한 쌍으로 이루어진다.(시작태그, 종료태그)
  3. 종료태그는 <,>사이에 '/' 기호가 가 붙는다.
  4. 태그는 HTML뿐만 아니라 XML, SGM, XHTML 등 다양한 마크업 언어에서 모두 사용
  • 속성(Attribute)
<h1 id = "title"> hello, html</h1>
>>> h1과 id 사이의 공백 존재

<h1 id = "title" class = "main"> hello, html</h1>
>>> 하나의 태그에 여러개 속성 사용가능
>>> 속성사이를 공백으로 구분
>>>속성의 선언 순서는 태그에 영향을 미치지 않음
<h1 class = "main" id = "title"> hello, html</h1>
>>> 위 코드와 아래 코드는 같은 코드.
  1. 태그에 추가적으로 정보를 제공
  2. 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미
  3. 시작태그에서 태그이름 뒤에 공백으로 구분 후 속성 : 이름 = "속성 값"으로 표현
  4. 속성값은 홀따옴표 ''와 쌍따옴표""로 감싸 표현
  5. 하나의 태그에 여러개의 속성 사용가능
  6. 속성 사이는 공백으로 구분
  7. 속성의 선언 순서는 태그에 영향을 미치지 않음
  • 속성의 종류
  1. 모든 태그에서 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분
  2. 선택적으로  쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분
  • 빈 태그
    1. 태그는 기본적으로 시작, 내용, 종료 태그로 이루어진다.
    2. 하지만, 빈 태그는 종료태그와 내용이 존재하지 않는다.
      • <br>
      • <img src ="...">
      • <input type = "...">
      • 내용이 없기 때문에 종료태그가 필요 x
  • 빈 태그의 특징
    1. 내용만 비어있을 뿐 속성을 통해서 화면에 나타나거나 화면에 표시되지 않더라도 다른 용도로 사용
    2. 이미지, 비디오 등의 외부리소스를 삽입하는 경우가 빈 태그를 사용하ㄴ는 대표적인 경우
    3. 예시 : <img src ="c/img/paint">
    4. src 속성을 통해서 이미지 리소스의 경로("c/img/paint")를 전달
    5. 이런 태그는 개발자가 위치를 알려주고 브라우저가 위치를 통해 내용을 대체 하기 때문에 replacement 태그, 대체되는 태그라고 한다.
    6. 실제로 화면에 출력된 내용이 없어 다른 용도로 쓰이는 태그도 존재 (EX. <br>)
  • 태그 중첩
    1. 태그 안에 다른  태그를 선언할 수 있다.
    2. 태그를 중첩해서 사용시 중첩되는 태그는 부모태그를 벗어나서는 안된다.
    3. 태그 안에서 중첩이 얼마나 되는지 어떤 태그를 쓰는지 문제가 되지 않는다
    4. 하지만, 때에 따라 정해진 태그만 중첩이 가능한 태그가 있다.
<h1> hello, <i>html</i></h1> //올바른 중첩 부모태그 <h1>에 <i>태그가 들어가 있다.
<h1> hello, <i>html</h1></i> //잘못된 태그 <i> 태그가 부모태그 <h1>을 벗어남
  • 공백
    1. html은 두 칸 이상의 공백은 무시
    2. 공백이나 개행이 있더라도 공백 한 칸으로 인식
<h1>hello, html</h1> <!--한 칸 공백-->
<h1>hello,  html</h1><!--두 칸 이상의 공백-->
<h1>hello,
	 html</h1>
     <!-- 개행문자와 공백포함-->

실행결과

  • 주석
<!-- 주석내용 -->
  1. 주석은 화면에 노출되지 않고, 메모를 사용하는데 사용됩니다.
  2. 사용자가 쓰는 것이 아니라, 실제 코드를 작성하는 개발자를 위한 것입니다.

  • HTML의 기본 구조
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>
  • 문서 타입 정의(DOCTYPE)
    1.  이 문서가 어떤 버전으로 작성되었는지 알려주는 선언문이며, 반드시 문서 내 최상단에 선언되어야함
    2. <!DOCTYPE html> : html5 버전으로 작성되었음 알림.
  • <html> 요소
    1. 문서 타입 선언 후 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그
    2. <html>태그의 lang 속성은 문서가 어느 언어로 작성되었는지 의미 (ex. <html lang = "ko">)
    3. <head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.
    4. 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 함
    5. <meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정(<meta charset ="UTF-8">)
    6. <body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당한다.

 

 

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

 

728x90