웹과 연결하기 위해서는 톰캣을 사용해야 함.
https://tomcat.apache.org/download-10.cgi
Apache Tomcat® - Apache Tomcat 10 Software Downloads
Welcome to the Apache Tomcat® 10.x software download page. This page provides download links for obtaining the latest version of Tomcat 10.1.x software, as well as links to the archives of older releases. Unsure which version you need? Specification versi
tomcat.apache.org
가장 최신버전은 베타 : 버그가 많을 수 있으니 바로 한 단계 아래인 10으로 다운로드!
html의 태그는 크게 2가지로 나뉜다.
1. 사용자 눈에 안 보이는 head : 문서 설정을 의미
2. 사용자 눈에 보이는 body : console에 보이는 내용 (브라우저창)
웹 페이지 구조
1) 블록 요소 : 한 칸, 한 줄 전부를 본인이 차지하는 요소를 말한다.
2) 인라인 요소 : 내 영역만 본인이 차지하는 요소를 말한다.
<></> : 태그 요소 element
태그는 한 쌍으로 이루어져 있다.
<title> 태그
<title> 탭 이름을 의미한다</title>
<title>블록 요소</title>
<h> 태그
<h1> 부터 <h6> 까지 있음.
h1이 제일 큰 글씨, h6이 제일 작은 글씨
<body>
<h1>큰 제목</h1>
<h3>중간 제목</h3>
<h6>소 제목</h6>
</body>
만약 이 상태에서 F12 (개발자 모드)를 누르고 요소 하나에 커서를 가져다 대면, 파란색 줄이 제일 끝까지 공간을 차지하고 있는 것이 확인됨.
==> 블록 요소라는 뜻! (한 줄 모두 본인의 소유)
만약 글을 한 줄로 쭉 쓰고 싶었다면 인라인 요소를 사용해야 한다.
<strong>인라인 요소 01</strong>
<span>인라인 요소 02</span>
<strong>과 <span> 사이에 아무리 띄어쓰기를 넣어도 실제로 출력은 붙어서 출력됨.
띄어쓰기를 하고 싶은 경우에는 와 같은 제어문자를 사용해줘야 한다.
<strong>인라인 요소 01</strong>
<span>인라인 요소 02</span>
제어문자 > <
만약 >ㅅ< 이렇게 생긴 문자를 출력하고 싶다면?
* >와 <는 태그로 인식하기 때문에, >와 <를 사용해 준다.
<br> 줄 바꿈
<hr> 선
<strong> 인라인 요소 01 </strong> >ㅅ< <br> <hr>
<span> 인라인 요소 02 </span>
<br> 과 <hr> 태그의 경우에는 닫는 태그가 없음!
<a> 태그
링크를 담당함.
href를 반드시 작성해줘야 한다. (어디로 갈지!!)
<a href="https://www.naver.com/">링크 태그는 속성으로 href를 갖는다.</a>
a 태그로 페이지간의 이동도 가능하다.
<a href="NewFile01.html">NewFile01.html로 이동</a>
list 태그
<ol> 태그
순서가 있는 리스트를 만들어준다.
<ul> 태그
순서가 없는 리스트
<ol>
<li>방법을 설명하거나,</li>
<li>순서가 중요한 리스트 입력</li>
<li>활용도가 낮음</li>
</ol>
<hr>
<ul>
<li>베스트</li>
<li>신상품</li>
<li>상의</li>
<li>하의</li>
</ul>
'WEB > 프론트' 카테고리의 다른 글
| [HTML] 웹 폰트 / 스크롤 컨트롤 (0) | 2024.08.06 |
|---|---|
| [HTML] style (0) | 2024.08.06 |
| [HTML] 웹 개발에서 자주 사용하는 요소와 속성들 (0) | 2024.08.06 |
| [HTML] 이미지 넣기 (0) | 2024.08.06 |
| HTML / CSS / JavaScript 교재 정리_1 (0) | 2024.08.06 |