ourkofe's story
[데이터 분석 심화 개념] 웹 자동화 개념 정리 3️⃣ (웹 스타일링)프로그래밍/데이터 분석2024. 8. 21. 18:55@ourkofe's story
Table of Contents

이번 글은 코드잇 강의를 수강하면서 배운 내용을 주로 하여 정리되어 있습니다. (코드잇 스프린트 데이터 애널리스트 트랙 1기 훈련생)

웹 스타일링

웹페이지 살펴보기

웹 페이지를 이해하고 살펴보는 것은 웹 개발이나 웹 스크래핑을 할 때 매우 중요한 과정입니다. 웹 페이지는 HTML(HyperText Markup Language)이라는 언어로 작성되며, 이 HTML은 다양한 태그(Tags)들로 구성됩니다. 각 태그는 웹 페이지의 특정 요소를 정의하고 구조화합니다.

 

HTML(HyperText Markup Language)은 웹 페이지의 기본 구조를 정의하는 언어입니다. HTML은 텍스트 콘텐츠, 이미지, 링크, 폼 등 다양한 웹 요소를 표시하기 위해 사용됩니다. 웹 브라우저는 HTML 파일을 읽어들여, 그 내용을 사용자가 볼 수 있는 형태로 렌더링합니다.

HTML의 특징

  1. 모두 태그로 이루어져 있습니다.
  2. HTML의 태그는 트리 구조를 이루고 있습니다.
  3. HTML 태그는 속성을 가질 수 있습니다.

HTML 문서의 기본 구조

HTML 문서는 기본적으로 밑과 같은 구조를 가집니다.

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>웹 페이지의 헤더</h1>
    <p>여기는 본문 내용입니다.</p>
</body>
</html>

 

설명:

  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>: HTML 문서의 루트 요소로, 모든 콘텐츠를 감쌉니다.
  • <head>: 메타데이터(문서 제목, 문자 인코딩 등)와 스타일, 스크립트 등을 정의합니다.
  • <title>: 웹 페이지의 제목을 정의하며, 브라우저의 탭이나 제목 표시줄에 나타납니다.
  • <body>: 웹 페이지의 실제 내용을 포함하는 부분입니다. 여기에는 텍스트, 이미지, 링크, 폼 등이 포함될 수 있습니다.

HTML 태그의 개념

HTML에서 태그(Tag)는 특정한 내용을 감싸서 그 내용의 역할을 정의합니다. 태그는 대개 여는 태그와 닫는 태그로 구성되며, 내용은 그 사이에 위치합니다

<h1>이것은 큰 제목입니다</h1>
<p>이것은 단락(paragraph)입니다</p>
  • <h1>: 제목을 나타내는 태그로, <h1>은 가장 큰 제목을 의미합니다. <h1>부터 <h6>까지 크기가 작은 제목 태그들이 있습니다.
  • <p>: 단락을 나타내는 태그로, 일반 텍스트를 묶는 데 사용됩니다.

HTML 속성

속성(Attribute)은 태그에 추가적인 정보를 제공하거나, 태그의 동작을 정의합니다. 속성은 태그 내에서 여는 태그 뒤에 위치하며, 이름과 값의 쌍으로 구성됩니다.

<a href="https://www.example.com" target="_blank">Example 사이트로 이동</a>
<img src="image.jpg" alt="이미지 설명" width="500">
  • href: <a> 태그에서 링크의 목적지를 지정합니다.
  • target: 링크가 어떻게 열릴지 지정합니다. _blank는 새 탭에서 링크를 여는 속성입니다.
  • src: <img> 태그에서 이미지를 표시할 파일 경로를 지정합니다.
  • alt: 이미지의 대체 텍스트로, 이미지가 로드되지 않을 때 표시됩니다.
  • width: 이미지의 가로 크기를 지정합니다.

주요 HTML 태그들

  • 제목 태그: <h1>, <h2>, ... <h6> - 페이지의 제목이나 섹션 헤더를 정의합니다.
  • 문단 태그: <p> - 텍스트 문단을 정의합니다.
  • 이미지 태그: <img src="이미지 경로" alt="이미지 설명"> - 웹 페이지에 이미지를 삽입합니다.
  • 링크 태그: <a href="URL">링크 텍스트</a> - 다른 페이지나 리소스로 연결되는 하이퍼링크를 만듭니다.
  • 리스트 태그: <ul>, <ol>, <li> - 순서 없는 리스트(<ul>), 순서 있는 리스트(<ol>), 리스트 항목(<li>)을 정의합니다.
  • 테이블 태그: <table>, <tr>, <td>, <th> - 테이블을 만들고, 행(<tr>)과 데이터 셀(<td>)을 정의합니다.
  • 폼 태그: <form>, <input>, <button> - 사용자 입력을 받을 수 있는 폼을 정의합니다.

웹 페이지 살펴보기 : 개발자 도구 사용법

웹 페이지를 살펴보려면, 브라우저에서 제공하는 개발자 도구를 사용하는 것이 가장 효과적입니다. 개발자 도구를 사용하면 HTML 구조를 직접 보고, 각 요소가 페이지에서 어떻게 렌더링되는지 확인할 수 있습니다.

  1. 브라우저에서 개발자 도구 열기:
    • Chrome에서는 F12 키나 Ctrl + Shift + I를 누르거나, 우클릭 후 "검사"를 선택합니다.
  2. Elements 탭:
    • HTML 구조를 확인할 수 있습니다. 여기서 각 요소를 클릭하면 해당 요소의 CSS 스타일, 크기, 위치 등을 확인할 수 있습니다.
  3. Console 탭:
    • JavaScript 코드를 실행하여 웹 페이지와 상호작용할 수 있습니다.

기본 HTML 태그 정리

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어입니다.

각 HTML 문서는 다양한 태그로 구성되어 있으며, 이 태그들은 웹 페이지의 요소들을 나타냅니다.

<!DOCTYPE> 선언

  • 정의: HTML 문서의 첫 번째 줄에 위치하며, 브라우저에게 이 문서가 어떤 버전의 HTML을 사용할 것인지 알려줍니다.
  • HTML5 사용법: 최신 버전인 HTML5를 사용할 때는 다음과 같이 간단히 선언합니다.
<!DOCTYPE html>

 

<title> 태그

  • 정의: 웹 페이지의 제목을 정의합니다. 이 제목은 브라우저의 탭에 표시되거나, 북마크에 저장될 때 사용됩니다.
<title>Ourkofe</title>

 

<h1> ~ <h6> 태그

  • 정의: 페이지의 머리말(헤딩)을 정의하는 태그들로, <h1>이 가장 중요한 머리말, <h6>이 가장 덜 중요한 머리말을 나타냅니다. 이 태그들은 글씨 크기와 중요도를 나타내는 데 사용됩니다.
<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>

<p> 태그

  • 정의: 단락(paragraph)을 정의하는 태그로, 일반 텍스트를 문단으로 표현할 때 사용합니다. 기본적으로 단락 위아래에 여백이 있습니다.
<p>이것은 단락입니다.</p>

<b> 태그, <i> 태그

  • <b> 태그: 텍스트를 굵게 표시하는 태그입니다.
  • <i> 태그: 텍스트를 기울임체로 표시하는 태그입니다.
<b>굵은 텍스트</b>와 <i>기울임 텍스트</i>

<a> 태그

  • 정의: 하이퍼링크를 만들 때 사용하는 태그입니다. href 속성에 링크할 URL을 지정하여, 사용자가 링크를 클릭하면 지정된 페이지로 이동할 수 있습니다.
<a href="<https://www.example.kr>">예시 웹사이트</a>

<div> 태그

  • 정의: 'division'의 약자로, 웹 페이지에서 특정 구역을 나누거나 묶을 때 사용됩니다. 주로 레이아웃을 정리하거나 디자인을 적용하기 위한 컨테이너 역할을 합니다.
<div>
  <h2>div 안에 있는 제목</h2>
  <p>div 안에 있는 단락</p>
</div>

기타 태그

  • <img> 태그: 이미지를 삽입하는 태그입니다. src 속성을 사용하여 이미지의 경로를 지정하고, alt 속성으로 대체 텍스트를 지정할 수 있습니다.
  • <ul> 및 <li> 태그: 순서 없는 리스트를 정의할 때 사용하는 태그입니다. <ul>은 리스트의 시작과 끝을 나타내고, <li>는 각 리스트 항목을 나타냅니다.
<img src="<https://www.ourkofe.kr/static/images.png>" alt="로고">

<ul>
  <li>프로그래밍 기초</li>
  <li>컴퓨터 개론</li>
</ul>

웹 스타일링 기초 및 스타일 분리하기

HTML에 스타일을 적용하는 스타일링 과정에서 나오는 원리는 웹에서 데이터를 꺼내오거나, 자동화하는 경우에도 동일하게 사용되는 개념과 원리이기 때문에 웹을 다루는 경우에 이번 목차의 내용을 숙지할 필요가 있습니다.

 

웹 스타일링 기초는 HTML 요소들을 더 아름답고, 사용자 친화적으로 보이게 하는 작업입니다.

이를 위해 CSS(Cascading Style Sheets)를 사용합니다.

CSS는 HTML 요소의 스타일을 정의하고 제어하는 데 사용되며, 색상, 배치, 글꼴 스타일 등 다양한 시각적 효과를 적용할 수 있습니다.

 

CSS의 기본적인 사용은 HTML 문서와 함께 사용되며, 세 가지 방식으로 적용할 수 있습니다.

  • 인라인 스타일(Inline Style): HTML 태그 내에서 직접 스타일을 지정합니다.
  • 내부 스타일 시트(Internal Style Sheet): HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 정의합니다.
  • 외부 스타일 시트(External Style Sheet): 별도의 .css 파일에 스타일을 정의하고, HTML 문서에서 이를 링크합니다.

인라인 스타일(Inline Style)

인라인 스타일은 HTML 태그 내에서 직접 스타일을 지정하는 방법입니다. 각 HTML 요소에 style 속성을 사용하여 스타일을 정의합니다. 이 방법은 특정 요소에만 스타일을 적용하고자 할 때 유용하지만, 코드가 길어지면 유지보수가 어려워질 수 있습니다.

<p style="color: red; text-align: center;">이 텍스트는 빨간색이며 가운데 정렬됩니다.</p>
<p style="color: red; background-color: lightblue;">이 텍스트는 빨간색이며 텍스트의 배경색이 하늘색입니다.</p>

 

장점:

  • 특정 요소에 빠르게 스타일 적용 가능
  • 간단한 스타일 적용 시 유용

단점:

  • 코드 중복이 발생할 수 있음
  • 유지보수가 어려움
  • 스타일 재사용이 어려움

내부 스타일 시트(Internal Style Sheet)

내부 스타일 시트는 HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 정의하는 방법입니다. 이 방법은 한 문서 내에서 일관된 스타일을 적용하고자 할 때 유용합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            text-align: center;
        }
        p {
            font-family: Arial, sans-serif;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이 웹 페이지는 내부 스타일 시트를 사용하여 스타일링되었습니다.</p>
</body>
</html>

 

장점:

  • 한 문서 내에서 일관된 스타일 적용 가능
  • 여러 요소에 동일한 스타일을 적용할 수 있음

단점:

  • 스타일이 정의된 HTML 문서에만 적용됨
  • 여러 문서에서 동일한 스타일을 사용하려면, 각 문서에 동일한 스타일을 정의해야 함

외부 스타일 시트(External Style Sheet)

외부 스타일 시트는 별도의 .css 파일에 스타일을 정의하고, 이 파일을 HTML 문서에서 링크하여 사용하는 방법입니다.

이 방법은 여러 HTML 문서에서 동일한 스타일을 적용할 수 있어 유지보수가 매우 용이합니다.

<!-- HTML 파일 (index.html) -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>외부 스타일 시트를 사용한 웹 페이지</h1>
    <p>이 문서의 스타일은 styles.css 파일에서 정의되었습니다.</p>
</body>
</html>
/* styles.css 파일 */
body {
    background-color: lightgrey;
}
h1 {
    color: green;
    text-align: center;
}
p {
    font-size: 20px;
    line-height: 1.5;
}

 

장점:

  • 여러 HTML 문서에서 동일한 스타일을 사용 가능
  • 스타일의 재사용성과 유지보수성이 높음
  • HTML과 CSS가 분리되어 코드의 가독성이 향상됨

단점:

  • 외부 파일을 불러오는 데 시간이 걸릴 수 있음(그러나 보통 이 단점은 크지 않음)

CSS 선택자

CSS 선택자는 HTML 문서에서 특정 요소를 선택하여 스타일을 적용하거나, 웹 스크래핑을 통해 데이터를 추출할 때 특정 요소를 식별하는 데 사용됩니다. 다양한 선택자들이 있으며, 각각의 선택자는 특정한 방식으로 HTML 요소를 선택합니다. 다음은 주어진 예시를 기반으로 CSS 선택자의 종류와 사용법을 설명한 내용입니다.

CSS 선택자란?

CSS 선택자는 HTML 코드에서 특정 요소를 선택하여 스타일을 적용하거나, 데이터를 추출할 때 사용하는 도구입니다. 선택자는 HTML 문서에서 어느 요소에 스타일을 적용할지, 또는 어떤 데이터를 추출할지 결정하는 중요한 역할을 합니다.

다양한 CSS 선택자가 있으며, 각 선택자는 특정 요소를 선택하는 방법을 제공합니다. 아래는 HTML 예제를 기반으로 각 선택자의 사용법을 설명합니다.

태그 이름 선택자

태그 이름 선택자는 HTML 문서에서 특정 태그 이름을 가진 모든 요소를 선택합니다.

  • 문법: tagname
/* 모든 h2 태그를 선택하여 텍스트 색상을 파란색으로 설정 */
h2 {
    color: blue;
}

/* 모든 p 태그의 글꼴 크기를 16px로 설정 */
p {
    font-size: 16px;
}

ID 선택자

ID 선택자는 특정 ID 값을 가진 단일 요소를 선택합니다. ID는 문서 내에서 유일해야 합니다.

  • 문법: #id-name
/* id가 main-title인 요소의 글꼴 크기를 32px로 설정 */
#main-title {
    font-size: 32px;
}

/* id가 footer인 요소의 배경색을 회색으로 설정 */
#footer {
    background-color: grey;
}

클래스 선택자

클래스 선택자는 동일한 클래스 이름을 가진 여러 요소를 선택할 수 있습니다.

  • 문법: .class-name
/* class가 highlight인 모든 요소의 텍스트 색상을 빨간색으로 설정 */
.highlight {
    color: red;
}

/* class가 box인 모든 요소에 테두리를 추가 */
.box {
    border: 2px solid black;
    padding: 10px;
}

속성 선택자

속성 선택자는 특정 속성 값을 가진 요소를 선택합니다. 다양한 속성을 기준으로 요소를 선택할 수 있습니다.

  • 문법: [attr="value"]
/* href 속성 값이 "<https://example.com>"인 모든 링크의 색상을 녹색으로 설정 */
[href="<https://example.com>"] {
    color: green;
}

/* target 속성이 "_blank"인 모든 링크에 밑줄 제거 */
[target="_blank"] {
    text-decoration: none;
}

/* alt 속성 값이 "logo"인 이미지를 선택하여 너비를 100px로 설정 */
[alt="logo"] {
    width: 100px;
}

OR 연산자

OR 연산자는 여러 선택자를 조합하여, 선택된 모든 요소에 동일한 스타일을 적용할 수 있습니다.

  • 문법: selector1, selector2, ...
/* h1 태그와 h2 태그를 선택하여 중앙 정렬 */
h1, h2 {
    text-align: center;
}

/* p 태그와 li 태그의 텍스트 색상을 보라색으로 설정 */
p, li {
    color: purple;
}

/* class가 alert 또는 warning인 요소의 배경색을 노란색으로 설정 */
.alert, .warning {
    background-color: yellow;
}

AND 연산자

AND 연산자는 여러 조건을 만족하는 요소를 선택할 때 사용합니다.

  • 문법: selector1.selector2
/* class가 featured인 h2 태그의 글꼴 크기를 24px로 설정 */
h2.featured {
    font-size: 24px;
}

/* class가 active인 버튼 요소의 배경색을 파란색으로 설정 */
button.active {
    background-color: blue;
}

/* title 속성이 'special'인 span 요소를 선택하여 글꼴을 굵게 설정 */
span[title="special"] {
    font-weight: bold;
}

중첩된 요소 선택자

중첩된 요소 선택자는 특정 요소 내부에 위치한 다른 요소를 선택합니다.

  • 문법: selector1 selector2
/* div 태그 안에 있는 p 태그의 글꼴 크기를 14px로 설정 */
div p {
    font-size: 14px;
}

/* ul 태그 안에 있는 li 태그의 목록 스타일을 원형으로 설정 */
ul li {
    list-style-type: circle;
}

/* class가 container인 요소 안에 있는 h1 태그의 색상을 주황색으로 설정 */
.container h1 {
    color: orange;
}

직속 자식 선택자

직속 자식 선택자는 특정 요소의 바로 아래에 위치한 자식 요소만을 선택합니다.

  • 문법: selector1 > selector2
/* div 태그의 직속 자식인 h3 태그의 텍스트 색상을 녹색으로 설정 */
div > h3 {
    color: green;
}

/* nav 태그의 직속 자식인 ul 태그의 배경색을 회색으로 설정 */
nav > ul {
    background-color: grey;
}

/* class가 panel인 요소의 직속 자식인 p 태그에 밑줄 추가 */
.panel > p {
    text-decoration: underline;
}

전체 선택자

전체 선택자는 모든 HTML 요소를 선택할 때 사용됩니다. 보통 초기화나 특정 스타일을 모든 요소에 적용할 때 유용합니다.

  • 문법: *
/* 모든 요소의 여백과 패딩을 0으로 설정하여 초기화 */
* {
    margin: 0;
    padding: 0;
}

/* 모든 요소에 대해 폰트 패밀리를 Arial로 설정 */
* {
    font-family: Arial, sans-serif;
}

/* 모든 요소의 글꼴 크기를 14px로 설정 */
* {
    font-size: 14px;
}

 

CSS 선택자는 웹 페이지에서 특정 요소를 선택하고 스타일을 적용하는 강력한 도구입니다. 다양한 선택자를 활용하여 웹 페이지의 특정 부분을 스타일링하거나, 웹 스크래핑에서 특정 데이터를 추출할 수 있습니다. 각 선택자는 특정 조건에 따라 HTML 요소를 선택하는 방법을 제공합니다.

위에서 살펴본 HTML과 CSS의 기초 개념과 스타일링 방법은 웹 개발의 기본을 이해하는 데 중요한 요소들입니다. 이러한 지식을 바탕으로 더 나아가, 웹 페이지를 효율적으로 구성하고, 스타일링하며, 웹 스크래핑 등의 작업도 가능하게 됩니다. 앞으로 실습을 통해 더욱 탄탄한 웹 개발 역량을 쌓아나가길 바랍니다.

감사합니다!

출처 및 참고자료 : 코드잇 사이트 강의 '웹 자동화' https://www.codeit.kr/topics/web-automation

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 데이터 분석' 카테고리의 다른 글

[데이터 분석 심화 개념] 데이터 기반 프로덕트 개선하기 1️⃣ (프로덕트 데이터 기반 의사결정)  (1) 2024.08.26
[데이터 분석 심화 개념] 웹 자동화 개념 정리 4️⃣ (Beautifulsoup)  (0) 2024.08.23
[데이터 분석 심화 개념] 웹 자동화 개념 정리 2️⃣ (웹사이트 가져오기)  (0) 2024.08.19
[데이터 분석 심화 개념] 웹 자동화 개념 정리 1️⃣ (웹의 기본 요소)  (0) 2024.08.18
[데이터 분석 심화 개념] 장바구니 분석 개념 정리 3️⃣ (순차 패턴 마이닝, PrefixSpan 알고리즘)  (0) 2024.08.16
ourkofe's story
@ourkofe's story :: ourkofe

데이터 분석을 공부하고 카페를 열심히 돌아다니는 이야기

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

프로그래밍/데이터 분석 추천 글
more
image

티스토리툴바