웹페이지의 기능
콘텐츠, 스타일, 비즈니스 논리는 각각 HTML, CSS 및 JavaScript 파일로 구분된다. 최신 프로그래밍의 디자인 원칙은 ‘문제를 분리하는 것’이다. 문제를 분리하는 여러 가지 이유 중에서 두 가지 이유는 단순성과 재사용이다. 예를 들어 각 HTML 요소에서 모양을 코딩하는 대신 CSS를 사용하여 HTML 요소의 스타일을 지정함으로써 페이지 복잡성과 관계없이 페이지의 모든 요소에 CSS 스타일을 적용하여 페이지 서식 지정을 간소화할 수 있다. 또한 여러 HTML 페이지를 단일 CSS 파일에 연결하여 전체 웹 사이트에서 일관된 모양과 느낌을 간소화할 수 있다.
확장 또는 패키지 설치
Extensions Marketplace를 사용하여 Visual Studio Code의 기능을 확장할 수 있다. 이러한 확장은 커뮤니티에서 개발한 리소스이고 동일한 기능 유형의 솔루션이 몇 가지 있는 경우가 많다. 편집기에서 개별적으로 확장을 설치하거나 명령줄을 사용하여 여러 개의 확장을 한 번에 설치할 수 있다.
웹 개발의 경우 필요한 것은 open-in-browser이다. 이 확장을 사용하면 파일 URL을 복사하여 브라우저에 붙여넣는 대신 기본 브라우저에서 웹사이트를 신속하게 열 수 있다.
웹앱에 기본 HTML 추가
<!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>
</body>
</html>
HTML에는 다양한 버전이 있다. <!DOCTYPE html> 문서 유형은 HTML5 코드임을 나타낸다. meta 태그는 브라우저에서 소스 코드를 보지 않는 한 일반적으로 뷰어에 표시되지 않는 메타데이터 정보를 나타낸다. 메타 요소 또는 태그는 웹 페이지에 대한 설명 정보를 제공한다. 예를 들어 검색 엔진이 웹 페이지에서 검색 결과에 반환할 정보를 처리하는 데 도움이 된다.
UTF-8 문자 집합 (charset)은 무의미하게 보일 수 있지만 컴퓨터에서 문자를 해석하는 방법을 설정하는 데 매우 중요하다. 문자 집합에 대한 메타데이터가 없는 경우 보안이 손상될 수 있다. 문자 집합 특성에는 꽤 많은 기록과 기술 정보가 있지만 VS Code 상용구에서 적절한 기본값을 제공한다.
헤드 편집
...
<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>Simple website</title>
...
<link rel="stylesheet" href=""> # 추가웹 페이지의 HTML 요소에 스타일을 적용하려면 ‘내부 CSS’라고 하는 CSS 코드를 웹 페이지의 헤드에 직접 작성할 수 있다. 그러나 HTML 구조와 CSS 스타일 지정을 구분하는 것이 좋다. 별도의 CSS 페이지를 외부 CSS라고 한다. 코드는 간결하고 구분되었을 때 더 쉽게 읽을 수 있다. 하나 이상의 외부 스타일시트를 사용하여 여러 웹 페이지를 서비스할 수 있다. 복제된 CSS 코드를 사용하여 각 HTML 페이지를 업데이트하는 대신, 단일 CSS 파일을 변경하여 모든 종속 웹 페이지에 업데이트가 적용되도록 할 수 있다.
본문 편집
<!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>Simple website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Task List</h1>
<p id="msg">Current tasks:</p>
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
</body>
</html>
<p> 요소에 사용되는 ID 특성은 한 요소의 스타일을 지정하는 데 사용할 수 있지만, <li> 요소에 사용되는 클래스 특성은 같은 클래스의 모든 요소에 스타일을 지정하는 데 사용된다.
https://docs.microsoft.com/ko-kr/learn/modules/build-simple-website/
HTML, CSS 및 JavaScript를 사용하여 간단한 웹 사이트 빌드 - Learn
Visual Studio Code를 사용하여 HTML, CSS, JavaScript로 웹 사이트를 빌드하고, 브라우저에서 개발자 도구를 사용하여 작업을 확인함으로써 웹 개발을 시작합니다.
docs.microsoft.com
'Programming > Website' 카테고리의 다른 글
| [Website] HTML, CSS 및 JavaScript를 사용하여 간단한 웹 사이트 빌드 (3) (0) | 2022.02.06 |
|---|---|
| [Website] HTML, CSS 및 JavaScript를 사용하여 간단한 웹사이트 빌드 (2) (0) | 2022.02.06 |
| [Website] 구조화 질의 언어 (SQL ; STRUCTURED QUERY LANGUAGE) (0) | 2022.02.06 |
| [Website] 웹 개발 언어 (PHP / PYTHON / RUBY) (2) (0) | 2022.02.06 |
| [Website] 웹 개발 언어 (HTML / CSS / Javascript) (1) (0) | 2022.02.06 |
