HTML 개념 및 기초

윤지·2024년 9월 2일

HTML/CSS/JavaScrip

목록 보기
1/13

HTML(Hypertext Markup Language)

  • 웹 페이지가 어떻게 구조화되어 있는지 브라우저에게 알 수 있도록 하는 마크업 언어입니다

<!-- 주석문 --> : 주석
<!DOCTYPE html> : html문서임을 알리는 지시어로 반드시 첫줄에 나와야 함

  • HTMl 태그가 아님
    <hade></hade> : 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트코드와 css스타일 시트등을 포함하여 문서의 본문은 포함되지 않음
    <body></body> : 문서의 본문, 자바스크립트가 들어가는 부분
  • <hade><body>사이에는 아무것도 들어갈 수 없다.
    <title></title> : 페이지의 제목으로 브라우저의 타이틀바에 출력됨
  • <head> 내에서만 작성되어야 함
    <h1~h6> : 숫자가 작아질수록 제목의 글자크기가 큰형태로 출력된다.
  • css스타일 시트를 이용하여 개발자가 변경가능함
    <h1 title = "내용">내용2</h1> : 페이지의 내용2에 마우스 커서를 올려놓을시 '내용'이 출력되게 할 수 있다.
    <P></P>: 하나의 문단을 생성하는 태그
    <hr> : 수평선 긋기
  • <hr>태그는 종료태그가 없다.
    <br>: 줄바꿈 할때 사용하는 태그
    <pre></pre> : 내가 입력한 포멧 그대로 출력가능
    <mark></mark> : 형광팬처럼 문자 강조
    <string></string> : 문자 진하게 강조
    <div></div> : 블록전체에 동일한 CSS 스타일을 적용하거나 자바 스크립트로 블록을 하나의 단위 처럼 다루고자 할때 사용
    <span></span>: 텍스트 일부분에 특별한 효과를 주거나, 자바스크립트 코드를 사용하여 텍스트의 일부분을 제어하고자 할 때 사용한다.
    <img scr>: 이미지를 사용하고자 할때 사용하는 태그 입니다.

HTML태그

html문서의 구성요소는 태그들이다.
태그는 태그 이름과 여러속성들로 구성되며, 하나의 속성은 속성이름과 값으로 구성된다.
태그와 속성은 대소문자 구분이 없습니다.
속성값에 불필요한 공백문자가 들어갈시 오류가 날수 있습니다.

- <html>, <hade>등과 같은 명령어 형태가 '<>'로 되어 있습니다.

html 태그 구성

- |----------------요 소--------------|	
     <p		  align ="center"> html </p>
	시작 태그   속성     속성값       종료 태그
* 태그 : <>로 묶인 명령어 시작 태그 <> 와 종료 태그 </> 한쌍으로 구성
		시작태그만 사용되는 것도 있습니다.
  속성 : 태그에 사용되는 추가 정보
	  속성 값 : 속성에 부여하는값. " "또는 ' '를 사용

예시코드

<img scr = "이미지이름 또는 주소" whidth = "100"; height = "50" alt ="이미지를 내가 원하는 크기에 맞게 넣을 수 있도록 해주는 태그입니다">

<p> p태그는 하나의 문단을 생성하는 태그</P>
<hr>

table, tr, td, th : 표만들때 사용
-> tr : 행
-> th : 행의 문자를 적용할 때
-> td : 열

details태그 (여닫는 위젯)
dialog태그(모달창)
input태그 (type에 따라 text상자 뿐 아니라 날짜선택등등도 가능)
datalist태그 (자동완성 검색창)
supgsub태그 (수식)
progess태그 ( 진행 막대 > 로딩중 인것을 보여줄 때)
meter태그 ( 범위 내 값 막대)

참조
https://www.youtube.com/watch?v=muQHAhjk1kw

profile
바다속 무너 개발자

0개의 댓글