1. 에디터 설치 - 비주얼 스튜디오 코드 Visual Studio Code
서브라임텍스트, 이클립스 등 많은 에디터가 있지만, Visual Studio Code를 사용하려 한다.
설치 방법은 딱히 설정 할 것 없이 다음다음 눌러주면 된다.
설치는 공식홈페이지에서 하면 되고 아래 링크를 누르면 공식 홈페이지로 연결된다.
https://code.visualstudio.com/Download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
2. 웹
웹페이지 크게 html, css, JavaScript(JQuery등)3가지의 요소로 구성된다.
지금 공부를 시작한 html은 웹 문서의 뼈대를 만드는, 구조를 선언하는 언어이다.
스타일시트라고 불리는 CSS는 색깔이나 폰트 등 html의 디자인적인 부분을 선언하는 언어이다.
JavaScript는 객체지향 스크립트언어이다. 이는 웹 페이지의 동적인 작업을 담당하는 언어이다.
3. html 기본 구조
웹 공부를 시작하기 앞서, 코딩은 디렉토리 관리가 중요하다고 생각한다.
내가 사용할 디렉토리를 하나 생성 해 놓고 개발공부를 한다면 수월한 코딩공부가 가능할것이라 생각한다.
<html>
<head>
<title>문서 제목</title>
<!-- JavaScript등 프로그램적인 언어를 선언하는 부분 -->
</head>
<body>
웹브라우저에 실제로 보이는 부분
</body>
</html>위 코드는 html문서의 가장 기본적인 구조이다.
html은 <>로 감싸진, '태그'라고 불리는 것들로 이루어져 있으며, 이 태그들은 글자입력 또는 버튼생성등을 하는 명령어라고 생각하면 된다.
각각의 태그들은 그들만의 속성을 가지고 있다. 속성이 있는 태그들은 추후 공부하며 더 알아보도록 하겠다.
기본적으로 태그는 하나의 쌍으로 구성되어있다.
예를들어<html>로 태그가 열리면 닫힘태그</html>가 필요하다. 단 예외인 태그도 있다.
<html> 태그는 이 문서를 정의해주는 태그이다. 이 문서는 html이라고 선언 해 주는 것이다.
<head> 는 추후에 공부할 JavaScript등 프로그램적 언어를 선언하는 부분이다.
<body> 는 웹 브라우저에서 실제로 나타나 보이는 부분이다.
<title> 은 문서의 제목을 선언하는 부분이다.
<!-- --> 태그 사이에 주석을 작성 할 수 있다. 코딩결과에 영향을 받지 않는 메모장이다.
이 코드를 저장하고 실행해 보면 아래와같은 웹 페이지가 하나 나온다.
'프론트엔드 > html' 카테고리의 다른 글
| html 테이블 구조 연습 (1) | 2021.06.28 |
|---|---|
| html 테이블 태그 - table (0) | 2021.06.23 |
| html 하이퍼링크 태그 - a (0) | 2021.06.23 |
| html 이미지태그 - img (0) | 2021.06.23 |
| html 글자태그 - 줄바꿈, 공백, 제목, 리스트 (0) | 2021.06.23 |