우리가 배울 것들
HTML
웹 페이지의 구조를 정의하는 언어
https://www.w3schools.com/html/default.asp
- 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다.
- 태그(tag) 기반으로 되어 있으며, , , 등 다양한 태그를 사용하여 문서의 구조를 만듭니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 기본 문서</title>
</head>
<body>
<div class="wrap">
<h1>HTML 기본 문서</h1>
<p>HTML은 웹 문서를 만드는 언어입니다.</p>
</div>
</body>
</html>CSS 란?
웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어
https://www.w3schools.com/css/default.asp
- HTML 요소의 색상, 폰트, 간격, 크기 등을 설정하여 사용자에게 보여지는 페이지의 시각적인 면을 꾸밉니다.
- 클래스, ID, 태그 등 다양한 선택자(selector)를 사용하여 특정 HTML 요소를 대상으로 스타일을 적용합니다.
/* style.css */
.wrap {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #eee;
border: 1px solid #ddd;
}
h1 {
font-size: 30px;
font-weight: bold;
color: #333;
}
p {
font-size: 16px;
color: #333;
}
javascript(js) 란?
웹 페이지에 상호작용을 추가하는 프로그래밍 언어
https://www.w3schools.com/js/default.asp
- 사용자 이벤트 처리, 데이터 조작, 동적인 콘텐츠 생성 등을 통해 웹 페이지를 동적이고 살아있는 것처럼 만듭니다.
- HTML과 CSS와 결합하여 사용자 인터페이스(UI) 구성요소를 조작하고, 클라이언트 측 스크립팅에 주로 사용됩니다.
// script.js
var wrap = document.querySelector('.wrap');
var h1 = document.querySelector('h1');
var p = document.querySelector('p');
wrap.style.backgroundColor = '#eee';
wrap.style.border = '1px solid #ddd';
wrap.style.width = '500px';
wrap.style.margin = '0 auto';React 란?
사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
https://ko.legacy.reactjs.org/
- 컴포넌트 기반의 아키텍처를 사용하여 대규모 애플리케이션의 UI를 효율적으로 구축할 수 있도록 도와줍니다.
- 데이터가 변경될 때마다 적절한 컴포넌트를 효율적으로 업데이트하고 렌더링하는 것을 목표로 합니다.
- Facebook이 개발했으며, 대규모 애플리케이션의 데이터 관리에 효과적입니다.
웹표준이란?
w3c에서 정한웹 사이트를 만들 때 지켜야 하는 규칙
- 웹 표준을 지켜 사이트를 제작하면 모든 브라우저(크롬, 사파리, 파이어폭스, 오페라, 엣지)에서 동일한 웹 사이트를 볼 수 있다.
- 웹 표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 때문에 웹 개발자와 디자이너의 시간 절약을 할 수 있다.
- HTML5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것
웹접근성이란?
모든 사람이 웹 사이트를 이용할 수 있게 하는 것
- 한국웹접근성인증평가원에서 심사 후 인증마크를 받을 수 있다.
- 시각장애인, 저시력자, 청각장애인 등 모든 사람이 웹 사이트를 이용할 수 있게 하는 것
- 시각장애인은 스크린리더라는 프로그램을 사용해 웹사이트를 읽어주는 사운드로 웹 사이트를 이용한다.
- 웹 접근성을 지키면 검색 엔진에서 노출되기 쉽고, 모든 기기에서 웹 사이트를 볼 수 있다.
HTML5와 CSS3를 공부해면 무엇을 할 수 있을까?
웹 사이트를 만들 수 있다.
- 최신 웹 표준에 맞는 웹 사이트 제작 (반응형 디자인) 가능하다.
- HTML5의 API를 사용해 ‘웹앱’을 만들 수도 있다.
- 카페24, 고도몰, 워드프레스, 그누보드 등을 사용해 웹 사이트, 블로그 소스를 이해할 수 있고 사이트를 원하는 모습으로 바꿀 수 있다.
웹브라우저
웹 문서를 해석해서 보여주는 프로그램
- 크롬(기본 사용), 사파리, 파이어폭스, 오페라, 엣지 등
- 웹 표준을 지키지 않은 문서는 브라우저에서 정상적으로 보여지지 않는다.
- Chrome 브라우저 설치 후 기본 브라우저로 설정
https://www.google.com/intl/ko_kr/chrome/
웹편집기
웹 문서를 만드는 프로그램
- 대부분의 주요 플랫폼에서 모두 사용할 수 있습니다.
- 태그와 CSS 속성을 간편하게 입력할 수 있습니다
- 확장 프로그램을 설치하면 더욱 편리하게 사용할 수 있습니다.
- Visual Studio Code 설치
- Visual Studio Code : https://code.visualstudio.com/
- VScode 설치하고 github 사용하기 : https://odada.me/284
GitHub
웹 문서를 저장하는 웹 사이트
- GitHub : https://github.com/
- GitHub 가입, 설치, 업로드하기 : https://odada.me/283