비전공자를 위한 HTML/CSS 강의 수강 시작 !
1장
가장 기초가 되는 용어들을 배웠다.
일단 복습용으로 작성한 내용! 앞으로 더 풍성한 정보를 담을 수 있길!
태그 (TAG)
태그, 시작태그와 종료태그, 내용, 요소
요소라는 용어와 태그라는 용어는 혼용하니 알아서 잘 이해하기.
<h1>Hello, HTML!</h1>속성 (ATTRIBUTE)
태그 동작과 표현을 더 구체적으로 제어하기 위함. 태그에 고유한 이름을 주거나 이동할 경로를 명시하여 각 태그에 구체적인 기능을 제공하는 역할을 함
속성이름="속성값" or 속성이름='속성값' 으로 작성
<h1 id="title">Hello, HTML!</h1>시작 태그 안에 작성하며 각 속성들은 공백1칸으로 구분
<h1 id="title" class="test">Hello, HTML!</h1>속성의 종류 : 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성
선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 속성
태그 중첩 (NESTING TAGS)
태그 안에 또 다른 태그를 사용하는 것
중첩을 통해 부모태그와 자식태그의 관계가 만들어짐
올바른 예 : <h1>Hello, <i>HTML!</i></h1>
잘못된 예 : <h1>Hello, <i>HTML!</h1></i>태그 여닫는 시점 주의하기
빈 태그 (EMPTY TAG)
내용이 없기에 빈 태그라고 부른다.
문서에 무엇을 첨가하기 위해서도 이 단일 태그(Single Tag)가 사용된다
브라우저가 태그를 대체하기에 replacement tag 대체되는 태그라고도 부른다
<br>, <img src=""> 등등..공백
일반 텍스트 공백과는 차이가 있다
<h1>Hello, HTML!</h1>
<h1>Hello, HTML!</h1>
<h1>
Hello,
HTML!
</h1>
<!-- 세 코드는 전부 같은 값을 출력한다 -->위의 예시를 통해 여러개의 띄어쓰기와 개행까지 했음에도 불구하고 동일한 결과를 얻었음을 확인할 수 있었다
두칸 이상의 띄어쓰기는 전부 무시한다
주석 (COMMENT TAGS)
<!-- 내용 --> 주석 표현하기문서의 기본 구조
웹 페이지를 만들기 위한 가장 기본이 되는 정보인 HTML 문서 구조이다
브라우저는 HTML 문서 구조를 통해 HTML의 버전, 문서의 제목, 정보, 내용 등을 파악한다
몇가지 태그가 기본적으로 선언된다고 생각하면 된다
<!doctype html>
<html lang ="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문서의 기본 구조</title>
</head>
<body>
<h1>Hello, HTML!<h1>
</body>
</html>!doctype html 은 최상단에 선언해야한다
lang 속성은 브라우저에 주는 속성이다
head 는 메타데이터(metadata) 컨테이너이다. 대개 document title(필수) styles, scripts, 등등의 다른 메타데이터가 들어간다.
참고: HTML <meta> Tag
<meta> tags always go inside the <head> element,
and are typically used to specify character set,
page description, keywords, author of the document,
and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page),
search engines (keywords),
and other web services.끝.
