Ch.1 웹 개발 이해하기
HTML : 구조를 만드는 마크업언어
CSS : 화면, 종이, 음성이나 다른 매체상에 어떻게 렌더링 되어야 하는지 지정하는 스타일 시트 언어
JavaScript : 특정 조건에 따라 상호작용하도록 하는 프로그래밍 언어
Visual Studio Code (VScode)
Microsoft에서 개발한 코드 에디터로 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 잇는 코드 에디터
장점
- OS와 상관없이 사용이 가능
- JavaScript, HTML, CSS를 모두 편집할 수 있음
- 다양한 extenstion을 제공하여 개발자의 취향에 맞게 커스터마이징 가능
- 디버깅(debugging)이 편리함
- 무료로 사용가능
Ch.2 HTML (Hyper Text Markup Language)
HTML이란?
프로그래밍 언어가 아니라 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용되는 마크업 언어이다. 이들은 요소(elements) 로 구성되어 있으며 각 컨텐츠의 여러 부분들을 감싸고 마크업한다.
- HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup : (콘텐츠를) 표시하다
- Language : 언어
완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어지고, HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라고 한다.
html의 기본구조
<!DOCTYPE html> : 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그. 이 문서가 html 최신 표준 문법으로 작성된 문서이다.
<html> 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그. html 문서의 시작과 끝
<head> html의 문서에 대한 정보
<meta charset='utf-8'> 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그. 문자 인코딩이랑 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8방식을 사용하는 것이 좋다.
<title> 문서의 제목을 쓰는 곳. 콘텐츠는 브라우저 탭에 표시된다.</title>
</head>
<body> 브라우저 화면에 표시할 내용을 작성하는 곳</body>
</html>이러한 구조를 Tree Structure라고 한다.
요소 (Element)의 구조
<p> My dog is very cute </p>
// <p> --> opening tag
My dog is very cute --> Content
</p> --> Closing tag Tag
부등호(<>)로 묶인 HTML의 기본 구성 요소 (참고: 요소는 대소문자를 구분하지 않지만, 가독성과 기타 이유때문에 소문자로 작성한다)
Self-closing tag
태그내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능
자주 사용하는 html tag 종류
div : division, 한 줄을 차지한다.
span : span, 컨텐츠 크기만큼 공간을 차지한다.
p : paragraph, 하나의 문단을 표현하기 위하여 사용된다.
img : image, 이미지를 삽입한다. 닫는 태그 없음. <img src="이미지 주소">
a : 링크삽입. <a href="링크 주소"> target</a> target에 띄어질 이름을 쓰면된다. 새 탭으로 열고 싶을 시 target="_blank".
ul : unordered list, 순서가 지정되지 않는 리스트를 표현할 때. 점으로 리스트가 표현된다.
li : list,
ol :oredered list, 숫자로 리스트가 표현된다.
input : 입력 폼, 닫는 태그 필요없음
<div>
ID <input type="text" placeholder="type here">
</div>
<div>
Password <input type="password">
</div>
<div>
<input type='radio' name='choice' value='a'> a
<input type='radio' name='choice' value='b'> b
</div>
<div>
<input type='checkbox' checked> checked
<input type='checkbox'> ubchecked
</div>
<textarea><textarea>- Radio button : 1개만 선택가능하며 그룹(
name="choice")을 설정을 해줘야 1개만 선택가능, - checkbox : 여러개 선택가능
button
textarea : 입력 폼, 닫는 태그 필요
시멘틱 요소 (semantic element)
시멘틱이란 '의미가 있는, 의미론적인'이라는 뜻으로 시멘틱 요소는 의미를 가진 요소란 의미이다. 시멘틱 요소를 사용하는 이유는
첫째, 검색 엔진이 시멘틱 요소를 선호한다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하는데 키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여준다. 이때 시멘틱 요소를 중요한 키워드로 고려한다. 즉, 시멘틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 말이다
둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하다. 그뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽다.
아래는 주로 쓰이는 시멘틱 요소의 예다.
<article>: 독립적이고 자체 포함된 콘텐츠를 지정합니다.<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.<footer>: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.<header>: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.<nav>: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에<ul>을 넣어 목록 형태로 사용합니다.<main>: 문서의 주된 콘텐츠를 표시합니다.<section>: 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다.
레퍼런스 : W3Schools:HTML Semantic Elements
Ch. 3 HTML 심화
HTML로 웹 앱의 구조 잡기
프로토 타이핑
개발 초기에 모형을 만들어 기능의 요구사항을 파악 후 반영하는 개선 방식
id와 class
id : 고유(unique)한 이름을 붙일 때. #comment
class : 반복되는 영역을 유형별로 분류할 때. .comment
종합 퀴즈
여기서 class는 attribute name(속성이름)이고, paragraph는 attribute value(속성값)이다.
<div>요소는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있다. 다만, 작은 구역에서 불가피하게 div를 사용해야 하는 "최후의 수단(as a last resort)"으로는 사용해도 괜찮다. (자세한 설명 : 스택 오버플로우 답변)
추가 학습
<script>요소의 사용법 :<script>요소의 위치에 따른 차이점 :
