Day 5
HTML 기본 이론
Javascript와 css는 웹을 예쁘게 꾸며주는 장치
HTML은 글씨를 저장해두는 뼈대이며
CSS는 정렬, 디자인 담당하고
Javascript는 웹 내 다른 페이지 노출 혹은 스크롤시 움직임을 따라 맞춰서 변하도록 해주는 것
HTML 에서 ctrl + ! 시 초기 세팅
head 가 부모 안에 내용물이 자식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fintech_Service</title>
</head>
<body>
<h1> 안녕하세요 </h1>
<a href="https://www.naver.com/">네이버</a>
<!-- ㅇㅇ -->
</body>
</html>💡 코드 정리
ctrl + / : 주석 처리
ctrl + K + F : 자동 Tab 정리
alt + L + O : HTML live server 실행
alt + shift : 코드 복사
상대경로 : <img src="../images.jfif">
절대경로 : <img src="C:/Program/images.jfif">
get방식 : 데이터가 URL에 노출됨
post 방식 : URL에 주소가 드러나지 않는 것 (보안상 이슈)
Day 6
HTML과 CSS 실습
HTML에서 CSS 문서를 불러와 사용함
<link rel = "stylesheet" href = "index.css">
rel이 무엇일까? GPT에게 물어보았다.
기술적으로는 rel="stylesheet" 대신 다른 값을 사용해도 브라우저가 CSS 파일을 로드할 수는 있지만, 표준과 관습에 맞지 않기 때문에 예상치 못한 동작이 발생할 수 있습니다. 올바른 rel 값을 사용하지 않으면 브라우저가 링크된 리소스를 적절하게 해석하지 못할 수 있습니다.
💡rel 속성
alternate: 대체 스타일시트 등을 지정할 때
icon: 웹사이트의 아이콘 파일을 지정할 때
manifest: 웹 애플리케이션 매니페스트 파일을 지정할 때
preload: 특정 리소스를 미리 로드하도록 지정할 때
stylesheet: CSS 스타일시트를 지정할 때(가장 일반적인 사용)
그래서 <link rel="icon" href="index.css">
icon 파일로 작성하게 될 경우, index.css를 읽어오지 못하게 됨.
스타일 시트
- 외부 스타일 시트
별도의 CSS 파일에 정의된 스타일 규칙을 HTML 문서에 링크하여 사용하는 방법
<link>태그를 사용 - 내부 스타일 시트
HTML 문서의<head>태그 내에<style>태그를 사용하여 스타일을 정의하는 방법 - 인라인 스타일 시트
HTML 요소의 style 속성을 사용하여 개별 요소에 직접 스타일을 적용하는 방법
<body>
<p style="color: blue; font-size: 14px;">This is a paragraph.</p>
</body>사용 빈도 : 외부 시트 >>>> 내부 >> 인라인
외부 스타일 시트는 유지보수가 용이하고 여러 문서에 적용이 가능하며, 한번 로드 후 여러 페이지에서 사용가능하므로.
우선순위 규칙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red; /* 첫 번째 정의 */
}
p {
color: blue; /* 두 번째 정의 */
}
</style>
</head>
<body>
<p>이 문장의 색상은?</p>
</body>
</html>이 예시에서 <p> 요소의 텍스트 색상은 blue
왜냐하면 두 번째 스타일 정의가 첫 번째 정의를 덮어쓰기 때문!
✔ CSS 스타일 순위는 인라인 > 내부 > 외부 로 작용함.
외부 스타일 시트로 작성해두다가도, <p style="color: blue;">이 문장의 색상은?</p> <!-- 인라인 스타일 --> 이와 같은 경우는 blue로 적용됨.
Day 7
웹 크롤링을 위해서 CSS 선택자(셀렉터)를 잘 알아야 함.
셀렉터에 대한 설명보다는, 내가 헷갈렸던 것 위주로 작성
class는 여러 태그에 같은 클래스 이름을 지정해 줄 수 있지만 id는 그 값이 유일해야 한다.
css
/* class 선택자 .클래스명 */
.h1_class {
color: red;
}
.p_class {
background-color: gray;
}HTML
<!-- class 선택자 -->
<h1 class="h1_class">class 선택자</h1>
<p class="p_class">class 선택자는 .클래스명으로 선택</p>
<p class="p_class2">클래스는 중첩해서 여러개를 같이 쓸 수 있다.</p>
<p class="p_class p_class2 p_class3">다중 클래스를 선택할 때는 .으로 연결해서 선택한다.</p>**`a[href]`는 href 속성을 가진 `` 요소에만 스타일을 적용, `[href]`는 href 속성을 가진 모든 요소에 스타일을 적용 **
/* 기본 속성 선택자 */
a[target="_blank"] {
/* text-align: center;
font-size: 15px; */
color: red;
}
a[href] {
color: yellowgreen;
}
[href] {
color: blue;
}