HTML
웹 페이지의 구조(틀)를 짜는 언어
웹 페이지를 만드는 기초 작업
HTML : 구조 담당, 마크업 언어
CSS : 스타일 담당, 디자인 언어
JavaScript : 구조와 스타일이 완성된 각 요소에 생명을 부여, 유저와 상호작용할 수 있게 하는 프로그래밍 언어
Visual Studio Code (VS code)
MS에서 개발한 대중적인 코드 에디터
macOS, Linux, Windos 등 OS와 상관없이 사용 가능
HTML 기초
구조와 문법 이해하고 적용
자주 사용하는 HTML 요소(Element)
div, span 차이
ul, ol, li 언제 사용
input 요소에 type 설정, 다양한 종류의 input 요소를 활용
id와 class를 목적에 맞게 사용 → 시멘틱한(의미있는, sementic) HTML 문서를 작성
HTML5 시맨틱 요소를 적재적소에 사용 → 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성
시맨틱 요소가 무엇인가? 시맨틱 요소를 왜 사용하는가?
검색을 통한 시맨틱 요소 찾고 적절하게 적용
자주사용하는 HTML 태그
div, span 차이
div 태그 : 한줄을 차지 (block)
span 태그 : 컨텐츠 크기만큼 공간을 차지 (inline-block)
cf) 물론 css 를 통해서 재스타일링 할 수 있음
img 이미지 삽입
닫는 태그가 없음
<img src="위치" />a 링크 삽입
<a href="http://naver.com" target="_black">네이버</a>ul, li 그리고 ol 리스트
input, textarea : 입력폼
radio (여러개중 하나 선택) : name 속성으로 같은 그룹화해줘서 사용해야 유일 선택 기능 적용됨
checkbox (여러개 선택 가능) : 다중선택
textarea (줄바꿈이 되는 텍스트)
많이 쓰이는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
ID <input type="text" placeholder="type here" />
</div>
<div>
PASSWORD <input type="text" placeholder="password" />
</div>
<div>
<input type="checkbox" > 다음에 들어올 때 ID를 기억하기
</div>
<div>
<input type="radio" name="option1" /> 옵션A
<input type="radio" name="option1" /> 옵션B
</div>
<textarea placeholder="여기 작성하세요">
</textarea>
<button>로그인</button>
</body>
</html>https://codepen.io/julyk9-the-lessful/pen/PoRoeWJ?editors=1000
시맨틱 요소의 종류
시맨틱 요소의 종류는 굉장히 다양하지만 주로 쓰이는 몇 가지
<article>: 독립적이고 자체 포함된 콘텐츠<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. 사이드바나 광고창 등<footer>: 보통 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이선스, 주소, 연락처 등<header>: 주로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 들어감. 선택적으로 상단바나 검색창 등이 안에 들어가기도 함<nav>: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에<ul>을 넣어 목록 형태로 사용합니다.<main>: 문서의 주된 콘텐츠를 표시합니다.
참고 : https://developer.mozilla.org/ko/docs/Glossary/Semantics#javascript_%EC%8B%9C%EB%A7%A8%ED%8B%B1
HTML 심화
HTML로 웹 앱 구조 잡기
와이어 프레임
- 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
- 레이아웃의 형태를 잡는 단계
- 와이어프레임을 보고 HTML로 코딩할 수 있어야 함
<div>요소 또는<section>,<header>등의 시맨틱 요소로 영역을 구분하는 이유를 이해- HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해
마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
프로토타이핑: 개발 초기에 모형을 만들어 기능 요구사항을 파악 후 반영하는 개선 방식
id 및 class를 목적에 맞게 사용하기
- id : 고유한(unique) 이름을 붙일 때
- class : 반복되는 영역을 유형별로 분류할 때
https://codesandbox.io/embed/login2-practice-forked-usudwq?fontsize=14&hidenavigation=1&theme=dark
HTML <section> 요소는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용됩니다. 이 엘리먼트는 HTML5 표준의 탄생과 함께 생겨난 시맨틱 요소의 일부입니다. HTML 요소의 이름에 의미를 충분히 담고 있기 때문입니다.
<div> 요소는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있습니다. 다만, 작은 구역에서 불가피하게 div를 사용해야 하는 "최후의 수단(as a last resort)"으로는 사용해도 괜찮습니다. 좋은 스택 오버플로우 답변을 소개합니다.
img src=””
절대경로 상대경로
참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/img
더 생각해볼 것들
구조를 나타내는 요소 추가 정리
참고 : https://velog.io/@zhunhe/HTML구조를-나타내는-요소
input 태그에 여러가지 요소들이 많음 직접 해보기
date, time, color, file, number 등등
참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
form 태그
참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
button 태그 type 속성 종류
클릭(button), 제출(submit), 리셋(reset)
참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/button
p 태그 : 위아래 여백이 있음 → 하나의 단락을 표현하고 싶을 때
div 태그 : 위아래 여백이 없음
script 태그 3가지 사용법
1. body 태그 하단에 배치하고 그 안에 js 내용을 작성
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>- 왜 head 태그가 아닌 body 태그 하단에 작성할까?
https://jae04099.tistory.com/entry/HTML-script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C
- script 태그 속성 src로 외부에 생성한 js 파일을 연결해서 사용
- 외부 주소를 통해서도 추가할 수 있음
