1. HTML 이해하기.
웹페이지를 만드는언어. 웹 페이지의 구조와 내용을 나타내는 'HTML'
쉽게말해, 우리가 HTML코드를 작성하게 되면 브라우저는 그것을 해석해서 화면을 나타내줍니다.
조금더 찾아본 내용.
웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어
웹 서버에서는 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 서버에서 해당 문서를 반환합니다.
* 하이퍼텍스트 = 사용자가 흐름을 선택하여 정보를 찾는 형식
* 마크업 언어 = 문서의 논리적 구조를 명시함 태그(마크, 표시)를 이용
* HTML은 파일 확장자로 .html을 씁니다.
** HTML 문법 **
* 태그
* 속성
* 태그와 중첩
* 빈 태그
* 공백
* 주석
HTML 문법 - 태그
무언가를 표시하기 위한 꼬리표, 인식하기 위한 이름표.
태그 | 내용을 나누고 어떤 역할을 하는지 구조를 정의.
시작 태그 | 컨텐츠의 시작을 표시
종료 태그 | 컨텐츠의 끝을 표시
속성
태그에 추가적으로 정보를 제공 , 원하는 대로 태그의 동작이나 표현을 조절하는 속성값.
속성 이름="속성 값"
태그의 중첩
태그 안에 얼마든지 다른 태그를 선언가능.
반드시 부모태그를 벗어나선 안됨!
빈 태그
시작태그는 있으나 종료태그가 없음.
이는 내용이 없기에 종료 태그가 필요하지 않습니다.
빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지
않더라도 다른 용도로 사용되는 태그입니다.
HTML에서의 공백
기본적으로 한칸 넘는 공백은 모두 무시합니다.
주석 :
메모의 개념. 화면에 노출X
주석의 시작은 <!-- 로 표시하고, --> 표시로 종료합니다.
HTML의 기본 구조
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시X
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 자바스크립트 파일을 연결하는 등의 역할을 합니다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다. 주로 utf-8값을 많이씁니다.(가장기본적)
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.
간단하게 정리해보자면,
<head></head>: 문서 제목, 메타 데이터 정의 등
<meta>태그 : 문서와 관련된 정보
<title></title>태그 : 웹 페이지의 제목
<body></body> : 테이블, 이미지 등 문서의 본문 텍스트 브라우저에 실질적으로 보여지는 내용 한 문서당 하나만 존재합니다.
'개발 > Web Front-End' 카테고리의 다른 글
| [Web Fe] CSS정리하기 2 (0) | 2021.06.18 |
|---|---|
| [Web Fe] CSS 정리 하기 1 (+BootStrap) (0) | 2021.06.17 |
| [Web Fe] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2021.06.17 |
| [Web Fe] HTML 태그 (0) | 2021.06.16 |
| [Web FE] 1. Web & Web Service 이해하기 (0) | 2021.01.28 |
