Python_데이터 분석 (1) html

조아연·2024년 8월 28일

html python

프로그래밍 언어 공부

목록 보기

1/8

데이터 분석의 기초 파이썬
입문부터 웹 크롤링 빅 데이터 시각화까지 향상과정

html

[초기설정] - 파일명 설정

@@.html 로 입력

html 작성 시 visual studio 에서

! 입력 후 엔터 시 젠코딩으로 인해 삽입되며 html 형식이 자동으로 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1) 제목 태그

h1 / h2 / h3 / h4 / h5 / h6
숫자가 커질수록 중요도는 낮아짐

2) 단락 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5</title>
</head>
<body>
<h1>태그연습</h1>
<p> 녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다.</p>
<p> 녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다.</p>
</body>
</html>

<p></p> paragraph의 p로 표현, 스타일 태그를 사용해서 단락 단위로 본문 모양을 바꿀 수 있다.
단락 태그가 끝나면 자동으로 공백줄(Enter키)이 만들어진다.
<hr> 수평선을 삽입 할 수 있으며 종료태그가 없어 닫지 않아도 된다.
XHTML에서는 <hr/> 종료태그를 붙여야 한다.

3) 하이퍼 링크 삽입 방법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5</title>
</head>
<body>
<p>
    <a href="http://www.naver.com">네이버</a>
    <a href="#">링크</a>
</p>
<h1>
   <img src="image/background.jpg" alt="배경">
   <img src="image/brlogo.png" alt="logo" title="로고">
</h1>
</body>
</html>

#는 임시 링크를 나타낼 때 작성
이미지 삽입 시 동일 폴더 내 해당 파일이 같이 들어 있어야 함 (서버 업데이트는 별도)

4) 주석표시

<!-- html 주석 표시할 때 -->

단축키 : Ctrl + \

5) 특수문자 및 기호 입력 방법

엔터티 코드

<p>you &amp; me</p>
<p>&lt; br &gt;강제로 줄바꿈</p>
<p>강제<br>줄바꿈</p>

특수문자 출력 시 작성해야 하는 문자들에 대한 가이드

6) block tag, inline tag

블록태그 : <p>, <h1>, <div>, <ul>,<li>,<dt>,<dd>,<dl>,<ol>,<address>

가로100% / 줄바꿈이 일어남 / 너비와 높이 가능 / 상하 패딩 설정 가능 / 고유 여백 존재

	<p> : 단락을 정의
	<h1> ~ <h6> : 제목을 정의
	<div> : 블록 레벨 컨테이너 정의
	<ui> : 순서 없는 목록을 정의
	<ol> : 순서가 있는 목록을 정의 (ordered list)
	<li> : 목록 항목을 정의 (보통 `<ol>`와 같이 사용)
	<dt> : 정의 목록의 용어를 정의
	<dd> : 정의 목록의 용어 설명을 정의
	<dl> : 정의 목록을 정의 (definition list)
	<address> :연락처 목록을 정의

목록 태그 : <ul>, <ol>, <dl>

데이터를 리스트화 해서 나타낼 때 사용

	<ul></ul> : 순서 없는 목록
	<ol></ol> : 순서 있는 목록
	<dl></dl> : 정의 목록

인라인태그 :<strong>,<a>,<img>,<span>,<a>

줄바꿈 일어나지 않음 / 너비와 높이 불가능 / 상하 패딩 설정 불가능

	<strong> : 중요성을 강조하는 태그
	<a> : 하이퍼 링크를 정의
	<img> : 이미지를 삽입
	<span> 인라인 스타일을 적용하거나 그룹화 할 때 사용

사용 불가 : <p><h1>제목</h1></p> (X)
div(예외) : 그룹핑 블록요소로 블록요소, 인라인요소, 텍스트, div 모든것을 포함 할 수 있다.

<body>
<ul>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
</ul>

<ol>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
</ol>
<dl>
    <dt>용어제목</dt>
    <dd>용어설명1</dd>
    <dd>용어설명2</dd>
    <dd>용어설명3</dd>
</dl>
</body>

7) 네이밍 방법

클래스(class) : 중복가능
아이디(id) : 중복 불가능

8) css (스타일시트)

내부스타일 시트 : html 문서의 <head> 섹션 내에 <style> 태그를 사용하여 정의

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f0f0f0;
            color: #333;
        }
        h1 {
            color: #0066cc;
        }
    </style>

외부스타일 시트 : 별도의 .css 파일에 작성하고 HTML 문서의 <head> 섹션에서 <link> 태그를 사용하여 css 파일을 연결하는 방법

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>

9) 클래스와 스타일 시트 응용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5</title>
    <style>
        /* 스타일시트 주석 */
        p {color:red;}
        .text {color:blue;}

    </style>
</head>
<body>
<h1 class="text">스타일연습</h1>
<p> 녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다.</p>
<p class="text"> 녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다.</p>
<p> 녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다.</p>
</body>
</html>

id를 부여하여 특정 태그에만 스타일 부여 가능
반면, class로 묶여져있는 태그에 스타일 부여 시 관련 태그에 스타일 모두 적용

10) 리스트와 하이퍼링크 응용

<body>
<div id="header">
    <h1><a href="#">로고</a></h1>
    <ul class="topmenu">
        <li><a href="#">LOGIN</a></li>
        <li><a href="#">JOIN</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="nav">
    <ul class="menubox">
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴1</a></li>
    </ul>
</div>
<div id="content">
    <div class="a1">
        <h2>테스트1</h2>
        <p>내용1</p>
    </div>
</div>
<div id="footer">
    <p>서울시 마포구 노고산동</p>
</div>
</body>
</html>

순서가 없는 목록 <li> 에 <a herf> 를 통해 링크 적용

조아연

비전공자 QA의 자기개발 공부노트

다음 포스트

Python_데이터 분석 (1) html

프로그래밍 언어 공부

html

Python_데이터 분석 (3) numpy

0개의 댓글