-
[ html ] 전체선택자 * 사용 방법코딩의 즐거움/HTML 2020. 11. 22. 12:00
[ html 전체선택자 * 사용 방법 ]
html 에서 기호 * 은 전체선택자로 사용된다.
html 내부에 있는 모든 태그를 선택하는 선택자로
css에서 html에 기본적으로 들어가 있는 margin 이나 padding을 없앨 때 자주 사용된다.
html 내부에 모든 태그란
예) head, title, body, h1~h6, p 등 말그대로 모든 태그를 뜻한다.
* 전체선택자 적용 전의 화면
전체선택자를 적용하기 전에
위와 같이 코드를 작성해서 화면을 열어보았다.
위와 같이 빨간색으로 표시한 부분이
우리가 설정하지 않았는데 기본적으로 들어가있는
margin과 padding 되시겠다.
* 전체선택자 적용 후 화면
title 태그 안에 style 태그를 넣어서 전체선택자를 적용한 결과다.
<style>
*{
margin: 0;
padding: 0;
}
</style>
기호 *을 입력해서 마진과 패딩 값을 0으로 줬더니
기본적으로 들어가있던 마진과 패딩 뿐만 아니라
h1 태그와 p 태그의 여백도 없어진 걸 볼 수 있다.
이를 html 초기화 한다고 많이 하는데,
이 의미는 css로 디자인 작업하기 전에 작업하기 편하게
html에 들어가있는 효과를 없앤다는 뜻이다.
물론 전체선택자만 가지고서 모든 걸 초기화 할 수는 없고,
초기화 하는 작업에서 유용하게 사용되는 선택자이다.
쉽지만 공부하지 않으면 모르는 사실.
전체선택자는 늘 잘 사용하고 있는 태그 중 하나이다.
'코딩의 즐거움 > HTML' 카테고리의 다른 글
[ HTML] id(아이디) 선택자와 class(클래스) 선택자 (0) 2020.11.16 [ 코딩 20 ] html 시멘틱 태그 알아보기 (0) 2020.11.06 [ 코딩 19 ] html 비디오 태그 알아보기 (0) 2020.11.04 [ 코딩 18 ] HTML input type 종류 알아보기 (0) 2020.11.03 [코딩 17] HTML 테이블 태그 두번째 (0) 2020.10.25