Seaborn

스크래핑 한 결과를 정리해주고 시각화해주는 라이브러리
Interactive한 Python 코드 작성 / 공유를 위한 개발 도구

설치 및 사용법

# 설치
pip install seaborn # 파이썬 설치
conda install seaborn # 아나콘다 설치

#사용
import seaborn as sns # sns라는 축약어로 많이 사용됨.

sns.lineplot(x=[1, 3, 2, 4], y=[4, 3, 2, 1]) # 꺾은 선 그래프
sns.barplot(x=[1, 2, 3, 4], y=[0.7, 0.2, 0.1, 0.05]) # 막대 그래프

꺾은 선 그래프와 막대 그래프

※ 이 외의 다양한 그래프를 그리기 위해서는 https://seaborn.pydata.org/examples/index.html 참조!

그래프의 부가 설명

import matplotlib.pyplot as plt # matplotlib.pylot

plt.title("제목") # 그래프 제목 추가

plt.xlabel("X") # x축 설명 추가
plt.ylabel("Y") # y축 설명 추가

plt._xlim(s, l) # x축 s ~ l로 값 제한
plt._ylim(s, y) # y축 s ~ l로 값 제한

plt.figure(figsize = (x, y)) # 가로 x, 세로 y 만큼의 크기로 그래프를 그려줌, 크기를 조정해줄 때는 가장 먼저 써야한다..!

plt.show() # 그래프를 출력해라!
plt.imshow() # 이미지를 출력해라!

빈도 수

데이터 처리 및 시각화를 할 때 빈도를 측정하는 경우가 자주 발생한다.
collections 모듈에서 이를 도와준다.

from collections import Counter

counter = Counter(frequency) # frequency 라는 빈도를 저장해놓은 dictionary를 Counter 객체 생성 인자로 사용!
counter.most_common(x) # .most_common은 반환값은 list이며 frequency에서 value가 가장 높은 상위 x개를 추출!

 

Wordcloud

자주 등장하는 텍스트를 중요도나 인기도를 고려해 표현한 것이며 파이썬의 텍스트 클라우드 라이브러리이다.
konlpy는 한국어 형태소 분석기 라이브러리.

설치 및 사용법

자주 사용되는 방법은
1. KoNLPy 라이브러리로 한국어 문장을 전처리
2. Counter를 이용해 빈도수 측정
3. WordCloud를 이용하여 시각화

#설치

pip install wordcloud # 파이썬 설치
conda install wordcloud # 아나콘다 설치

pip install konlpy # 파이썬 설치
conda install -c conda-forge jpype1 # 아나콘다는 pip으로 설치를 하되 해당 명령어 선입력 필요.

#사용

from wordcloud import WordCloud # WordCloud 객체를 불러오기!
from konlpy.tag import Hannanum # kolnpy에서 Hannanum(형태소 분석기) 객체를 불러오기

hannanum = Hannanum() # Hannanum : 형태소 분석기 객체.
nouns = hannanum.nouns(national_anthem) # 형태소 분석기의 .nouns()는 명사를 추출! 문자열이 담긴 리스트로 반환해준다.

wordcloud = WordCloud(font_path="폰트 경로", background_color="color", width=x, height=y) # 폰트 경로에 있는 폰트로 wordcloud를 생성, 화면에 출력될 그림의 배경색은 color, 너비와 높이는 각각 width, height로 설정
img = wordcloud.generate_from_frequencies(빈도수 딕셔너리) # .generate_from_frequencies()는 빈도수로부터 wordcloud를 추출해준다.

'데브코스 > Week 3' 카테고리의 다른 글

Week 3 - 4  (0) 2024.04.04
Week 3 - 3  (0) 2024.04.03
Week 3 - 2  (0) 2024.04.02
Week 3 - 1  (0) 2024.04.01

Selenium

Python을 이용해서 웹 브라우저를 조작할 수 있는 자동화 프레임워크.
웹 브라우저와 연동을 위해서는 WebDriver(웹 브라우저와 직접적으로 연결해줌)가 필요하다.

  • 설치법
# Selenium
pip install selenium # 파이썬
conda install selenium # 아나콘다

# WebDriver
pip install webdriver-manager # 파이썬

conda config --add channels conda-forge 
conda config --set channel_priority strict 
conda install webdriver-manager
# 아나콘다 환경에서 설치를 위해서는 conda-forge 채널로부터 내 채널에 conda-forge를 추가함으로써 설치가 가능해짐.
  • 주요코드
# 모듈
from selenium import webdriver # 웹 드라이버 모듈
from selenium.webdriver.chrome.service import Service # 크롬 드라이버를 시작하고 중지해주는 모듈
from webdriver_manager.chrome import ChromeDriverManager # 지금 사용중인 크롬과 동일한 버전으로 싱크해주는 모듈
from selenium.webdriver.common.by import By 
# By : find_element(s)에서 첫번째 인자 by에 쓰일 모듈. TAG_NAME, XPATH, CLASS_NAME, ID 등이 있다.

# 코드
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install())) # 웹 브라우저 실행 및 파이썬과 연동
driver.get("URL") # 입력한 URL로 HTTP 요청 보내기
driver.page_source # 응답받은 페이지의 HTML 문서

with webdriver.Chrome(service=Service(ChromeDriverManager().install())) as driver:
	...
    ...
    ... # 실행할 코드
    
# with-as 구문을 이용하면 주어진 명령을 실행 후 driver을 종료

driver.find_element(by, target) # selenium.webdriver.remote.webelement.WebElement' 로 요소를 반환
driver.find_elements(by, target) # 리스트로 반환
driver.find_element(by, target).text # find_element로 반환된 요소의 컨텐츠

 

Wait and Call

  • Implicit / Explicit Wait
    • Implicit Wait(암묵적 기다림) : 특정 요소에 대한 제약을 통한 기다림
    • Explicit Wait(명시적 기다림) : 다 로딩이 될 때까지 지정한 시간 동안 기다림
  • 주요코드
# 모듈
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC # selenium에 정의되어 있는 명시적 암시에 쓰이는 조건
# 더 많은 조건들은 여기 참조 https://www.selenium.dev/selenium/docs/api/py/webdriver_support/selenium.webdriver.support.expected_conditions.html

driver.implicitly_wait(10)
# 암시적 기다림, 로딩이 될 때 까지 최대 10초 기다려라!

element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, '//*[@id="__next"]/div/main/div[2]/div/div[4]/div[1]/div[2]/div/a/div[2]/p[1]')))
# 명시적 기다림은 두가지 메서드를 활용한다.
# WebDriverWait(driver, 초) # ~초 동안 기다려라!
# until() : 인자의 조건이 만족될 때 까지
# until_not() : 인자의 조건이 만족되지 않을 때 까지

XPath

스크래핑을 방지하기 위해 클래스명을 랜덤하게 하는 경우가 있다.
이러한 경우에서 스크래핑을 하기 위해 여러가지 방법 중 요소의 위치를 활용하는 방법이 있고
XML, HTML 문서 등의 요소의 위치를 경로로 표현하는 것이 XPath이다.

ex) [@id="__next"]/div/main/div[2]/div/div[4]/div[1]/div[2]/div/a/div[2]/p[1]
          ↑id=__next   ↑div ↑main ↑div의 두번째

마우스 이벤트 처리

ActionChains(driver).click(요소).perform()
# 액션을 연쇄적으로 수행하게 해주는 객체
# ~~~~.preform() : perform 이전에 입력해주었던 명령들을 실행해줌.

키보드 이벤트 처리

  • 주요코드
ActionChains(driver).send_keys_to_element(요소, "abc").perform()
# 특정 요소에 "abc"를 입력하라.

'데브코스 > Week 3' 카테고리의 다른 글

Week 3 - 5  (0) 2024.04.05
Week 3 - 3  (0) 2024.04.03
Week 3 - 2  (0) 2024.04.02
Week 3 - 1  (0) 2024.04.01

BeautifulSoap

페이지를 스크래핑 해서 원하는 요소를 이용할 때 requests.get 만을 사용하면 HTML 전체가 오기 때문에 쉽지 않다.
HTML 코드를 분석해주는 HTML Parser을 이용하면 더 쉽고 가장 유명한 것이 BeautifulSoap4 이다.

주요 코드

from bs4 import BeautifulSoup
# BeautifulSoup 객체를 import 해서 많이 사용됨.

soup = BeautifulSoup(res.text, "html.parser")
# response.get으로 불러온 HTML 문서를(첫번째 인자) html.parser로 분석한다고 명시(두번째 인자)

soup.prettify()
# HTML을 보기 편하게 반환해줌

soup.head
# <head> ..... </head>를 가져오기. soup.태그명 이렇게 사용!

h1 = soup.find("h1")
# <h1> 태그로 감싸진 요소 하나 찾기. 리턴 값 : bs4.element.Tag

h1 = soup.find("h1", id="title")
# id 값이 타이틀인 h1 태그 요소 가져오기

p = soup.find("p", "paragraph")
p = soup.find("p", "paragraph").find("span", "name")....
# class가 paragraph인 p 태그 요소 가져오기.
# <p class="paragraph"><span class="name">콘텐츠</p></span> 처럼 자식을 가지고 있는 태그를 타고 타고 들어가서 요소를 가져올 수 있음.

h1.name
# 태그 이름 출력

h1.text
# 해당 태그의 콘텐츠 가져오기

h1["title"]
# 해당 태그의 title 속성값 가져오기(딕셔너리 형태)

soup.find_all("meta")
# meta 태그로 감싸진 요소들 찾기. 리턴 값 : list, 각 요소 bs4.element.Tag\

res = requests.get("https://hashcode.co.kr/", {"User-Agent": user_agent})
# 두번째 인자는 header이며(key: value 형태) header 값과 함께 요청을 보낼 수 있음.

time.sleep(0.5)
# 많은 페이지에 http 요청을 보낼 때는 서버에 부하이 있을 수 있기 때문에 텀을 두고 한다.
# time 라이브러리의 time.sleep 활용!
# 0.5초 쉼.

 

웹 페이지

웹페이지는 어떻게 생성되냐에 따라 구분.

종류

  • 정적(static) 웹 페이지 : HTML 내용이 고정되어 있는 웹 사이트. 웹 사이트를 수정하기 전 까지 같은 요청을 보내면 같은 응답이 오며 HTTP 요청을 보내면 HTML 문서가 완전하게 응답된다.
  • 동적(dynamic) 웹 페이지 : HTML 내용이 계속 변하는 웹 사이트. 요청을 보내면 응답이 올 때 까지 HTML이 렌더링 될 때 까지의 지연시간이 존재함.

동적 웹 사이트의 동작 방식

웹 브라우저에서는 JavaScript라는 프로그래밍 언어가 동작을 하며 비동기 처리를 통해 필요한 데이터를 채움.
※ 동기 처리 : 요청에 따른 응답을 기다린다.
                    랜더링 후 데이터 처리.
※ 비동기 처리 : 요청에 따른 응답을 기다리지 않는다.
                       랜더링과 데이터 처리가 같이됨(무엇이 먼저 처리되는지 순서가 상관 없음)

Requests로 요청 시 발생하는 문제

  • 데이터 처리 이전에 요청을 보내면 불완전한 응답을 받게 됨.
    -> 임의로 시간을 지연한다면 데이터 처리가 끝난 후 정보를 가져올 수 있음.
  • 키보드 입력, 마우스 클릭 등을 requests로는 진행하기 어려움.
    -> 웹 브라우저를 파이썬으로 조작!
    -> 웹 브라우저를 자동화하는 라이브러리 Selenium 활용!

 

다음 시간에 계속....

'데브코스 > Week 3' 카테고리의 다른 글

Week 3 - 5  (0) 2024.04.05
Week 3 - 4  (0) 2024.04.04
Week 3 - 2  (0) 2024.04.02
Week 3 - 1  (0) 2024.04.01

웹 구조

  1. HTTP
    • 인터넷과 웹
      • 네트워크 : 두 컴퓨터를 연결
      • 근거리 지역 네트워크(LAN) : 네트워크의 집합
      • 인터넷 : 범지구적으로 연결된 네트워크, 여러 컴퓨터 끼리 네트워크를 연결하는 것
      • 웹(WWW, World Wide Web) : 인터넷에서 정보를 교환하기 위한 시스템
        • 웹에서 정보를 주고받는 방법
          - 클라이언트 : 정보를 요청하는 컴퓨터
          - 서버 : 정보를 제공하는 컴퓨터
          클라이언트가 정보를 요청 -> 요청에 대해 서버가 작업을 수행 -> 수행한 작업의 결과를 클라이언트에게 응답
    • HTTP의 구조
      • 정의 : HyperText Transfer Protocol의 약자이며 웹 상에서 정보를 주고받기 위한 약속
      • HTTP 요청(Request) : 클라이언트가 서버로 정보를 요청하는 것
      • HTTP 응답(Response) : 요청된 정보에 대해 서버가 클라이언트에게 응답하는 것
      • Head : 요청/응답에 대한 정보, Body : 내용물
  2. 웹 사이트와 웹 페이지
    • 웹 페이지 : 웹 속에 있는 문서 하나
    • 웹 사이트 : 웹 페이지의 모음
    • 웹 브라우저 : HTTP 요청을 보내고 HTTP 응답에 담긴 HTML 문서를 우리가 보기 쉬운 형태로 화면을 그려주는(랜더링) 역할을 담당

Web Scraping 기초

  • 웹 크롤링과 웹 스크래핑
    • 웹 스크래핑 : 웹 사이트에서 우리가 원하는 정보를 추출(특정 웹 페이지에서 데이터를 추출)
    • 웹 크롤링 : 크롤러를 이용해서 웹 페이지의 정보를 인덱싱(URL을 타고다니며 반복적으로 데이터를 가져오는 과정)
  • 올바르게 HTTP 요청하기
    • 웹 브라우징은 사람이 아닌 로봇이 진행할 수 있음.
    • REP(Robot Exclusion Protocol) : 로봇 배제 프로토콜
      • robots.txt : 서버에 웹 페이지를 올릴 때 같이 올려 rep 명시.
        • User-agent : 규칙이 적용되는 대상 사용자 에이전트
          ex) User-agent: * - 모든 user agent를 뜻함.
        • Disallow : 크롤링을 금지할 웹 페이지
          ex) Disallow: / - 모두 차단
        • Allow : 크롤링을 허용할 웹 페이지
          ex) Allow: /$ - 현재 페이지만 허용
  • 정보 요청 : GET
import requests
res = requests.get("https://www.naver.com") # HTTP 응답이 담겨있음.

res.headers # Header 정보 확인

res.text # Body를 텍스트 형태로 확인

# <Response [200]> 스테이터스 코드(응답 코드)가 리턴되며 200은 OK

 

  • 정보 갱신하는 것을 요청하기 : POST
payload = {"name": "Hello", "age": 13} # post는 파라미터로 json 객체(딕셔너리)를 넣어 줘야한다.
res = requests.post("https://webhook.site/9b800196-6b9f-4580-a7bd-fe479ae7771f", data=payload)

res.status_code # 스테이터스 코드 확인

payload에 넣어준 정보

 

  • DOM(Document Object Model) : 문서 객체 모델, 웹 페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 객체로 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스. JS 같은 스크립트 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결해주는 역할을 한다.

DOM 모델 출처(https://poiemaweb.com/js-dom)

 

 

 

다음 시간에 계속....

'데브코스 > Week 3' 카테고리의 다른 글

Week 3 - 5  (0) 2024.04.05
Week 3 - 4  (0) 2024.04.04
Week 3 - 3  (0) 2024.04.03
Week 3 - 1  (0) 2024.04.01

HTML

기본 문법

  • 콘텐츠를 가지는 태그 : <div>콘텐츠</div>
  • 콘텐츠를 가지지 않는 태그 : <br /> 
  • 속성과 값 : <div title="제목">콘텐츠</div>
                              ↑ 속성  ↑ 값
    • 태그 안에 속성 = 값 형태
    • 전역 속성 : 모든 태그에서 쓸 수 있는 속성
  • 기본 문서 형태
    1. <!DOCTYPE html> : 문서 버전
    2. <html lang="ko"> : 문서 시작 선언 및 문서 기본 언어 설정
    3. <head> : 문서에 필요한 정보가 기입되는 곳(메타 데이터나 css 링크 등)
    4. <title> : 문서의 제목
    5. <body> : 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
     

<title> 에 입력한 값은 브라우저 탭에 노출된다.

주요 태그

  • <head>
    • 가질 수 있는 정보의 종류
      1. 타이틀
      2. 메타데이터
        1. 인코딩 정보 <meta charset="utf-8">
        2. 문서 설명 <meta name="description" content="이 문서는 실습 문서입니다">
        3. 문서 작성자 <meta name="author" content="out_of_anjoong"> 
      3. CSS, Script(JavaScript) 
        • CSS
          • 콘텐츠 방식
            <style> : . html 문서 안에서 스타일을 줄 때
          • 링크 방식
            <link rel="stylesheet" href="style.css"> : style.css를 연결해 해당 태그를 선언한 html 문서에 style.css에서 정의한 스타일 반영
        • <script>
          • 콘텐츠 방식
            <script>
                const hello = 'world'
                console.log(hello)
            </script>
          • 링크 방식
            <script src="script.js"></script>
  • <body>
    1. <body> : 사람 눈에 실제로 보이는 콘텐츠 영역
    2. 요소 종류
      • block (블록 레벨 요소)
        • 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
        • 블록의 크기와 내/외부 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다
        • 인라인 요소를 포함할 수 있으나, 인라인 요소는 블록 요소를 포함할 수 없다.
        • 대표적인 블록 레벨 요소 : <div>, <article>, <section>, <h1> .....
      • inline (인라인 레벨 요소)
        • 블록 요소 내에 포함되는 요소
        • 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
        • 좌/우에 여백을 넣는 것만 허용된다.
        • 대표적인 인라인 레벨 요소 : <span>, <a>, <strong>
      • inline-block (인라인 블록 레벨 요소)
        • 글자처럼 취급되나, 블록의 성질을 가지는 요소
        • 블록과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
        • CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.(<button>은 인라인 블록)
  • 레이아웃 태그
    • HTML5 부터 태그를 의미 있게 사용하기 위해 Semantic 태그를 사용하여 문서 구조를 작성
    • 단순히 구역을 나누기 위해 사용하는 <div>를 남발하지 않고 웹 문서가 담은 정보와 구조를 의미있게 전달하기 위해서
    • 시멘틱하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임.
    • 주요 태그
      • <div> : 가장 흔히 사용되는 태그로 단순히 구역을 나누기 위한 태그
      • <header> : 블로그 글 제목, 작성일 등, 주요 정보를 담는 태그
      • <footer> : 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등, 부차적인 정보를 담는 태그
      • <main> : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
      • <section> : 콘텐츠의 구역을 나누는 태그.
      • <article> : 독립적인 문서를 전달하는 태그.
      • <aside> : 문서의 주요 내용에 간접적인 정보를 더하는 태그.
  • 콘텐츠 태그
    • 제목 태그(h1 ~ h6)
      • 문서 구획 제목을 나타내는 태그로 Heading(헤딩) 태그라고 부른다.
      • h1태그는 페이지 내에 한번만 사용되어야 하고 구획의 순서는 지켜져야 한다.(h2 다음 h1 X)
    • 단락 태그(p)
      • 문서에서 하나의 문단을 나타내는 태그.
    • <b>, <strong>
      • 콘텐츠를 굵은 글씨로 해준다.
      • <b>는 단순 태그, <strong>은 강조의 의미가 있는 시멘틱태그
    • <i>, <em>
      • 글씨의 기울기를 조절함.
      • <i>는 단순 태그, <em>은 강조의 의미를 가진 시멘틱태그
    • <u>
      • 글씨에 밑줄을 넣음.
      • 오타를 나타내는 용도로 사용 가능.
    • <s>, <del>
      • 글씨에 취소선을 추가
      • <s>는 단순 태그, <del>은 시멘틱 태그, <ins>태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있음.
    • <br>
      • 단일 태그로 줄바꿈을 해줌.
    • <a>
      • 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
      • href 속성 : 이동하고자 하는 파일이나 url
      • target 속성 : 이동해야 할 링크를 새창으로 열기(_blank), 현재 창에서 이동(_self)
  • 멀티미디어
    • <img>
      • 문서 내에 이미지 삽입.
      • src 속성 : 이미지의 경로를 넣으면 이미지 출력
      • alt 속성 : 이미지 로딩에 이슈가 있을 시 대체 텍스트를 띄움
    • <figure>, <figcaption>
      • 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣어주는 태그
      • <figcaption> : 콘텐츠의 설명 혹은 범례를 추가, 제일 처음이나 아래에 추가하는 방식.
      • 보통 이미지, 비디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담음. 
    •  <video>
      • 문서 내에 영상 삽입.
      • src 속성 : 영상의 경로를 넣으면 영상 출력
      • poster 속성 : 비디오가 로드되기 전에 포스터를 보여줄 수 있음.
      • 콘텐츠 영역에 <source> 태그를 사용하면 여러 타입의 비디오를 제공할 수 있음.
      • 콘텐츠 영역에 글자를 넣으면 해당 글자를 대체텍스트로 사용.
    • <audio>
      • 문서 내에 소리를 첨부하는 태그
      • src 속성 : 음성 파일의 경로를 넣으면 소리 츨력
      • <source> 태그를 사용하면 여러 확장자의 음성 파일 사용
      • controls 속성 : 재생/정지 버튼 등이 있는 컨트롤러를 띄움.
      • 콘텐츠 영역에 글자를 넣으면 해당 글자를 대체텍스트로 사용.
    • <svg>
      • 그래픽으로 만들어진 이미지
      • 일반 이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
      • 주로 크기를 자주 바꾸어야 하는 이미지에서 많이 사용(아이콘)
      • 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용됨.
      • <img> 태그 처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다.
      • 코드로 이루어져 있기 때문에 스타일을 변경하거나 JS를 사용해 간단한 기능 추가도 가능하다.
  • 리스트
    • <ul>, <ol>, <li>
      • <ul> 
        • 정렬되지 않은 목록 태그
        • 기본 불릿 형식으로 랜더링 됨.
      • <ol>
        • 정렬된 목록 태그
        • 기분 숫자 형식으로 랜더링 됨.
      • <li> 
        • 목록의 아이템을 구성하는 태그. 다양한 태그를 포함할 수 있다.
        • <ul>, <ol>은 <li>태그만을 자식요소로 둘 수 있다.
    • <dl>, <dt>, <dd>
      • 설명 목록 태그
      • <dt>에 사용된 단어 혹은 내용의 설명을 <dd>에 작성.
      • 용어의 설명이나 key : value 형식으로 사용.
      •  <dt>를 여러개 작성하고 하나 이상의 <dd>로 여러 용어 설명 가능.
      • 하나의 <dt>를 여러개의 <dd>로 하나의 용어를 여러 의미로 설명 가능.
    • <table>
      • 표를 만드는 태그
      • <table>에서 쓰이는 태그들
        • <th> : 열의 제목 태그
        • <tr> : 표의 행을 구분하는 태그
        • <td> : 표의 셀을 의미하는 태그
        • <thead> : 제목 그룹 태그, 해당 태그 안에 <th>를 넣음으로써 그룹을 지을 수 있다.
        • <tfoot> : 표 바닥글 요소 태그. 해당 태그 안에 <td>를 넣음으로 써 표의 바닥글 요소를 넣을 수 있다.
                          HTML4 에서는 <tfoot> <tbody> 순으로, HTML5에서는 <thead> <tbody> <tfoot> 순으로 작성.
        • <caption> : 표가 가진 데이터에 대한 설명을 하는 태그.
  • 아이프레임 <iframe>
    • 현재 문서 안에 다른 html 페이지를 삽입할 수 있는 태그
    • src 속성으로 html 문서의 경로 혹은 URL을 넣는 방식.
    • 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.(보안 이슈로 iframe으로 다 불러올 수 있는 것은 아니다.)
    • name 속성을 지정하면 <a> 태그의 target을 사용하여 iframe 에서 문서 혹은 URL이 열리게 할 수 있다.
    • 콘텐츠를 가지는 태그이이며 <iframe>을 지원하지 않을 때 대체택스트 처럼 쓰인다.
  • 양식 태그
    • <form>
      • 정보를 제출하기 위한 태그
      • <input>, <select>, <textarea> 등을 가질 수 있다.
      • action 속성 : 정보가 제출되었을 때 페이지를 이동시킬 수 있음.
      • method 속성 : 정보가 제출될 때 처리 방식을 결정할 수 있다.(get, post)
    • <input>
      • 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
      • type 속성 : 값에 따라 받을 수 있는 데이터의 유형이 달라진다.(default : text)
        • checkbox, radio, file, button, hidden 등 여러 타입이 있음.
      • value 속성 : 기본 내용을 입력해 둘 수 있음.
      • name 속성 : input의 이름을 지정
    • <button>
      • 클릭 가능한 버튼을 나타내는 태그
      • type="reset" : 버튼이 눌리면 입력한 양식이 모두 초기화된다.
      • type="submit" : form 양식을 제출할 수 있다. form 내 button의 기본 타입.
      • 자식 요소로 블록 레벨 태그는 사용하면 안된다.
      • disabled 속성도 가질 수 있다.
    • <label>
      • <input>, <textarea> 등 태그의 설명을 작성할 수 있는 태그
      • for 속성을 사용하여 연결하고자 하는 태그의 id 태그 값을 지정하면 연결됨.
      • 해당 태그 안에 <input> 을 넣으면 자동으로 for -> id 같은 처리를 해준다.
    • <select>
      • 옵션 메뉴를 제공하는 태그
      • <option> 태그를 사용해 옵션을 정의할 수 있다.
      • 첫번째 option은 이름이 된다.
      • value 속성을 선언하지 않은 경우 <option>의 콘텐츠가 기본값이 된다.
    • <textarea>
      • 여러 줄의 텍스트를 입력할 수 있는 태그
      • 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
      • cols/rows 속성으로 기본 너비와 높이 지정 가능.
    • 알아두면 좋은 속성
      • readonly : 사용자가 수정할 수 없는 "읽기 전용" 으로 만듦.
      • required : form이 제출될 때 필수로 입력되어야 하는 양식 태그를 지정할 때 사용.
      • placeholder : input, textarea에 사용되며, 해당 입력란에 무엇을 입력할 지 부가 설명을 할 수 있다.
      • disabled : 요소가 비활성화 되며 값이 제출되지 않는다.
  • 참조 사이트

 

 

다음 시간에 계속....

'데브코스 > Week 3' 카테고리의 다른 글

Week 3 - 5  (0) 2024.04.05
Week 3 - 4  (0) 2024.04.04
Week 3 - 3  (0) 2024.04.03
Week 3 - 2  (0) 2024.04.02

+ Recent posts