자바스크립트 기초로 변수, 타입, 함수, 조건문, 문자열, 반복문을 공부하고, 오늘부터는 HTML과 CSS의 기초를 공부한다.
다행히 이것들은 본격 공부를 시작하기 전에 유튜브를 보면서
깨작깨작 따라해본적이 있어서 크게 낯설게 느껴지지 않았다.
기본적으로,
- HTML -> Structrue(구조)
- CSS -> Presentation(스타일)
- JavaScript -> Interaction(상호작용)
위와 같은 특성을 갖는다.
HTML로 웹을 구성하는 뼈대(구조)를 만들고,
그 안에 웹을 꾸며주는 CSS로 스타일링을 해주고,
JavaScript로 상호작용하는 웹으로 만들어준다.
오늘은 HTML의 기초 먼저 공부해보자.
HTML의 기본적인 구조를 작성해보면
<!DOCTYPE html>
<head>
<title>page title</title>
</head>
<body>
<h1>HTML</h1>
<div>Contents
<span>too</sspan>
</div>
</body>
</html>
위와 같이 나타낼 수 있다.
이때, 많은 tag들로 이루어지는데,
tag는 부등호(<>)로 묶여있다.
tag는 (</>)로 끝낸다.
몇가지 태그를 아래에서 살펴보자.
<h1>내용<h1>
-> Headline 즉 본문을 시작할때 제목을 크기로서 표시해준다.
h1부터 h6까지, 갈수록 글자 크기는 작아진다.
<div>내용</div>
-> Block element로서, 한 줄 전체를 차지하기 떄문에
내용을 입력하면 줄바꿈이 된다.
<span>내용</span>
-> Inline element로서, 내용이 줄바꿈되지 않고 이어진다.
<img src = "경로/이름.jpg"></img>
-> 이미지 파일을 로드한다.
(경로를 지정할때, ./는 현재 폴더, ../는 상위 폴더를 의미,
ex) ./img.jpg -> 현재 폴더의 img.jpg 라는 이미지 파일
ex) ../img.jpg -> 상위 폴더의 img.jpg라는 이미지 파일
ex) ../../img.jpg -> 상위 폴더의 상위 폴더의 img.jpg라는 이미지 파일.
<a href = "링크 주소">하이퍼링크 이름</a>
-> a (anchor, 닻) tag는 뜻 그대로 웹이라는 바다에 닻을 내린다고 생각하자. 하이퍼링크를 씌울때 사용한다.
