톰캣 실행하기(mac)
cd [tomcat 설치 경로]/bin
//톰캣 시작
./startup.sh
->Tomcat start>>localhost:8080
톰캣 중단
./shutdown.sh
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML(HyperText Markup Language)
[HTML 기본 태그들]
1. HTML5 선언
HTML5에서는 문서의 첫 줄에 HTML5 문서임을 선언하는 코드가 들어가야 합니다. 이 선언은 브라우저에게 HTML5 표준을 사용해 문서를 해석하라고 지시합니다.
<!DOCTYPE html>
2. 모바일 지원 태그
모바일 환경에서도 웹 페이지가 잘 표시되도록 해주는 태그입니다. viewport 메타 태그를 사용해 화면 너비를 디바이스 너비에 맞추고, 확대 비율을 1로 설정합니다. 이 태그가 없으면 모바일 화면에서 페이지가 너무 작게 표시될 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 문단 태그
HTML에서 문단을 구성하거나 텍스트를 분리하는 데 사용되는 태그들입니다.
- <br />: 줄바꿈을 할 때 사용합니다. 스스로 닫히는(Self-closing) 태그입니다.
첫 번째 줄<br />두 번째 줄- <p>: 문단을 나타내는 태그입니다. 각 문단은 <p></p>로 묶습니다.
<p>이것은 하나의 문단입니다.</p>- <div>: 블록 요소로, 주로 레이아웃을 나누거나 큰 덩어리의 콘텐츠를 그룹화할 때 사용합니다.
<div>여러 요소를 묶는 컨테이너입니다.</div>- <span>: 인라인 요소로, 텍스트의 일부에 스타일을 적용하거나 그룹화할 때 사용합니다.
<span>텍스트의 일부</span>
4. 목록 태그
HTML에서 리스트 형태의 콘텐츠를 나타낼 때 사용되는 태그들입니다.
- <ul>: 순서가 없는 목록을 만드는 태그입니다. 각 항목은 <li> 태그로 묶습니다.
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
- <ol>: 순서가 있는 목록을 만드는 태그입니다. 숫자나 알파벳 순서로 표시됩니다.
- <dl>: 정의 목록을 만들 때 사용합니다. <dt>는 정의될 항목이고, <dd>는 해당 항목의 정의를 나타냅니다.
5. 테이블 태그
- <table>: 표 전체를 감싸는 태그입니다.
- <tr>: 표의 행을 나타내는 태그입니다.
- <td>: 표의 각 셀(데이터)을 나타내는 태그입니다.
- <th>: 표의 헤더 셀을 나타내며, 기본적으로 텍스트가 굵게 표시됩니다.
<table>
<tr>
<td>1행 1열</td>
<td >1행 2열</td>
<td >1행 3열</td>
</tr>
<tr>
<td >2행 1열</td>
<td>2행 2열</td>
</tr>
<tr>
<td >3행 1열</td>
<td >3행 2열</td>
<td >3행 3열</td>
</tr>
</table>6. 이미지 태그
HTML의 <img> 태그는 웹 페이지에 이미지를 삽입할 때 사용됩니다. 이 태그는 다양한 속성을 지원하여 이미지를 효율적으로 표시하고, 접근성과 유연성을 높일 수 있습니다. <img> 태그는 스스로 닫히는(Self-closing) 태그이기 때문에 <img /> 형태로 작성됩니다.
1)기본 구조
이미지를 삽입할 때 가장 기본적인 형태의 <img> 태그는 다음과 같습니다.
<img src="image.jpg" alt="이미지 설명" />- src (source): 이미지 파일의 경로를 지정합니다. 로컬 파일 경로나 절대 URL을 사용할 수 있습니다.
- alt (alternative text): 이미지가 표시되지 않을 때 대체 텍스트를 나타냅니다. 시각 장애인을 위한 접근성을 높이는 데 중요한 속성입니다.
2)주요 속성들
📌src (필수)
이미지 파일의 경로를 지정하는 속성입니다. 이 속성이 없으면 이미지가 표시되지 않습니다.
- 절대 경로: 외부 URL을 사용하여 이미지를 삽입할 수 있습니다.
- 상대 경로: 현재 페이지와 같은 서버에 있는 이미지 파일을 상대 경로로 삽입할 수 있습니다.
<img src="images/picture.jpg" alt="내부 이미지" />
📌alt (필수)
이미지의 대체 텍스트를 지정하는 속성입니다. 이미지를 볼 수 없는 사용자에게 텍스트로 설명을 제공하며, SEO(검색 엔진 최적화)에도 도움이 됩니다.
<img src="image.jpg" alt="꽃이 핀 아름다운 정원" />📌width와 height
이미지의 가로 및 세로 크기를 지정합니다. 픽셀(px)이나 퍼센트(%) 단위로 설정할 수 있으며, 원본 비율을 유지하려면 한쪽 크기만 설정하는 것이 좋습니다.
<img src="image.jpg" alt="사이즈 설정 예제" width="300" height="200" />- 반응형 크기 설정: %를 사용하여 화면 크기에 맞게 이미지를 조정할 수 있습니다.
<img src="image.jpg" alt="반응형 이미지" width="50%" />📌title
이미지에 마우스를 올렸을 때 툴팁으로 표시되는 텍스트를 지정합니다. 보조적인 설명을 추가할 때 유용합니다.
<img src="image.jpg" alt="풍경 이미지" title="아름다운 풍경" />
📌loading
이미지의 로딩 방식을 지정하는 속성입니다. lazy 값으로 설정하면 스크롤을 내려서 이미지가 화면에 나타날 때 로드되므로 페이지 로딩 속도를 개선할 수 있습니다.
- lazy: 필요한 순간까지 이미지를 로드하지 않습니다 (지연 로딩).
- eager: 즉시 이미지를 로드합니다 (기본값).
<img src="image.jpg" alt="지연 로딩 이미지" loading="lazy" />📌srcset과 sizes
반응형 이미지를 제공할 때 사용되는 속성으로, 다양한 화면 크기에 따라 다른 해상도의 이미지를 선택적으로 로드할 수 있게 합니다.
- srcset: 이미지 파일을 여러 해상도로 제공하여 최적의 해상도를 자동으로 선택합니다.
- sizes: 뷰포트의 너비에 따라 이미지를 표시할 크기를 정의합니다.
<img src="image-400.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="반응형 이미지" />
6. 링크 태그
HTML에서 <a> 태그는 링크를 생성하는 데 사용됩니다. <a> 태그를 사용하여 다른 페이지, 파일, 이메일 주소, 전화번호 등 다양한 리소스로 연결할 수 있습니다.
기본 <a> 태그 구조
<a> 태그는 링크를 생성하는데, href 속성에 이동할 URL을 지정하고, 링크 텍스트를 태그 사이에 작성합니다.
Example 사이트로 이동이 기본 구조에서 href 속성은 링크가 연결될 URL을 지정하고, "Example 사이트로 이동"은 클릭 가능한 텍스트로 표시됩니다.
주요 속성들
1)href (필수)
- 링크의 목적지 URL을 지정하는 속성입니다.
- 절대 경로 또는 상대 경로를 사용할 수 있으며, 외부 사이트 URL, 내부 페이지 경로, 파일 경로 등 다양한 형태로 사용됩니다.
<!-- 외부 링크 -->
외부 사이트로 이동
<!-- 내부 링크 -->
<a href="/about">About 페이지로 이동</a>
<!-- 파일 다운로드 링크 -->
<a href="/files/document.pdf">PDF 파일 다운로드</a>2) target
- 링크를 클릭했을 때 열릴 위치를 지정하는 속성입니다.
- 주로 _blank, _self, _parent, _top의 네 가지 값을 사용합니다.
| 값 | 설명 |
| _blank | 새 탭이나 새 창에서 링크 열기 |
| _self | 현재 탭 또는 창에서 링크 열기 (기본값) |
| _parent | 부모 프레임에서 링크 열기 |
| _top | 최상위 프레임에서 링크 열기 |
HTML에서 <a> 태그는 링크를 생성하는 데 사용됩니다. <a> 태그를 사용하여 다른 페이지, 파일, 이메일 주소, 전화번호 등 다양한 리소스로 연결할 수 있습니다. 이 태그는 여러 속성을 통해 링크의 동작 방식을 제어할 수 있습니다. 여기에서는 <a> 태그의 다양한 속성 및 활용 예시를 설명하겠습니다.
| 속성 | 설명 | 예시 |
| href | 링크의 목적지 URL을 지정 | href="https://example.com" |
| target | 링크가 열릴 위치를 지정 (_blank, _self 등) | target="_blank" |
| rel | 링크와 대상 간의 관계를 설정 (noopener, noreferrer, nofollow 등) | rel="noopener noreferrer" |
| download | 링크된 파일을 다운로드할 수 있도록 설정 | download="report.pdf" |
| title | 링크에 대한 추가 설명을 제공, 마우스 오버 시 툴팁으로 표시 | title="보고서 다운로드" |
| hreflang | 링크 대상의 언어를 지정 | hreflang="es" |
| tel: | 전화번호를 링크하여 클릭 시 전화 걸기 기능 제공 | href="tel:+821012345678" |
| mailto: | 이메일 주소를 링크하여 클릭 시 이메일 클라이언트 열림 | href="mailto:info@example.com" |
<!-- 외부 링크, 새 탭에서 열기, 보안 강화 -->
Example 사이트로 이동
</a>
<!-- 파일 다운로드 링크 -->
<a href="/files/report.pdf" download="연간보고서.pdf" title="연간 보고서 다운로드">
연간 보고서 다운로드
</a>
<!-- 전화번호 링크 (모바일에서 클릭 시 전화 걸기) -->
<a href="tel:+821012345678" title="홍길동에게 전화하기">
홍길동에게 전화 걸기
</a>
<!-- 이메일 링크 (클릭 시 이메일 클라이언트 실행) -->
<a href="mailto:info@example.com?subject=문의사항&body=안녕하세요, 궁금한 사항이 있습니다.">
이메일 보내기
</a>
'Backend > Web' 카테고리의 다른 글
| JSP(Java Server Page)/Sevelt (1) | 2024.11.07 |
|---|---|
| [JavaScript] DOM 폼 (1) | 2024.11.06 |
| [JavaScript]배열 / 객체 / 내장클래스 (3) | 2024.11.06 |
| [JavaScript] 기본문법 / 함수 / 이벤트 (1) | 2024.11.06 |
| [HTML] Form (0) | 2024.11.05 |