0. HTML + CSS + JAVA
- HTML : 웹콘텐츠의 구조 표현
- CSS : 적절한 배치와 보기좋은 디자인 표현
- Javascript : 사용자 요청을 잘 반영하여 HTML, CSS를 이리저리 움직이고 변경. 동적인 프로그래밍.
1. HTML의 기본 구성 요소 ; 태그, 속성, 문법, 주석
1-1. 태그
*태그의 형식
<태그명>
- 웹 페이지 구성 요소를 정의하는 역할
- HTML분법을 이루는 가장 작은 단위
1-2. 속성
*속성의 형식
<태그명 속성명 = "속성값">
즉, 태그가 없이 속성을 사용할 순 없다.
- 태그에 어떤 의미나 기능을 보충하는 역할
- 속성을 사용할지 말지, 몇 개를 사용할지는 내 선택
ex.
<html> // 문법의 시작
<html lang = "ko" // 주언어가 한글로 된 HTML문서의 시작
1-3. 문법
*콘텐츠가 있는 문법
<title>About grammer</title>
*콘텐츠가 없는 문법
<br>
- 콘텐츠가 없는 문법은 종료태그가 없이 시작태그만 사용한다.
1-4. 주석
*주석의 형식
<!-- 주석 내용 -->
- 보안상 중요한 내용을 넣으면 안됨
- 왜냐면 웹브라우저의 소스보기에 주석이 다 표시되니까..
2. HTML의 기본구조
설명을 위해 웹페이지를 하나 만들어보자.
코드는 다음과 같다.
(visual studio code에선 !를 입력하면 자동 완성 목록이 나오고,
idle에선 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>
<p>나의 첫번째 웹</p>
</body>
</html>
<코드 설명>
<!DOCTYPE html> <!--DTD(Document Typle Definition)의 약자로, '문서형 정의'를 의미함
웹브라우저가 처리할 HTML문서가 어떤 문서 형식을 따라야 할지를 알려줌
HTML문서를 작성할 때 항상 처음에 넣어야 함-->
<html lang="en"> <!--주언어는 영어를 사용함
모든 태그는 html시작과 끝 태그들의 사이에 위치해야함 -->
<head> <!-- head 태그는 문서의 메타데이터를 정의함
메타데이터란 HTML의 문서에 대한 정보로, 웹 브라우저에는 직접 노출되지 않음
meta, title, link, style, script등의 태그를 사용함 -->
<meta charset="UTF-8"> <!-- 문자 코드셋은 UTF-8(이걸 주로 사용함)
coded character set이란 의미, 파일의 정보 형태가 어떤 언어로 되어있는지. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 최신 렌더링 엔진으로 강제지정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 기기의 화면 너비에 맞추기
뷰포트는 웹페이지에 접속했을 때 사용자에게 보이는 화면 영역을 의미 -->
<title>Document</title> // 문서의 제목은 title
<!-- 문서의 제목은 중복 금지
중복될 시 검색 엔진이 해당 제목의 문서에 대한 신뢰성이 떨어진다 판단, 검색 엔진 노출시에 불이익을 줌) -->
</head>
<body> <!-- body태그는 웹 브라우저에 노출되는 내용을 작성하는 영역 -->
<p>나의 첫번째 웹</p>
</body>
</html>'front-end > html + css + java' 카테고리의 다른 글
| 실무에서 자주 사용하는 HTML 태그 (0) | 2023.02.14 |
|---|
