HTML
- HTML - Hypertext Markup Language
- 브라우저에게 웹사이트의 content가 무엇인지에 대해 알려준다
- 마크업 언어
- tag - 정해진 태그로 작성해야 정해진 형태로 출력된다
- attribute(속성) - tag에 추가하는 부가적인 정보
CSS
- CSS - Cascading Style Sheets
- 브라우저에게 웹사이트의 그 content가 어떻게 보여야하는지에 대해 알려준다
- 문서의 표시 방법을 기술하기 위한 스타일 시트 언어
Java Script
- JavaScript
- interactivity, 웹사이트를 똑똑하게 동적으로 만들어준다, 클릭하면 뭔가를 보여줌
- 프로그래밍 언어
Its All About the Head
<head>태그는 사이트 설정을 해준다. 부가정보(브라우저에게 사이트가 어떻게 보여지는 지, 구글이 사이트를 어떻게 바라보는지 알려준다)- 실제 화면으로 보여지는 부분은
<body>태그에 작성된다 <head>의<title>태그와<meta>태그는 구글,네이버 등의 사이트에서 검색시 매칭의 기반이된다<meta>태그는 name 속성과 content 속성으로 구성되어 있다<meta>태그의 name 속성이 'description'인 항목의 content 속성의 값이 검색 결과창에서 페이지 설명으로 보여진다<html>태그의 lang 속성은 웹사이트가 어떤 언어를 사용하는지 알려준다
More Tags
- 검색시 mdn 추가해서 검색하면 파이어폭스의 공식문서를 볼 수 있다
- HTML elements reference
Form Tags
<form>태그 - 정보 제출을 위한 문서섹션
More Tags and IDs
- id 속성 - 안에 어떤 태그에든 넣을 수 있는 속성
- unique identify(고유속성)
- element당 하나의 id만 가질 수 있다
- css에서 id 값을 가지고 꾸밀 수 있다
- label 태그와 input 태그는 한쌍
- for 속성과 id 속성이 일치하면 label 클릭 시 input 부분으로 커서가 옮겨진다
- lable안에 input을 중첩 시킬 경우 암시적으로 연관성이 있으므로 for 및 id 생략이 가능하다
<body>
<form>
<label for="website">Website</label>
<input id="website" placeholder="url" type="url" />
</form>Semantic HTML
- semantic - 문서를 보기만해도 그 의미를 짐작할 수 있는 것을 의미한다
- non-sementic
<div>- division, 의미없는 박스<span>- for short text<p>- paragraph
- semantic tag is better
<header><main><footer>
사람을 위한 기술을 공부합니다