DAY1) HTML

HTML&CSS 문법

*HTML

-기본형태
태그는 각자의 의미를 가짐

<태그> <태그> -> 요소(element)

ex)
태그는 열리고 닫히는 태그 구조를 가지고있으며 한쌍 임

<h1>토끼와 거북이</h1>
<p>옛날 옛적에 ...</p>

h1 제목 1~6 대주제
P 문장, 문단

*속성(Attributes)과 값(Value)

태그(요소)의 기능을 확장하기 위해 '속성'을 사용 

<TAG 속성="값"></TAG>

ex)
img ; 이미지를 이 부분에 삽입함
src ; source, 삽입할 이미지의 경로를 지정
alt ; alternative, 대체 텍스트
이미지가 정상적으로 삽입되지 않을 경우 대체하여 나타나는 텍스트
; 닫히는 태그가 없으면 빈 태그(empty tag)라 칭함

<img src="./my_photo.jpg" alt="내 프로필 사진" />

div ; division,분할
class ; 태그가 가지는 별명 

<div class="name">홍길동</div>

*부모와 자식 요소

<PARENT>
  <CHILD></CHILD>
</PARENT>

자식의 자식 요소
; 후손(자손,하위) 요소

부모의 부모 요소
; 조상(상위) 요소

*빈 태그

;self closing tag
대부분 빈태그에는 속성="값"이 포함됨

HTML의 범위

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>

html ; index.html 파일 전체의 범위를 정의
head ; 문서의 정보
body ; 화면 출력 구조(이미지,동영상,글자)

*DOCTYPE

;DTD, Document Type Definition
;HTML 파일 버전 지정
(HTML 1,2,3,4,X-,5)

ex)

-> HTML 5 해당

*HEAD 태그

-TITLE(웹 페이지의 제목)
ex) NAVER, Google

<head>
  <title>네이버</title>
</head>

-META(웹 페이지의 정보)
기타 모든 정보를 나타내는 태그

<head>
  <meta charset="UTF-8">
  <meta name="author" content="홍길동">
  <meta name="description" content="우리 사이트가 최고!">
</head>

charset ; 캐릭터 셋트, 문자 인코딩하는 방식,텍스트가 출력되는 방식을 설정
UTF-8 ; 중국어,일본어 등 아시아권 문자를 표현하는데 특허화되어있는 인코딩 방식
name ; 정보의 종류
author ; 제작자
content ; 속성의 값을 제공

-LINK (CSS 불러오기)
;외부 문서를 연결할 때 사용 ex)html,CSS,icon
;빈 태그
;빈 태그 이므로 link사용할 경우 rel필수로 붙여야 함

ex)

rel ; (필수)관계
href ; 외부문서의 경로

-STYLE(CSS 작성하기)
CSS를 외부 문서에서 작성하여 연결하는것이 아닌 HTML 문서 내에서 작성

ex)

-SCRIPT(JS 불러오거나 작성하기)

ex)
불러오기

작성하기

JavaScript | 스코프와 클로저
@ExeptionHandler

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage