수업목표
1.Elements패널을 통해 웹 페이지 구성과 구성 요소들의 스타일을 확인할 수 있다.
2.Console패널을 통해 자바스크립트 코드를 브라우저에서 즉시 실행할 수 있다.
3.Network패널을 통해 네트워크 상으로 주고 받는 데이터를 확인할 수 있다.
4.Application패널을 통해 브라우저의 저장소에 담긴 데이터를 확인할 수 있다.
📚 개발자 도구가 뭐야?
1. Elements panel
- HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널.
- 개발하는 도중에 이 속성이 어디에 속해 있는지 개발자도구에서도 확인이 가능하다.
✅ Elements 패널의 기능?
- HTMl 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널
(높이 이런거 다 수정도 되요) - DOM(웹 페이지의 구성 볼 수 있지!)과 CSS를 자유롭게 조작해서 사이트의 레이아웃 디자인을 테스트 할 수 있다.
- (console 객체)구글링 해서 알게된 JS등 보고 싶을 때 VSC말고 개발자 도구로 바로바로 확인 공부해보자!
- 사용된 이미지나 영상 등 경로를 통해서 정보를 가져올 수도 있다.
✅ 해당페이지는 몇개의 세션?
✅ Instagram 피드의 가로 길이는?
✅ Styles 부분의 순서가 의미하는 것은?
- 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
- 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
CSS Specificity- inline style > id > class > tag
🤔 inline style이 왜 가장 구체적일까? 생각을 하는 과정에서 inline이라는 단어에서 Position과 관련된 것인가?하는 생각밖에 들지 않았다. 그래서 팀원들과 대화를 나누며 자료도 찾아보았고 'CSS 스타일 적용 방법 3가지'에 대해 알 수 있었다.
- 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트는 스타일 시트의 내용이 어느 곳에 위치하느냐에 따라 분류되는 것이다.
- Inline Style(인라인 스타일)
- 특정 태그에 대해서만 스타일을 지정하는 방식.
(즉, 스타일에 태그안에 포함되어 있다는 뜻!)<body> <p style="font-size:25pt;color:pink;">난 핑크야!</p> </body> - 특정 태그 하나에 대해서만 고유한 스타일 지정해야하는 경우 해당 태그의 Style속성을 사용하며, 모든 태그에 적용할 수 있는 공통 속성이므로 임의의 태그에 사용할 수 있다.
- 지정하고 싶은 속성에 대해서 "속성:값" 형태로 세미콜론으로 구분하여 나열한다.
- Html과 섞여 있어서 인라인 스타일을 많이 작성할 경우에는 어디에 있는지 알아내기 어려우므로 가급적 사용을 자제하자.
- 속성은 위에서 아래로 상속된다.
코드를 보자!
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="extstyle.css">
<style>
body { font-size:20pt; }
div {font-size:60px;color:purple;}
p {font-size:18pt; font-weight: bold; }
a { font-size:40pt;color:green; }
</style>
</head>
<body>
<h2>Cascading Style Sheet</h2>
<p>나는 스타일시트의 속성을 그대로 따른다.</p>
<p style="font-style:italic;">나는 기울임체로 표시된다.</p>
<p style="font-weight:bold;color:red">나는 빨간색 굵은 글꼴을 사용한다.</p>
<div>디브디브딥
<img src="대만사진.png" alt="대만폭포사진" width="300px">
</div>
<h1>속성은 위에서부터 아래로 상속된다.</h1>
<h3>폭포처럼 말이야!</h3>
<a href="">나는 링크야!</a>
</body>
</html>
- Internal Style Sheet (내부 스타일 시트)
- HTML 문서 내부 상단에
<Style>태그를 이용해 별도로 스타일을 정의. - id로 정의된 선택자에는
#기호 사용 - Class로 정의된 선택자에는
.기호 사용 - HTML 문서 하나가 고유한 CSS 내용을 가진다고 생각할 때 사용.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<style>
.test {
color:steelblue;
font-size: 30px;
}
.test2{
font-weight: bold;
}
</style>
<body>
<div class="test">나는 Internal Style Sheet</div>
<div class="test2">style태그를 사용하지.</div>
</body>
- External Style Sheet (내부 스타일 시트)
- HTML 문서와 별도로 확장자가 CSS인 파일을 생성 후, HTML 문서 상단에
<link>태그로 불러와 스타일을 적용.
<link>태그 이용해 외부 CSS파일 불러옴.rel속성: 현재 문서와의 관계.type속성: CSS문서 타입. HMTL5 경우에는 생략 가능.href속성: CSS 파일 주소.- 하나의 스타일로 여러 개의 HTML페이지에 적용하여 사용하고자 할 때 편리.
- 하나의 스타일 페이지만 바꾸면 연결된 전체 HTML페이지가 바뀌므로 유지, 보수에 편리.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="test">나는 External Style Sheet</div>
<div class="test2"> link 태그로 불러오지</div>
</body>
</html>
body{
background-color: cadetblue;
}
.test {
color: cornsilk;
font-size: 20px;
}
.test2{
font-size: 40px;
font-style: inherit;
}
✅user agent stylesheet 란?
- 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
- Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서
reset.css혹은normalize.css파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능
영원히 공부하는 멋진 장선생!!