Elements panel
- 페이지 레이아웃 html 확인
- 스타일(css) 검사 및 편집
-> Elements panal에서 내용 수정해보고 원래 코드에 복사해서 붙여넣기도 한다.
**> 쓸만한 기능들**
## 1. HTML 부분에서 해당 태그를 클릭한 후 h를 누르면 화면에서 사라지게 하거나 나타나게 할 수 있음
2. css 부분에서 체크 버튼을 누르면 해당효과를 화면에서 사라지게 하거나 나타나게 할 수 있음
3. 왼쪽 상단의 select an element 버튼을 이용해 쉽게 찾고자 하는 태그 확인가능
4. html 각 줄을 '''을 누르고 위 아래로 이동시킬 수 있고 이는 화면상에 구현됨과제 1 - 해당페이지가 몇 개의 section으로 이루어져있나요?
section tag는 semantic tag중의 하나로 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용한다.
html을 보면 5개의 section이 있는것을 확인 가능.
추가로 section의 css에 border: 2px solid black; 효과를 주면 가시적으로 화면에서 섹션이 5개로 구분되는것을 확인 가능하다.
과제 2 - Instagram 피드의 가로 길이는?
Styles에서는 사용되지 않는 css 코드들까지 포함되어 있다.
Computed에서는 사용되는 css property들만 포함되어 있고 box-model도 쉽게 볼 수 있다.피드를 선택해준 후 computed 창에서 content를 눌러보니 가로길이가 470px이었다.
style 창에서 확인해보니 max-width가 470px임을 불 수 있었다.
창의 가로 사이즈가 470보다 커져도 470으로 유지되고 창의 가로 사이즈가 470보다 작아지면 창의 가로 사이즈도 470보다 작아지는 것을 확인할 수 있다.
과제 3 - Styles 부분의 순서가 의미하는 것은?
다음과 같은 간단한 html과 css 파일을 만들어보았다.
여기서 Styles부분을 보면 background-color이라는 프로퍼티가 여러개인데, inline style인 gray 색깔이 적용되고 나머지는 적용되지 않아서 밑줄이 그어져 있는 것을 볼 수 있다. 이는 css 적용의 우선순위 때문이고 우선순위는 다음과 같다.
1. 속성값 뒤에 !important 가 붙어있는 속성
2. 인라인 스타일(html 파일에서 스타일 직접 지정)로 적용되어 있는 속성
3. 선택자에 id가 쓰인 속성
4. class, attribute, pseudo-class로 지정한 속성
5. 태그 이름으로 지정한 속성
6. 부모 요소에 의해 상속된 속성Styles에서는 선택한 태그에 적용되는 css가 우선순위 및 실행되는 순서에 따라 작성된다.
+) 추가로 순서를 바꿔보자
id selector안의 속성값 뒤에 !important를 넣어주어 우선순위를 1등으로 만들었더니 yellow색이 적용되고 기존에 적용되었던 gray색의 inline style은 밑줄이 그어졌다.
과제 4 - user agent stylesheet란?
> user agent stylesheet
각 브라우저가 정해놓은 css 기본규칙으로 서식의 기본값을 지정해놓는다.위의 사진 Styles에서 다음과 같은 항목들을 볼 수 있었다. (오른쪽 상단에 user agent stylesheet)
개발자가 따로 지정해놓지 않는 항목들에 대해 미리 브라우저가 설정해놓은 값들(user agent stylesheet)이 지정되어있다.
이를 바꾸기 위해서는 css에서 해당 프로퍼티에 값을 할당해주면 된다.
간단하게 기본 설정된 font-size를 바꿔보자.
