HTML, CSS, JavaScript
HTML - 웹페이지의 구조
CSS - 스타일, 디자인을 시각화
JavaScript - 상호작용하는 언어
HTML
- 웹페이지의 틀을 만드는 마크업 언어
- tag의 집합 → Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
Tree structure
- → 이 문서가 HTML 문서임을 명시
- <html> → html 시작 태그로, 문서 전체의 틀을 구성
- <head> → head 태그는 문서의 메타데이터를 선언
- <title> → 문서의 제목, 브라우저의 탭에 보여짐
- <body> → 문서의 내용을 담는 곳
- <h1> → heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
- <div> → content division을 의미하며, 불바꿈됨
- <span> → 줄바꿈이 없는 컨테이너자주 쓰이는 HTML 태그
- <div> - Division
- <span> - Span
- <img> - Image
- <a> - Link ← anchor의 약자
- <ul> & <li> - Unordered List & List Item
- <input> - Input(Text, Radio, Checkbox)
- <textarea> - Multi-line Text Input
- <button> - ButtonJavascript 실행을 위해 사용
<script src='./script.js'></script>CSS 실행을 위해 사용
<link rel="stylesheet" href="파일 이름.css" />CSS
id로 이름 붙여서 스타일링 적용
- html
<h4 id="navigation-title">This is the navigation section.</h4>- css
#navigation-title {
color: red;
}class로 분류하여 스타일링 적용
- id는 문서 내에 단 하나의 엘리먼트에만 적용할 수 있는 유일한 이름
→ 목적이 동일한 여러 엘리먼트에 적용할 떄는 class로 - html
<ul><li class="menu-item">Home</li><li class="menu-item">Mac</li><li class="menu-item">iPhone</li><li class="menu-item">iPad</li></ul>- css
.menu-item {
text-decoration: underline;
}여러 개의 class를 하나의 엘리먼트에 적용
<li class="menu-item selected">Home</li>.selected {
font-weight: bold;
color: #009999;
}