01 웹 페이지 살펴보기
HTML 코드를 분석해보자.
<p> </p> : 하나의 문단을 나타낸다.
<hr> : 수평선, 넣어줄 내용이 없어 닫아주는 태그는 없음.
<html>
<head>
<title> </title>
<meta >
</head>
<body>
<ul>
<li> </li>
</ul>
</body>
</html>-HTML 은 모두 태그로 이루어져 있다.
-태그는 트리 구조로 이루어져 있다.
-title 의 부모태그는 head 태그이다.
-ul 태그의 자식태그가 li 태그이다.
-속성을 가질 수 있다. img 태그 안에 src = ' '
-src 는 태그에서 보여주고 싶은 이미지의 주소
-a 태그 안 href 은 어떤 페이지로 이동할지
02 HTML 태그 정리 노트
!DOCTYPE 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 을 선언해야 한다.
HTML5 버전을 위해선 다음과 같이 입력한다.
<!DOCTYPE html>tiltle태그
웹 페이지의 제목을 정해주는 것.
<title> Sample Website </title>h1-h6태그
가장 중요한 머리말은 h1, 다음으로 h2 ... h6 까지.
순서대로 작아진다.
<h1>머리말 1</h1>
<h2>머리말 2</h2>
<h3>머리말 3</h3>
<h4>머리말 4</h4>
<h5>머리말 5</h5>
<h6>머리말 6</h6>p태그
문단을 통째로 넣는 태그. 시작과 마무리 태그가 있다. 태그 위, 아래에 디폴트 값으로 여백 존재.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>b 태그, i 태그
b 태그는 볼드체로, i 태그는 이탤릭체로.
<b>볼드체</b>와 <i>이탤릭체</i>a 태그
하이퍼링크를 만들 때 사용, href 속성을 걸어주고 안에 이동하고 싶은 주소를 써준다.
<a href="https://www.codeit.kr/">코드잇 웹사이트</a>div 태그
가장 많이 쓰이는 태그. division 의 약자로, 구역을 정해서 레이아웃, 디자인을 입히는데 사용.
<div>
<h2>div 안에 있는 h2</h2>
<p>div 안에 있는 p</p>
</div>03 웹 스타일링 기초
웹 페이지 스타일 : 색 폰트 크기 정렬 여백
스타일링 과정에서 나오는 원리가 데이터를 꺼내오거나, 자동화할 때도 사용됨.
<h2> 태그에 있는 글씨의 색과 정렬을 바꾸는 코드를 알아보자.
color : 색 지정
text-align : 어디로 정렬할지
<h2 style = "color: royalblue; text-align: center;"> </h2>가운데로 정렬 된, 푸른색 글씨 가 나온다.
background-color : 배경색 지정
04 스타일 분리하기
방금과 같이 HTML 코드 모두 태그 안에 스타일 코드를 넣는 것은 좋지 않다.
그래서 생겨난 것이 CSS 코드. HTML 과 스타일 코드를 분리/연결하여 저장해서 한 페이지에 관해 따로 관리할 수 있다.
styles.css 파일을 따로 만든다.
HTML 코드에는 head 코드 사이에
<link rel = 'stylesheet' href = 'styles.css'>
를 넣어주면 HTML 파일과 styles.css 파일을 연결한 것이다.
이때 두 파일은 같은 폴더에 있어야 함을 주의하자.
styles.css 안에 들어갈 코드를 보자.
h2 {
color: royalblue;
texy-align: center;
}
기존 HTML 코드에 들어있던 스타일을 제거하고 css 안에 넣었다.
이때 h2 는 선택자, { } 안 에 들어있는 것은 스타일 코드 라 한다.
위처럼 코드를 작성하면 모든 h2 태그에 대해 적용이 된다.
05 스타일 분리하기 실습
link rel = 'stylesheet' href 를 통해 성공적으로 분리했다.
06 CSS 선택자 (원하는 태그만 잡기)
그런데 모든 h2 태그가 아니라 h2 중에서도 원하는 태그를 잡고싶으면 어떻게 해야할까?
✅ ID
HTML 코드 에서 id 값 으로 지정해주면 된다.
<h2 id= 'first-heading'> </h2> 그리고 나서 CSS 코드 에서 이렇게 쓴다.
#first-heading {
color: red;
texy-align: center;
}
id 값은 # 으로 잡아낸다는 것을 기억하자.
다른 h2 태그는 블루인데, 이 태그만 red 로 변경된 것을 확인할 수 있다.
동일한 id 를 여러 개 태그에 쓸 수 없음에 주의하자
✅ class
그런데.. 여러 개 중 꼭 하나만이 아니라 두 개 정도를 잡아내고 싶으면 어떻게 할까?
이럴 때는 class 를 사용한다. 여러 li 태그가 있는 상황이라고 하자. HTML 코드의 상황이다.
<li class = 'beginner'> </li>
<li class = 'beginner'> </li>
<li> </li>
<li> </li>
<li> </li>5개의 li 태그 중 beginner 만 잡아보자. CSS 코드로 간다.
.beginner {
color: orange;
}클래스 태그는 . 으로 잡는다. 확인해보면 다른 li 태그와 다르게 비기너 클래스 태그들만 오렌지 색으로 변한 것을 확인할 수 있다.
클래스는 띄어쓰기로 구분하기에 class = 'beginner Python' 이라 지정하면 beginner 도 잡고 python 도 잡는다
✅ href
번외편과 같이 .이나 # 말고 href 도 잡아보자.
[href = '주소'] {
color: green;
}07 CSS 선택자 퀴즈 (1)
08 CSS 선택자 (2)
✅ or 연산
h2, p {
color: royalblue;
text-align: center;
}or 연산은 쉼표를 찍어준다.
위와 같이 쉼표를 기준으로 작성하면 모두 잡힌다.
✅ and 연산
b.codeit {
color: purple;
}and 연산은 선택자를 붙여 나타낸다.
b 태그와 클래스가 codeit 인 태그가 있었다. 그러면 위와 같이 바로 이어서 쓴다.
codeit 클래스가 많아도 b태그 내의 codeit 클래스만 잡힌다.
✅ 중첩된 요소
li i {
color: red;
}
띄어쓰기를 활용 하면 li 태그 안에 있는 i 만 잡아낼 수 있다.
✅ 직속태그
li 태그에 i
li 태그에 span 태그에 i
위의 i는 직속이지만 두번째는 아니다.
위와 같은 경우
li > i {
color: orange;
}
>은 직속의 뜻이다. li 의 바로 자식이 i 일때만 잡을 수 있다.
✅ 모든 태그
li > * {
color: orange;
}
웹 스크래핑할 때 유용하게 쓰인다. li 태그의 모든 직속 자식을 잡아낸다
만약 li 태그 안 모든 태그를 잡고 싶다면li*로 잡는다.
