폴더를 아톰에 끌어다놓고,
맨처음 html 페이지를 만든다.
index.html으로. 웹서버들이 index파일을 제일 먼저 찾도록 설계되어 있기 때문에.
Web server are configured to look for their index page first
<name attribute="value"> Content </name>
<인간 성별="남성">인간</인간>
태그를 열고, 콘텐츠를 넣고 태그를 닫는다.
그 태그 사이에 컨텐츠가 바로 태그가 명칭하는 것임을 알 수 있음.
<title>Content</title>
문단태그 <p>
링크 <a herf="http://google.com" target="_blank">Go to Google</a>
index html파일에 링크 태그를 넣고 저장, 그 html이 저장된 폴더로 가서 html을 열어보면 하이퍼링크가 걸린 go to google 이 보임
--------
HTML 의 구조.
1. <!DOCTYPE html> 로 시작해야함. 이문서는 html을 사용한 것입니다 라고 알리는 것임. self-contained태그. 태그 그 자체로 정보를 제공하기 때문에 스스로 열고 닫음, 그래서 다른 태그들 처럼 </>닫을 필요가 없음
2. <html> <head> <body></body></head></html> 이 순서.
head는 유저에게 보이지 않음. invisiable 유저를 위한 것이 아니라 브라우저를 위한 정보. 그래서 각종 사이트에 대한 정보는 head안에다가 저장
head는 브라우저에게 웹사이트에 관해 필요한 정보를 제공할 뿐. 유저가 웹사이트에서 보는 정보는 body에 있는 것들.
head안에는 타이틀, 메타태그.
메타태그 1. meta charset
<meta charset="utf-8"> utf-8방식의 encoding으로 해당문서를 작성하겠다. (브라우저가 니가 작성하는 문서가 어떤 character(언어)로 작성되었는지를 알려줌. 만약 이 셋팅을 잘못하면 웹이???물음표 덩어리로 출력됨.
메타태그 2. meta name"=description"
<meta name="descroption" content="Welcome to my Kakao Clone"> 이건, 구글에서 뭔가를 검색했을 때 검색결과에서 각 사이트 세부 설명으로 나오는 부분.
메타태그 3. meta name="author"
<meta name="author" content="Nomad Coders">
핵심!! information 은 head contents는 body!
------
Semantic태그 :제목, 문단 내비게이션 등등 뭔가 뜻이 있는 태그
Non-semantic 태그: 아무 지칭하는 바가 없는 의미없는 태그 ex) div
컨텐츠를 쓰다가 같은 종류끼리 넣을 박스가 필요하면 쓰는 태그가 <div>
텍스트를 쓰다가 그런 박스가 필요하면 넣는 태그가 <span>
------
Giving our tags a name
header에 이름을 지어주는 것이 아주 중요. 왜냐면 나중에 CSS할 때 이 헤더는 빨간색이고 이 헤더는 파란색이야 라고 명령 내려야 하는데 그 때 이름으로 함. 이걸하는 방법은 2가지. 첫번째는 ID. 두번째는 Class.
for example )
<header id="headerNumberOne" class="defaultHeader">
각 element마다 ID는 한개씩만. ID는 고유한 것이기 때문에 여권번호.
Class는 국적처럼 여러개 존재할 수 있는 것. so 두개의 헤더가 있다고 하면 id는 고유한 이름이겠지만, class는 같을 수 있음
아래를 보면 첫번째 헤더는 headerNumberOne 이란 아이디이고 두번째 헤더는 DifferentHeader라는 아이디 가짐.
그러나 class(속성)은 같음. 속성이 같은 그룹은 반복해서 여러번 사용할 수 있음 동일한 속성이 있을 때마다 계속.
내 여권번호는 나만 가지지만, 대한민국이 국적인 사람들은 많으니까.
핵심. 고유한 element를 사용할 때는 ID를 적용. 고유하지 않은, 계속 반복되는 element의 경우 class를 적용.
