블로그 올리는 거 깜빡하고 치킨 먹었다,,ㅇㅁㅇ
히히 어제는 시험쳤다!!다행히 100점!!!다행이다 정말
헷갈리는 문제도 있었는데 잘 풀었다 다음 시험은 실습이라는데,,ㅠㅠㅠㅠ계속 스스로 복습을 해야겠다ㅜㅜ
<프로그래밍과 HTML>
▶HTML(HyperText Markup Language) : 웹페이지를 만드는 프로그래밍 언어
□ 기본 문법 : 태그(tag) (설명하는 글)
▶<strong>내용</strong> : 글씨 굵게
▶<u></u> : 밑줄
▶<h1></h1> : 자동 줄 바꿈 h1~h6까지 존재
▶내용<br> 또는<p>내용</p> : 줄바꿈
▶<p>내용</p> : 단락 지정
▶<img src=“이미지경로”> : 이미지 넣기
<img src=“image/cafe.jpg” width="100%">
▶<ul><li>내용></li></ul> : 부모태그/ 자식 태그
▶<ol><li>내용></li></ol> :순서있는 태그
□ HTML5 페이지의 기본 구조
<!DOCTYPE html> - HTML5 문서임을 알리는 지시어
<!--이 부분은 주석문입니다. 웹 브라우저는 주석을 화면에 출력하지 않습니다.-->
<html>
<head>
문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터정의
</head>
<body>
문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
</body>
</html>
▶예제 2-1 웹 페이지 타이틀 달기
<head>
<title>첫 타이틀</title>
</head>
▶예제 2-2 <h6>태그로 문단 제목 달기
<!DOCTYPE html>
<html>
<head>
<title>문단 제목 달기</title>
</head>
<body>
<h1>1장 홈페이지 만들기</h1>
<h2>1절 HTML 언어</h2>
<h3>1. 웹</h3>
<h4>1.1 인터넷</h4>
<h5>1.1.1 네트워크</h5>
<h6>1.1.1.1. 통신</h6>
</body>
</html>
▶예제 2–5 <hr> 태그로 수평선 긋기
<!DOCTYPE html>
<html>
<head><title>수평선 긋기</title></head>
<body>
<h3>수평선 긋기</h3>
<hr>
<p>hr 태그는 horizontal에서 딴 글자입니다.</p>
<hr>
<p>종료 태그 </hr>를 사용하지 않습니다.</p>
</body>
</html>
▶예제 2–7 특수 문자, 기호, 심볼 삽입
<!DOCTYPE html>
<html>
<head>
<title>문자, 기호, 심볼 표현</title>
</head>
<body>
<h3>기호 넣기</h3>
<hr>
10 ÷ 2 = 5<br>
√2 = 1.414<br>
2 < 3<br>
오늘 "Elvis" 노래를 들었다.
</body>
</html>
▶예제 2–8 <pre> 태그로 개발자의 포맷 그대로 출력
<!DOCTYPE html>
<html>
<head><title>개발자의 포맷 그대로 출력</title></head>
<body>
<h3>개발자의 포맷 그대로 출력하기</h3>
<hr>
<p>
<p> 태그를 사용하면
여러 개의 빈 칸은 하나로,
여러 줄은 한 줄에 붙여 출력됩니다.</p>
<hr>
<pre>
그러나 <pre> 태그를 사용하면
사용자가 입력한
그대로 출력됩니다.
</pre>
</body>
</html>
▶예제 2-9 텍스트 꾸미기
<!DOCTYPE html>
<html>
<head><title>텍스트 꾸미기</title></head>
<body>
<h3> 텍스트 꾸미기</h3>
<hr>
<p>
<b>진하게</b><br> <- bold
<strong>중요한</strong>
<em>강조</em><br> <- emphasize
<i>이탤릭으로 강조</i><br> italic
<b><i>진하게 이탤릭으로 강조</i></b><br>
보통 문자 <small>한 단계 작은 문자</small><br>
<del>삭제</del><br>
<ins>추가</ins><br>
보통문자의 <sup>윗첨자</sup><br>
보통문자의 <sub>아래첨자</sub><br>
<mark>하이라이팅</mark><br>
</p>
</body>
</html>
▶예제 2-10 <div> 블록과 <span> 인라인
볼록 태그 : 양 옆에 다른 콘텐츠 배치하지 않고 한 라인 독점 사용
인라인 태그 : 볼록 속에 삽입되어 볼록의 일부로 출력
<!DOCTYPE html>
<html>
<head><title><div>블록과 <span>인라인</title></head>
<body>
<h3>사랑</h3>
<hr>
<div style="background-color:skyblue; padding:20px;"> 배경색을 파란색으로 꾸미는 css 스타일
내가 사람의 방언과 천사의 말을 할지라도
<span style="color:red">사랑</span>이 없으면
소리 나는 구리와 울리는 꽹과리가 되고,
<span style="color:red">사랑</span>이 없으면 아무
것도 아니라.
</div>
<p>
~우리 서로 사랑하며 살아요~
</p>
</body>
</html>
▶예제 2-11 <img> 태그로 이미지 삽입
'PYTHON' 카테고리의 다른 글
| [빅데이터 분석] 2022.01.03 정규표현식 (0) | 2022.01.03 |
|---|---|
| [빅데이터 분석] 2021.12.29 HTML, 블로그 내용 크롤링 (0) | 2021.12.29 |
| [빅데이터 분석] 2021.12.24 예외처리, 파일 다루기, Pickle 모듈, CSV 파일, 로그 관리, 설정 저장 (0) | 2021.12.24 |
| [빅데이터 분석] 2021.12.23 객체 지향 프로그래밍 (0) | 2021.12.23 |
| [빅데이터 분석] 2021.12.22 자료구조, 파이썬 스타일 코드 (0) | 2021.12.22 |