HTML,CSS 기초 (Chapter.2 [1] HTML 문법)

HTML,CSS

HTML,CSS 기초 (Chapter.2 [1] HTML 문법)

리모찌 2023. 4. 20. 00:53

[네카라쿠배 프론트엔드 취업완성 스쿨 2기]

HTML 문법

기본적으로 HTML 문법은 매우 간단하다.

태그: 각자의 의미를 가지며 다음과같은 형태를 가짐

<TAG></TAG> // tag 와 /tag 사이 전체를 하나의 요소(element) 라고 한다.

<TAG>CONTENT</TAG> // 태그와 요소는 거의 같은의미로 사용

<h1>토끼와 거북이</h1> //태그의 이름이 h1 , <h1> : 제목을 뜻함(대주제)

<p>옛날 옛적에 토끼와 거북이가 살았습니다 ...</p> //<p> : 문단을 의미

<주제1>토끼와 거북이</주제1>

<문단>옛날 옛적에 토끼와 거북이가 살았습니다 ...</문단>

또한 태그는 열리고(open) 닫히는(close) 태그 구조를 가지고 있으며 이는 한 쌍

(시작하고(start) 종료되는(end) 구조라고 부르기도 함)

이 구조는 태그의 범위를 만들어 준다.

<주제1여기서열림>토끼와 거북이</주제1여기서닫힘>

*입문자가 주의할 점은 닫히는 태그는 태그 이름 앞에 /(슬래시)가 붙는다는 것*

속성(Attribute)과 값(Value)]

<TAG 속성="값"></TAG> //alt(Alternative) = 대체 텍스트(이미지가 제대로 삽입되지 못했을때, 나타나는 글자 )

//src(source) = 소스의 위치, 소스의 값으로 경로를 입력 ㅇㅇ

<img src="./my_photo.jpg" alt="내 프로필 사진" /> //<img />는 이미지를 삽입할 때 사용하는 태그(닫힘태그가없이끝남,:빈태그)

<div class="name">홍길동</div> //<div>는 분할을 의미,<div></div>는 의미를 가지지 않는 태그로 어떤

내용이든 묶어낼(Wrap) 수 있음 위에선 '홍길동'이라는 텍스트를 묶었으나

그 내용이 무엇을 의미하는지 알 수 없기 때문에 name이라는 태그 별명(class)을 추가

<이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" />

<의미없는분할 태그별명="name">홍길동</의미없는분할>

부모와 자식요소

<PARENT> //<PARENT>의 범위: 열고닫는공간안에 요소, Contents 를 넣을 수 있다.

<CHILD></CHILD> // <CHILD> Contents 가 <PARENTS>안에 삽입되어있음

</PARENT>

<section class="fruits"> //Section 안에 h1 태그 , ul 태그 안에 li 컨텐츠가 4개 들어있음

<h1>과일 목록</h1> // 자식의 자식 요소 :후손(자손,하위)요소

<ul> // 부모의 부모 요소 : 조상(상위) 요소

</ul>

</section>

<섹션영역 태그별명="fruits">

<주제1>과일 목록</주제1>

<순서없는목록>

<항목>사과</항목>

<항목>딸기</항목>

<항목>바나나</항목>

<항목>오렌지</항목>

</순서없는목록>

</섹션영역>

빈태그

HTML에는 닫히는 개념이 없는 태그들이 있다.

<img /> //셀프 클로징 태그(빈태그)

<TAG>

<TAG/>

<TAG />

*HTML5에서는 위 2가지 형태를 다 사용할 수 있는데, XHTML 버전이나 린트(Lint) 환경 혹은 프레임워크 세팅에 따라 /를 사용하는 것이 필수가 될 수 있음*

HTML 문서의 범위

index.html 같은 HTML 파일을 우리는 HTML 문서라고 표현할 수 있다.

<!DOCTYPE html>

<html> //html 태그의 역할: index.html 같은파일의 전체문서의 해당하는 부분의 영역

<head> //head 태그의 역할 : 정보부분

문서의 정보

</head>

<body> //body 태그의 역할 : 구조부분(이미지,동영상,글자)

문서의 구조

</body>

</html>

!DOCTYPE html>

<html>

<head>

<title>내 사이트</title> //페이지의 제목

</head>

<body> //화면을 구성하는 요소들로 채워져있다.

<div>

<ul>

</ul>

</div>

</section>

</body>

</html>

DOCTYPE (DTD,버전지정)

DOCTYPE: 우리가 만드는 특정한 html 파일이 브라우저에서 어떠한 버전으로 해석되어서 페이지에 출력될지 정의하는부분

기본적으로 6가지버전

DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의

이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줌

(HTML은 크게 1, 2, 3, 4, X-, 5 버전이 있다)-

현재의 표준 모드는 HTML5 입니다.

<!DOCTYPE html> html 5버전으로 해석되서 돌아가게됨

xhtml 버전으로 만들어진 html사이트는 아래의 코드를 작성해줘야함 : <!DOCTYPE html PUBLIC>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 문서의 정보

TITLE(웹 페이지의 제목) : 웹 브라우저의 각 사이트 탭에서 이름으로 표시 (HTML 문서의 제목을 정의 )

META(웹 페이지의 정보) : HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공

빈(Empty) 태그

<head>

// 문자인코딩방식 부분은 꼭 써줘야함

//문자인코딩:텍스트가 출력하는 방식

</head>

<문서의정보범위>

<정보 문자인코딩방식="UTF-8">

<정보 정보종류="사이트제작자" 정보값="홍길동">

<정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">

</문서의정보범위>

속성 의미 값

charset 문자인코딩 방식 UTF-8, EUC-KR 등..

name 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) author, description, keywords, viewport

content name 이나 http-equiv 속성의 값을 제공

LINK(CSS 불러오기)

외부 문서를 연결할 때 사용한다. //CSS 파일등등

특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)를 불러와 연결할 때 사용, 빈(Empty) 태그

<head>

</head>

<문서의정보범위>

<외부문서연결 관계="CSS" 문서경로="./css/main.css">

<외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">

</문서의정보범위>

속성 의미 값

rel (필수)현재 문서와 외부 문서와의 관계를 지정 stylesheet, icon 등..

href 외부 문서의 위치를 지정 경로

*<link> 태그는 최소 <link rel = ""> 로 끝나야함 (rel 필수 )

STYLE(CSS 작성하기)

CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용

img { // CSS는 스타일태그 안에 써줘야함

width: 100px;

height: 200px;

}

p {

font-size: 20px;

font-weight: bold;

}

</style>

<스타일정의>

</스타일정의>

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

HTML 문서에서 CSS는, 작성된 CSS를 <link>로 불러오거나 <style></style>안에 작성

JS는 <script></script>로 이 2가지 방식을 모두 사용

function windowOnClickHandler(event) {

console.log(event);

}

window.addEventListener('click', windowOnClickHandler);

</script>

<자바스크립트 문서경로="./js/main.js"></자바스크립트>

<자바스크립트>

</자바스크립트>

HTML 문서의 구조

<body></body> 안에서 사용하는 태그들은 HTML 문서의 구조

DIV(막 쓰는 태그) : 아무런 의미를 가지지않음 -> 제어의 용도로 쓰이게됨

<div></div>의 ‘div’는 ‘division’으로 약자로 ‘분할’을 뜻하고 ‘문서의 부분이나 섹션을 정의’

명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는(wrap) 용도로 사용

보통 이렇게 묶인 부분들에 CSS나 JS를 적용

<body>

<div>

<p></p>

</div>

<div>

<p></p>

</div>

</body>

<body>

<묶음1>

<p></p>

</묶음1>

<묶음2>

<묶음2-1>

<p></p>

</묶음2-1>

</묶음2>

</body>

IMG(이미지 넣는 태그)

<img>는 HTML에 이미지를 삽입할 때 사용

(웹 페이지에 이미지를 삽입하는 방식은 크게 2가지로, ‘HTML에서 삽입(IMG)’과 ‘CSS에서 삽입(background)’이 있다)

<body>

<img src="./kitty.png" alt="냥이"> *src와 alt 두개는 필수속성*

</body>

<body>

<이미지 경로="./kitty.png" 대체텍스트="냥이">

</body>

*alt를 생략하게되면 웹표준에 어긋나게됨*