SK networks AI Camp - Crawling(2)

시작하기 전에 가상환경 설정(python version : 3.12) 과 jupyter, requests, beautifulsoup, selenium을 설치해줄게요.

못 하시겠으면 아래의 글을 참고해주세요.

2024.07.08 - [컴퓨터 공학/Networks] - SK networks AI Camp - Python, Git 등 설치

SK networks AI Camp - Python, Git 등 설치

하지만 방법을 적어두겠습니다.

(주의 : beautifulsoup4 를 설치해주세요)

py -3.12 -m venv .venv
.\.venv\Scripts\activate
py -m pip install --upgrade pip
pip install jupyter
pip install requests
pip install beautifulsoup4
pip install selenium

CSS(Casading Style Sheet)

○ HTML과 같이 CSS는 실제로 프로그래밍 언어는 아닙니다(markup 언어 포함)

○ Style sheet 언어로 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용가능

○ 예시

p{
	color: red;
}

css 사용의 의의

○ 스타일 사용으로 문서의 구조와 표현을 분리할 수 있다.

○ 구조와 표현을 분리함으로 문서 구조의 수정 없이 스타일의 변경만으로 다양한 표현을 할 수 있다는 장점

 

css 사용법

연습하기 좋은 추천 사이트

CSS Diner

 

문제 풀이

2024.07.22 - [컴퓨터 공학/Networks] - SK networks AI Camp - CSS_Select the plates 정답(1 ~ 16번)

 

 

 

○ selector

    ● 선택자(selector)을 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.

    ● 전체 선택자

* {
  color: green;
}

    ● 태그 선택자

/* All <a> elements. */
a {
  color: red;
}

    ● ID 선택자

/* id="demo" 요소 선택 */
#demo {
  border: red 2px solid;
}

    ● 그룹 선택자

/* 모든 span과 div 요소 선택 */
span,
div {
  border: red 2px solid;
}

#main,
.content,
article {
  font-size: 1.1em;
}

    ● 클래스 선택자

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

    ● 속성 선택자

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

    ● 결합 선택자

         - 인접 형제 결합자 (A + B)

           : 요소 A와 B가 같은 부모를 가지며 B가 A를 바로 뒤따라야 하도록 지정

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

         - 일반 형제 결합자 (A ~ B)

          : 요소 A와 B가 같은 부모, B가 A를 뒤따라야 하도록 지정.  But B가 A의 바로 옆에 위치할 필요는 X

/* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 */
img ~ p {
  color: red;
}

         - 자식 결합자 (A > B)

           : 요소 B가 A의 바로 밑에 위치하도록 지정

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

         - 자손 결합자 (A B) [띄어쓰기 주의]

           : 요소 B가 A의 바로 밑에 위치하도록 지정 But B가 A 바로 아래에 있을 필요는 없음

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

    ● 가상 선택자

        - 가상 클래스 선택자

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

button:focus {
  color: red;
}

        - 가상 요소 선택자

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

○ text

○ box 모델

○ 색상과 배경

○ 테두리

    ● border : 요소 박스의 테두리

    ● CSS는 요소를 사각형 박스로 표시하기 때문에 border 역시 사각형으로 그려집니다.

○ 요소 박스의 배치

    ● position : static, absolute, relative, fixed

    ● float

    ● flex

    ● grid

○ 다단 구조

○ transform

○ animation

○ 주석

/* CSS에서 사용할 수 있는 주석입니다. */

 

css 단위

css 우선 순위

1. 속성 값 뒤에 !important를 붙인 속성

2. HTML에서 Style을 직접 지정한 속성

3. #id로 지정한 속성

4. .클래스, :추상클래스로 지정한 속성

5. 태그이름으로 지정한 속성

6. 상위 객체에 의해 상속된 속성

※ 같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우

나중에 선언한 것이 우선되어 적용