CSS 선택자를 스스로 알아내는 방법
예를 들어
class="saw" 로 잡고
class를 style태그 안에 .saw로 표시하자.
| <style> .saw{color:gray;} </style> |
로 표시하면
saw를 그레이 컬러로 표현할 수 있다.
class라는 속성은
여러 개의 값이 들어올 수 있으며
값들은 띄어쓰기로 구분한다.
또한 하나의 태그에는 여러 개의 속성이 들어올 수 있고
여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
그러나 이 방법은 그렇게 좋은 방법이 아니다.
왜 그럴까?
그 이유는 보다 가까이에 있는 명령이 더 큰 영향력을 갖기 때문이다.
그렇기 때문에 혼란을 겪지 않기 위해
우리는 id 선택자를 사용한다.
id="active"로 잡고
#active로 표시하면
id선택자는 class선택자보다 우선된다.
즉,
id선택자와 class선택자가 붙으면
id 선택자가 이긴다.
또한 class선택자와 tag선택자가 붙으면
class선택자가 이긴다.
왜 id>class>tag 인가?
id의 값은 단 한번만 등장해야 한다.
id의 핵심은 중복되면 안된다는 것이다.
즉, 유일무이한 값이다.
그리고 tag선택자는 id보다 더 포괄적이다.
여기서 무슨 논리가 발생하냐면
좀 더 구체적인 것이 포괄적인 것보다 우선순위가 높다는 것이다.
왜냐하면
CSS를 개발한 창시자들은
전체적인 태그의 디자인을 쭉 해내고
그 다음에 id로 예외적인 것을 잡아 내는 것이
더 효율적이라고 생각했기 때문이다.
그리고 여기서 class는 중간 정도의 우선순위의 선택자이다.
*CSS Selector를 검색하는 방법
- css selector로 구글에 검색하면 여러 가지 형태의 선택자를 알고 선택할 수 있다.
- 이러한 선택자를 조합하여, 원하는 효과를 정교하게 어떠한 태그에 타겟팅할 수 있고 그걸 통해서
작성하는 코드의 양을 획기적으로 줄일 수 있으며, 어떤 한 부분만 수정하면 나머지가 동시에 바뀌는 똑똑한 코드를 짤 수 있는 토대가 마련된다.
박스모델
테두리를 나타내는 속성은 border이다.
태그는 태그의 성격과 쓰임에 따라서 화면 전체를 쓰는 것과 자기 크기만큼 부피를 갖는 것으로 나뉜다.
여기서,
화면 전체를 쓰는 태그를 block level element(element는 tag와 같은 뜻이다)
자기 부피를 쓰는 태그를 inline element라고 부른다.
그리고
display:inline;
display:block;을 통해 이 형태를 바꿀 수 있다. (기본값은 css를 통해서 언제든지 바꿀 수 있다.)
display:none;은 화면에서 사라지게 하는 기능이다.
선택자에서 , 콤마라고 하는 선택자를 통해 코드의 양을 획기적으로 줄일 수 있다.
또한 border: 5px solid red;를 통해서도 내용을 줄일 수 있다.
자, 이번에는 매우 중요한 박스모델에 대해서 알아보자.
콘텐츠와 테두리 사이에 여백을 주고 싶다면 무슨 값을 줘야 할까?
padding 값을 주면 된다.
그리고 테두리와 테두리 사이에 간격을 조정하려면 무슨 값을 줘야 할까?
margin 값을 주면 된다.
그리고 콘텐츠(element 태그)의 크기를 변경하려면 무슨 값을 줘야 할까?
width 폭 , height 높이 값을 주면 된다.
위의 그림을 보면 알 수 있듯이
content가 가장 안쪽에 있고 그 테두리는 border
border 안쪽은 padding, 바깥쪽은 margin으로 구분된다.
즉, 박스모델이란 HTML 태그 하나하나를 일종의 박스로 취급하여 그것의 부피감을 결정하는 것.
즉, 디자인에서 핵심적인 요소를 결정하는 매우 중요한 기능이다.
*알아두면 좋은 것들
1. html에서 주석을 나타낼 때는
/* 주석 */
로 표현한다.
2. 검사 기능은 웹페이지를 분석하는 데 큰 도움을 받을 수 있는 도구이다.
'Skills > CSS' 카테고리의 다른 글
| 1장. CSS의 정의와 기본 문법 (0) | 2022.01.28 |
|---|
