HTML
웹 페이지 작성할 때 사용하는 프로그래밍 언어.
<html>,<head>,<body>,<p> 등의 태그를 사용해서 표현.
CSS
HTML 태그를 어떻게 표현할지 결정한다.
JavaScript
태그 등을 클릭해서 어떤 동작을 처리할 때 사용
웹 애플리케이션을 작성/실행할 수 있도록 톰캣(Tomcat) 다운로드해야 한다.
- 톰캣 == 웹 컨테이너
이클립스에서 워크스페이스의 인코딩은 utf-8로 지정한다.
(HTML 페이지와 CSS의 인코딩 역시 utf-8)
HTML 기본 태그
- <head></head> : 인코딩, 키워드 등의 문서 정보 제공
- <title></title> : 문서의 제목 (탭 이름)
- <body></body> : 화면에 표시되는 문서의 내용
- <h1></h1> : 제목 또는 주제
- h 태그는 h1 ~ h6까지. (6으로 갈수록 크기가 작아짐)
- <p></p> : 문단의 내용 작성
글로벌 속성
- 보편적인 속성을 뜻한다.
- class : 태그에 적용할 스타일의 이름을 지정
- dir : 내용의 텍스트 방향 지정. 왼→오 (기본, ltr) / 오 →왼(rtl)
- id : 태그에 유일한 ID 부여
- style : 인라인 스타일시트 적용하기 위해 사용
뷰포트 설정
- 화면의 내용 확대/축소 배율 등을 지정.
- 웹 브라우저의 페이지 자동 크기 조정 기능 중단 목적으로 사용
--> 모바일에서 웹 페이지 실행 시 화면의 크기에 따라 자동으로 축소됨. 이를 막기 위함!
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
* 뷰포트 : 브라우저에서 문서의 내용이 표시되는 영역
<P> 태그
문단과 문단 사이 구분 시 사용. 특별한 지시가 없다면 문단을 구분하지 않음.
<br> 태그
줄 바꿈 태그,
종료 태그 없음
<img> 태그
이미지 삽입시 사용하는 태그.
리스트 태그
목록을 만들 때 사용한다.
- 순서가 있는 리스트 (넘버링) : <ol> 태그 사용
- 순서가 없는 리스트 : <ul> 태그 사용
<a> 태그
하이퍼링크를 이용해서 이동할 페이지를 지정할 때 사용한다.
<a hrdf="b.html">b.html로 이동</a>img 태그를 a태그로 감싸주면 이미지 클릭 시 원하는 페이지로 이동도 가능함.
<table> 태그
표 영역만을 설정하는 태그.
표를 이루려면 행, 열 표시하는 태그를 사용해야 한다.
<tr> 태그
표의 행을 정의하는 태그.
<table> 태그에서 지정한 것을 상속받음.
<td> 태그
표의 열을 정의하는 태그
'WEB > 프론트' 카테고리의 다른 글
| [HTML] 웹 폰트 / 스크롤 컨트롤 (0) | 2024.08.06 |
|---|---|
| [HTML] style (0) | 2024.08.06 |
| [HTML] 웹 개발에서 자주 사용하는 요소와 속성들 (0) | 2024.08.06 |
| [HTML] 이미지 넣기 (0) | 2024.08.06 |
| [HTML] HTML의 기초와 기본 태그 (0) | 2024.08.06 |