Our First HTML File
→ 파일명은 반드시 소문자로 작성한다.
→ 폴더명은 항상 소문자로 작성한다.
→ 파일 확장자가 .html인 이유는 HTML파일의 확장자임을 나타낸다.
→ 파일 안의 내용이 항상 변경될 때마다, 저장을 해야한다.
→ 작성 후 Live Server를 통하여 확인해보면 작성한 내용이 브라우저에서 잘 나타난다
→ 파일을 저장하지 않으면 변경된 내용이 나타나지 않으므로 반드시 저장 후 확인하면
수정된 내용인 Can I change something? 이 잘 나타난다.
Our First HTML Tag
→ HTML에서 Tag는 text를 넣어 작성한다.
text를 넣으면 그 text가 title이 된다.
<food>김치</food>
→ HTML은 시작과 끝 태그가 있고, 그 사이에는 tag의 content가 있다.
→ 끝 태그 뒤에 어떠한 내용을 적든 그것은 tag의 content가 될 수 없다
= 반드시 시작과 끝 태그 안에 내용을 적어야만 그 태그에 content로 나타난다.
→ 태그를 작성할 때에는 올바른 text와 올바른 위치에 맞는 tag를 사용하면 브라우저에서 보여지는게
바뀐다.
→ h1이라는 태그를 사용하여 text를 작성하였더니, text가 bold하고 사이즈도 더 커졌다.
→ 특별히 다른 것을 한 것이 없는데 h1태그를 사용하지 않은 text에 비하여 크고 두껍고
두 text 사이의 간격도 있다.
→ 모든 tag를 전부 기억하고 외울 필요는 없다.
→ 시작 태그만 작성하고 종료태그를 작성하지 않는다면, 종료 태그가 나타나기 전까지의 모든 내용이
해당 태그의 content가 되어 버린다.
= 그러므로 반드시 시작 태그가 있다면 종료 태그를 작성해야 한다.
→ 브라우저와 약속된 HTML 태그가 아니면 브라우저는 인식하지 못하고 평범한 text로 이해한다.
Tag Attributes
→ 태그에 추가하는 부가적인 정보를 attribute(속성)라고 한다.
→ 수많은 태그는 수많은 attribute를 가지고 있다
→ 어떤 태그들은 공통적으로 사용하는 attribute가 있고, 어떤 태그들은 그렇지 않다.
→ path notation(경로 표기법)은 img 폴더 안에 logo.jpg 파일이 있을 때 "img/logo.svg" 이렇게
attribute의 값을 작성해주는 방식을 말한다.
→ <!DOCTYPE html> 은 이 파일이 단순히 text가 아닌 HTML 파일임을 브라우저에게 알려주는 것
→ <html></html>태그 사이에 넣는 것이 html 코드가 된다.
→ 웹 사이트의 구조는 두 개의 파트로 구성되어 있는데
<head></head>는 웹 사이트의 환경을 설정하고 외부적으로 보여지지 않는 설정을 담당
<body></body>는 사용자가 볼 수 있는 content를 보여준다.
→ 사용자가 볼 수 있는 content 부분에 내용을 작성하면 위와 같이 브라우저에 출력된다.
Its All About the Head
→ 구글이 사이트에서 title과 description을 가져온다.
→ HTML 파일에서 head태그의 meta태그를 참조하여 내용을 가져오는 것을 볼 수 있다.
<meta charset="UTF-8">
→ 브라우저에게 text를 어떻게 그려달라는지 말해주는 태그 (매우 중요)
→ 한글이나 다른 특수문자가 있는 언어를 입력할 때 브라우저가 이해를 하지 못한다면
글자가 깨져서 보일 수 있다.
<html lang="ko">
→ 우리 사이트에서 사용되는 언어가 무엇인지 알려주는 부분
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="m.png" />
→ 이 코드는 pavicon이라는 title 옆의 아이콘을 넣는 부분
<meta name="description" content="this is my website">
→ google에게 우리의 사이트 description이 무엇인지 알려주는 부분
google이 검색할 때 찾는 태그
<meta http-equiv="X-UA-Compatible" content="IE=edge">
→ 인터넷 익스플로러를 위한 태그
<meta property = "og:image" ~>
→ 카카오톡에 공유될 때 보여지는 이미지
og:image외에도 og:title, og:type, og:url, og:description, og:stie_name 등
여러가지가 존재한다.
<meta name="twitter:title" ~>
→ 트위터에 공유할 때 보여지는 내용을 담는다.
<head></head>안에 작성하는 내용은 모두 최대한 명확하게 우리의 웹사이트는 무엇인지 브라우저에게
알려주는 용도
HTML Tags
→ 모든 HTML과 CSS를 외우고 기억했다가 쓰기에는 어려울만큼 내용이 많다.
→ 이 때, mdn이라는 키워드를 붙여 mdn html tags, mdn css 등으로 검색을 하게 되면
Mozila developer network로 사이트가 안내되는데 파이어폭스 브라우저를 제작하는 회사가 제공하는
web에 관한 정보들을 정리한 문서가 나타난다.
→ mdn 키워드가 붙지 않으면 W3Schools가 나타나는데 MDN은 표준을 만들고 비영리단체이다.
W3Schools는 상업적인 이익을 가지고 있으며, W3S의 출처는 MDN이므로 MDN만 봐도 충분하다.
→ 공식 사이트에서 한국어도 지원된다.
→ 내려보면 다양한 태그들이 설명과 함께 제공된다.
→ 이런 식으로 예시도 제공된다.
→ MDN의 좋은 점은 태그를 살펴볼 때 Tag가 가지고 있는 모든 attribute가 문서에 포함
→ MDN에서 제공하는 예시를 복사하여 다양한 attribute를 적용하여 테스트해볼 수 있다.
Form tags
→ form 태그에는 엄청나게 많은 type이라는 attribute가 존재
→ placeholder라는 attribute를 추가해보면 입력창에 안내해주는 메시지가 나타난다.
<input type="file" accept=".png">
→ 이런 식으로 accept 속성을 활용하면 오로지 png 파일만 적용할 수 있다.
image/*라고 작성하면 어떤 형식이든 상관없이 이미지면 다 괜찮다.
→ required 속성을 사용하면 원치않는 값은 받지 않겠다는 메시지가 나온다.
type이 url인데 올바른 값을 입력하지 않는다면 url을 입력해달라는 메시지가 나타난다.
→ ID는 body 태그 안에 어떤 태그에든 넣을 수 있는 attribute이다.
ID는 unique identifier(고유식별자)이기 때문이다.
element 당 하나의 ID만 가질 수 있는 것이 규칙
Semantic HTML
→ 어떠한 태그들은 의미가 있고, 어떠한 태그는 의미가 없는 경우도 있다.
→ HTML 문서에서 가장 많이 보이는 태그는 div 태그이다.
→ div는 division (분할, 구분, 경계)라는 단어에서 나온 태그
→ 예를 들어, 이렇게 되어 있을 때 우리는 이것들을 좌우배치가 아니라 위아래로 배치하고 싶을 수 있다.
→ 이럴 때에 div 태그를 사용한다.
→ 단순히 div태그로 각자의 영역을 지정하여 감싸주었을 뿐인데 이전과 달리 위아래로 정렬되어 나타난다.
→ div로 감싼 박스들은 기본적으로 양옆에 서로 붙어서 나타날 수 없다.
→ div는 아무런 의미가 있는 태그는 아니지만 기능은 있다.
의미론적으로 봤을 때에는 document에는 아무런 값도 없는 box
→ 단순히 문서를 보기만해도 그 의미를 집작할 수 있는 것을 semantic이라고 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="this is my website">
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="m.png" />
<title>HOME - My first WEBSITE</title>
</head>
<body>
<header>
<h1>Hello Salty Bread</h1>
</header>
</body>
</html>
→ div와 동일한 기능을 하는 것이 예를들어 <header>라는 태그를 쓰고 웹 사이트의 header에
들어갈 내용을 작성한다면 프로그래머들은 이 구조를 보고 h1의 Hello Salty Bread의 내용이
이 웹 사이트의 header에 해당하는 내용이구나 라고 알 수 있게 된다.
→ 예전에는 이러한 semantic 태그를 사용하지 않고, <div id="header"></div>라는 방식으로
웹 사이트를 제작하였는데 나중에 사이트가 완성되고 보면 모든 웹 사이트의 코드에 div, div, div,,,
너무 많은 div들이 사용되었다.
→ semantic 태그를 사용하면 div와 같은 기능을 가지지만 읽기만해도 의미를 짐작할 수 있다.
→ 이런식으로 다양한 semantic 태그들이 있고, div를 남발하기보다는 semantic 태그를 사용하여
document와 content를 명확하게 묘사할 수 있도록 코드를 작성하자.
