퍼블리싱(Publishing)
HTML과 CSS를 사용하여 디자인된 웹사이트의 구조와 스타일을 구현하는 과정
HTML5와 CSS3를 공부해면 무엇을 할 수 있을까?
웹 사이트를 만들 수 있다.
- 최신 웹 표준에 맞는 웹 사이트 제작 (반응형 디자인) 가능하다.
- HTML5의 API를 사용해 ‘웹앱’을 만들 수도 있다.
- 카페24, 고도몰, 워드프레스, 그누보드 등을 사용해 웹 사이트, 블로그 소스를 이해할 수 있고 사이트를 원하는 모습으로 바꿀 수 있다.
HTML
웹 페이지의 구조를 정의하는 언어
https://www.w3schools.com/html/default.asp
- 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다.
- 태그(tag) 기반으로 되어 있으며,
<html>, <head>, <body>등 다양한 태그를 사용하여 문서의 구조를 만듭니다.
<!-- 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;
}웹표준이란?
w3c에서 정한웹 사이트를 만들 때 지켜야 하는 규칙
- 웹 표준을 지켜 사이트를 제작하면 모든 브라우저(크롬, 사파리, 파이어폭스, 오페라, 엣지)에서 동일한 웹 사이트를 볼 수 있다.
- 웹 표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 때문에 웹 개발자와 디자이너의 시간 절약을 할 수 있다.
- HTML5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것
웹접근성이란?
모든 사람이 웹 사이트를 이용할 수 있게 하는 것
- 한국웹접근성인증평가원에서 심사 후 인증마크를 받을 수 있다.
- 시각장애인, 저시력자, 청각장애인 등 모든 사람이 웹 사이트를 이용할 수 있게 하는 것
- 시각장애인은 스크린리더라는 프로그램을 사용해 웹사이트를 읽어주는 사운드로 웹 사이트를 이용한다.
- 웹 접근성을 지키면 검색 엔진에서 노출되기 쉽고, 모든 기기에서 웹 사이트를 볼 수 있다.
웹브라우저
웹 문서를 해석해서 보여주는 프로그램
- 크롬(기본 사용), 사파리, 파이어폭스, 오페라, 엣지 등
- 웹 표준을 지키지 않은 문서는 브라우저에서 정상적으로 보여지지 않는다.
- 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
'Publishing' 카테고리의 다른 글
| 웹사이트 제작 후 체크리스트 (0) | 2023.09.11 |
|---|---|
| 쇼핑몰 사이트 폴더 경로 설정 (0) | 2023.09.11 |
| 반응형 사이트 setting 하기 (0) | 2023.09.11 |
| HTML, CSS 첫걸음, vscode 셋팅 (0) | 2023.09.11 |
| 사이트 폴더 경로 (0) | 2023.07.24 |