#문장 태그
< —! —> :작업보안 기호, 주석처리
<img src = “html.png”>
속성명 속성값
<head>:문서에 대한 정보, 외부 소스 참조
<body>:html바로 아래, head다음에 위치.
<bar>:줄바꿈 태그. 줄바꿈은 ‘/’기호 따로 불필요함
#글자 태그
:일반,b태그,style bold,strong태그
단락지정: p태그
줄바꿈: b태그
./ : ‘현재 작업중인 페이지’
../ :’상위폴더 이동’
웹 서버
웹 서버는 하드웨어,소프트웨어 두가지 측면으로 구분
1.하드웨어
-웹사이트 컴포넌트 파일을 저장하는 컴퓨터
-컴포넌트 파일에는 HTML,Image,CSS,Javascript가 존재
-컴포넌트 파일을 인터넷을 통해 클라이언트에게 전달
2.소프트 웨어
사용자가 어떻게 호스트 파일들에 접근하는지 관리
웹 서버는 주소 HTTP프로토콜을 사용하여 클라이언트 요청을 처리 및 응답
#HTML 메타데이터
참고 링크:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
Getting started with HTML - Learn web development | MDN
You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.
developer.mozilla.org
1.HTML
HTML: markup language that tells web browsers how to structure the web pages you visit.
웹페이지를 기술하기 위한 마크업 언어. 웹페이지의 내용(content)와 구조(structure)을 담당하는 언어
#Adding attributes to an element#
-href: specifies the web address for the link
-title: specifies extra information about the link
-target: specifies the browsing context used to display the link.
문서의 character 인코딩을 특정하기
<meta charset="utf-8">문서의 character-문서에서 허용하는 문자집합(character set)-encoding에 대해 간단히 표시함.
utf-8은 전세계적인 character집합으로 많은 언어들을 문자들을 포함함
.
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color:black;
color: white;
}
</style>
</head>
<body>
<p>Test</p>
</body>
</html>css파일 link걸기
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>link tag : link 태그로 사용할 css파일을 링크해준다.
href속성: 참조할 css파일 경로를 지정해준다.
type속성: link태그로 연결되는 파일이 어떤 것인지 알려준다. css file을 연결하기 때문에 type은 항상 text/css다.
rel속성: html파일과 css파일과의 관계를 설명하는 속성. css파일을 링크할 때는 항상 stylesheet값을 대입한다.
[HTML의 요소]
HTML Reference (w3schools.com)
HTML Reference
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의 속성]
HTML Attributes (w3schools.com)
HTML Attributes
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
# Headings Tag(제목 태그)
# Text Tag(글자 태그)
2.Tag
Style Tag
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color : black;
color : white;
}
</style>
</head>
<body>
<p>Test</p>
</body>
</html>Link Tag
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>Script Tag
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
<script>
document.addEventListener('click,function() {
alert('Clicked!');
});
</script>
</head>
<body>
<p>Test</p>
</body>
</html>head Tag
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css" >
<script src="test.js"></script>
</head>
<body>
<p>test</p>
</body>
</html>body Tag(굵은 글씨 태그) / br Tag(줄바꿈 태그) / P Tag(단락 지정) <p></p> /hr Tag
<!-- 웹 브라우저에게 html문서라고 알려주는 부분 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--title은 탭에 이름을 지정-->
</head>
<body>
<p>
<h1>추경호 부총리</h1> 겸 <h1>기획재정부 장관</h1>이 기업인과 만난 자리에서 법인세 인하와 가업상속공제 개편을 약속했다. <br>그는 당분간 5%대 고물가가 이어질 것을 예상하면서 기업에 ‘가격 상승요인 흡수’를 주문하기도 했다.<br>
</p>
<P>
<br>추 부총리는 2일 서울 중구 대한상공회의소에서 열린 경제단체장 간담회에서 “과감한 규제 혁파와 법인세, 가업상속·기업승계 관련 세제 개편 등을 통해<br> 기업 주도의 투자와 일자리 창출을 적극적으로 뒷받침해 나갈 계획”이라고 밝혔다.<br>
</P>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<h7>제목7</h7>
</body>
</html>
하이퍼링크
동영상,음악,그림,프로그램,파일,글 등의 특정 위치를 지정할 수 있음. 웹사이트 or 프로그램으로 이동
1 | <a href = "http://www.google.com"><Google></a> | cs |
디렉토리
| 루트 디렉토리 | 파일 시스템 계층 최상위 디렉토리 | C:\ |
| 홈 디렉토리 | 시스템의 사용자에게 할당된 개별 디렉토리 | C:\Users\{계정명} |
| 작업 디렉토리 | 작업 중인 파일에 위치한 디렉토리 | ./ |
| 부모 디렉토리 = | 작업 디렉토리의 부모 디렉토리 | ../ |
파일의 경로
| 절대 경로 | 현재 작업 디렉토리와 관계없이 특정 파일의 절대적인 위치를 지정한다. | http://www.google.com C:\users\test\Desktop\index.html |
| 상대 경로 | 현재 작업 디렉토리를 기준으로 특정 파일의 상대적인 위치를 지정한다. | ./index.html .../route/second,html |
| Fragment identifier |
페이지 내의 특정 id요소에 대한 링크(#{id 값}) | |
| 메일 | mailto: | |
| script | javascript:alert('test') ; |
List (비순서형 & 순서형)
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <h2> 비순서형 리스트 </h2> <ul> <li>아메리카노</li> <li>카페라떼</li> <li>카페모카</li> </ul> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <h2> 비순서형 리스트 </h2> <ol> <li>아메리카노</li> <li>카페라떼</li> <li>카페모카</li> </ol> </body> </html> | cs |
TABLE 만들기
| 태그 | 설명 |
| table | 표를 감싸는 태그 |
| tr | 표의 행을 나타내는 태그 |
| th | 표의 열을 나타내는 태그 중 제목을 표현 |
| td | 표의 열을 나타내는 태그 |
TABLE 속성
| border | 테두리 두꼐 지정(주로 css에서 사용) |
| rowspan | 해당하는 셀의 행의 수를 지정 |
| colspan | 해당하는 셀의 열의 수를 지정 |
IMAGE
FORM
form Tag는 유저가 입력한 데이터를 수집하기 위하여 사용된다. 입력 방식으로는 input, textarea, button, select, checkbox, radio button, submit button등 태그들이 있다.
·속성
action:입력 데이터가 전송될 URL지정
method:입력 데이터 전달 방식 지정(get/post)
·get
전송 URL에 입력 데이터를 리쿼스트링 형식으로 보내는 방식
전송 URL 바로 뒤에 '?'를 통하여 데이터의 시작을 알리고 'Key=value'(딕셔너리)형태의 데이터를 추가한다.
URL에 전송 데이터가 노출되기 때문에 보안에 문제가 있을 수 있으며 전송할 수 있는 데이터의 한계가 존재한다.
·post
get형식과 다르게 request body에 데이터를 담아 보내는 방식
URL에 전송 데이터가 노출되지 않아 보안적으로는 뛰어나지만 get형식에 비해 속도가 느리다.
INPUT
form태그 중에서 사용자로부터 데이터를 입력 받기 위해 사용되는 태그
form태그 내에 존재하여야 입력 데이터를 전송할 수 있다. 서버에 전송되는 데이터는 name이라는 속성을 키로 value속성을 값으로 하여 'key=value'형태로 전송된다.
select
여러 개의 리스트 중 여러 개의 아이템을 선택할 때 사용됨
서버에 전송되는 데이터는 select요소의 name을 속성의 키 값으로, option요소의 value를 key값으로 하여 key=value(속성)형태로 전송됨
CSS
CSS는 HTML의 각 요소(Element)의 style(design,layout etc)을 정의하여 화면에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어
CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어짐
'오답 노트 > 파이썬 실습(임시폴더)' 카테고리의 다른 글
| OS함수 (0) | 2022.07.26 |
|---|---|
| 0531 (0) | 2022.05.31 |