231228 HTML index.jsp
2024. 1. 2. 18:39ㆍ2023.11.21-2024.05.31
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>들쑥날쑥 오늘 할 것</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diphylleia&family=Hahmlet:wght@600&family=Hi+Melody&family=Sunflower:wght@700&display=swap" rel="stylesheet">
</head>
<body style="background-color:green;font-family: Hahmlet ;font-size: 15pt ">
<!--목록 태그-->
<h1>2023-12-28</h1>
<h1 style="background-color:yellow">밥은 먹고 다니냐?</h1>
<ol start="5">
<!--"Ordered List",순서가 있는 목록을 정의, 번호 -->
<li>start="5" 5부터 시작(5,6,7)</li>
<li>reversed 는 역순으로 나오게하기</li>
<li>type="A" A,B,C로 표현</li>
<li>팀뽑기 웹버전으로 만들기</li>
<li>html/css/js</li>
<li>시험</li><!-- "List Item"의 약자, 번호x -->
</ol>
<ul >
<li>circle : 원형태의 마크로 표현</li>
<li style="font-size: 20pt">목록태그</li>
<li style="font-family: D2coding">목록태그</li>
<li style="font-family: 궁서체">나 지금 진지해</li>
<li style="font-family: Diphylleia ">31일 좋아요</li>
</ul>
<img alt= "" src="./집에어쩌구.png"width="300px" height="300px">
<!--"width="500px" height="500px" 크기 설정 -->
<img alt= "" src="./뭐라고.png"width="500px" height="300px">
<hr>
지금 스페이스바 쳤습니다.<br>
지금 스페이스바 쳤습니다.
<!-- 스페이스바는 안됩니다. 특수기호를 사용해야합니다. -->
<hr>
1.조합형 한글/완성형 한글
2.아스키코드
3.euc-kr / UTF-8
4.윈도우에서 사용하는 언어셋은? ms-949
5.유니코드
<a href="./main.jsp">main</a>
</body>
</html>
|
cs |
폰트 관련 <link> 태그:
- <link> 태그를 사용하여 외부 리소스를 문서에 연결합니다.
- rel="preconnect": 현재 문서와 연결된 외부 리소스와의 사전 연결을 지시합니다. 이 부분은 웹 폰트 서버에 미리 연결을 설정해두어 폰트 다운로드 속도를 향상시킬 수 있습니다.
- rel="stylesheet": 현재 문서에 외부 스타일시트를 연결합니다.
- href="https://fonts.googleapis.com/css2?family=Diphylleia&family=Hahmlet:wght@600&family=Hi+Melody&family=Sunflower:wght@700&display=swap": Google Fonts에서 제공하는 폰트 스타일시트의 주소입니다. 이를 통해 해당 폰트들을 사용할 수 있게 됩니다.
- crossorigin: 리소스를 다운로드할 때의 CORS (Cross-Origin Resource Sharing) 정책을 설정하는데, crossorigin 속성이 있는 경우에는 해당 리소스에 대한 CORS 정책이 적용됩니다.
- 이 부분은 주로 문서의 기본 설정과 폰트 스타일을 지정하는데 사용되는 내용입니다. 웹 페이지에 사용된 폰트들은 Google Fonts에서 제공하는 것으로 보이며, link 태그를 통해 이를 연결하여 사용하고 있습니다.
<ol> (Ordered List)
- <ol> 태그는 "Ordered List"를 나타내며, 번호가 매겨진 목록을 생성합니다.
- 일반적으로 숫자(1, 2, 3, ...)로 표시되지만, 속성을 사용하여 시작 번호 및 다른 표현 방법을 설정할 수 있습니다.
- <ol> 안에 <li>(List Item) 태그를 사용하여 각 항목을 정의합니다.
<ol reversed> 예시
<li> (List Item):
- <li> 태그는 각 목록의 항목을 정의합니다.
- <ol>이나 <ul>(Unordered List) 안에 사용되어야 합니다.
- <ol> 안에 사용되면 숫자로 표시되고, <ul> 안에 사용되면 기본적으로 원형 불릿으로 표시됩니다.
font-family
CSS 속성 중 하나로, 웹 페이지에서 사용할 글꼴을 지정하는 데 사용됩니다.
이 속성은 여러 개의 글꼴 이름을 우선순위 순으로 나열하여 브라우저가 해당 글꼴을 사용할 수 있을 때까지 차례대로 시도합니다.
<img> 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다.
해당 코드에서 사용된 속성들은 다음과 같습니다:
- alt: 이미지에 대한 대체 텍스트를 지정하는 속성입니다. 이미지가 로드되지 못할 경우, 대체 텍스트가 대신 표시됩니다.
- src: 이미지 파일의 경로를 지정하는 속성입니다. ./집에어쩌구.png와 ./뭐라고.png는 각각 이미지 파일의 상대 경로를 나타냅니다.
- width와 height: 이미지의 가로 너비와 세로 높이를 지정하는 속성입니다. 첫 번째 이미지는 가로 300px, 세로 300px로 크기가 조절되었고, 두 번째 이미지는 가로 500px, 세로 300px로 크기가 조절되었습니다.
이미지의 크기를 조절할 때는 width와 height 속성을 사용하여 가로와 세로 크기를 지정할 수 있습니다. 이미지의 원래 크기를 유지하면서 특정 크기로 조절하려면 한 속성만 지정해도 됩니다. 그렇지 않으면 이미지가 비율이 깨지게 됩니다.
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 231228 HTML main.jsp (0) | 2024.01.02 |
|---|---|
| 231228 HTML board.jsp (1) | 2024.01.02 |
| 240102 프로그래머스 배열의 평균값 (0) | 2024.01.02 |
| 240102 프로그래머스 피자 나눠 먹기 3 (0) | 2024.01.02 |
| 240102 프로그래머스 피자 나눠 먹기 2 (0) | 2024.01.02 |