TIL 04.06
1. CSS 선택자
1️⃣ 전체 선택자
* 기호를 사용해 모든 선택자에게 속성 적용
2️⃣ 타입 선택자
태그 이름을 사용해 스타일 적용
p {
color: blue;
}3️⃣ 클래스 선택자
.기호 사용해 나타냄- 클래스 이름을 사용해 스타일 적용
- 동일한 클래스 이름을 가진 여러 클래스를 생성 가능하나 스타일 적용 시 일괄 적용될 수 있다는 점에 유의해야 함
- 이름 지을 때 알파벳, 언더바, 하이픈 셋 중 하나로 시작해야 함 (숫자 X)
.one {
color: green;
}4️⃣ 아이디 선택자
#기호 사용해 나타냄- 아이디 이름을 사용해 스타일 적용
- 파일 안에서 하나만 존재해야 함 (ex id="one"이 존재할 경우 one이라는 아이디는 다시 사용할 수 없음 two, three 같은 다른 명칭으로 사용해야 함)
- 이름 지을 때 알파벳, 언더바, 하이픈 셋 중 하나로 시작해야 함 (숫자 X)
#two {
color: green;
}5️⃣ 선택자 목록
여러 태그들을 콤마로 나열해서 일괄로 스타일 적용시킬 수 있음
타입 선택자들의 연결이기 때문에 우선순위는 타입 선택자와 동일
그러나 위에서 이미 동일 태그에 스타일을 적용한 경우 후자 우선순위로 제일 마지막에 적용한 스타일이 적용됨
h1, h2, h3, h4, h5, h6, p {
color: red;
}2. 선택자 우선순위
1️⃣ 후자 우선순위
동일 선택자를 여러 번 작성해 스타일 적용시켰을 경우 가장 마지막에 작성한 부분이 적용됨
2️⃣ 구체성의 원칙
어떤 선택자가 더 구체적으로 작성되었는가를 기준으로 우선순위를 매김
p 태그만으로 스타일을 적용한 것보다 p.color-red로 타입 선택자와 클래스 이름을 같이 써 준 첫 번째로 작성한 스타일이 구체성의 원칙으로 인해 적용됨
가중치
구체성의 원칙은 얼마나 더 구체적인지를 판단할 때 가중치를 기준으로 점수를 매김
아래 코드와 같이 id와 class가 함께 있을 때 id > class > 타입 순으로 스타일 적용
자리올림
.h1은 클래스 선택자이기 때문에 10점
html부터 12개의 타입 선택자가 작성된 것은 12점
그러나 결과는 빨간색으로 나타난다
✔️ 이유
- 동메달을 12개 따도 은메달 1개 딴 사람을 이길 수 없는 것과 같다!
- 타입 선택자로 1점씩 12번 얻어도 한 번에 10점을 딴 클래스를 이길 수 없는 것
- 이를 자리올림이 되지 않는다고 표현함
3️⃣ 중요성의 원칙
!important 키워드를 사용하면 절대적인 우선순위가 됨
우선순위 계산이 꼬이기 때문에 되도록이면 쓰지 않는 것을 권장
!important 키워드가 여러 곳에서 쓰였다면?
- 구체성의 원리로 따져 더 구체적으로 작성된 부분의 스타일을 적용
button보다button.im이 더 구체적이기 때문에 salmon 색상으로 버튼 스타일 적용
3. 박스
html과 body 요소는 background-color를 입혔을 때 자신의 영역 너머 영역까지 색상을 씌운다는 특징이 있음
html에 스타일 적용하지 않은 경우
body자신의 크기를 넘어서는 영역까지 색상이 적용됨
html에 색상 지정해 준 경우
body자기 자신 크기까지만 색상이 적용됨
1️⃣ block 박스
- 사용 가능한 공간을 양 옆으로 100% 사용 (한 줄을 다 사용함), 사용하지 못하는 공간은 마진 영역으로
width와height속성을 사용하여 스타일을 컨트롤 할 수 있습니다.padding,margin,border로 스타일을 줄 수 있으며 해당 속성들이 다른 요소들을 밀어냄
2️⃣ inline 박스
- 딱 박스 크기만큼만 공간을 차지함
- 이 때문에 줄을 바꾸지 않음
width와height사용 불가능padding,border를 사용할 수 있지만margin은 좌우만 조절 가능- 속성들의
top,bottom값이 다른 요소들을 밀어내지 않음
- 속성들의
예제
- block 요소인 h1은 padding, border, margin 값으로 인해 서로를 밀고 있음
- inline 요소인 strong은 border 값이 있음에도 밀어내지 않아 중첩되고 있음
4. margin과 margin 겹침 현상
1️⃣ margin
- 외부 여백을 주는 속성
- 요소가 차지하는 전체 너비와 높이에 영향을 주지 않고 외부에만 영향을 줌
h1 {
/* 상 하 좌 우 각각 여백 */
margin: 10px 20px 30px 40px;
/* 상 하 좌 우 전체 10px */
margin: 10px;
/* 상 하 10px 좌 우 20px */
margin: 10px 20px;
/* 상 10px 좌 우 20px 하 30px */
margin: 10px 20px 30px;
}2️⃣ margin 겹침 현상
- 요소와 요소 사이
margin-top,margin-bottom의 여백 값이 있을 때 더 큰 값이 적용되는 것
child-one의 margin-bottom과child-twomargin-top이 겹침- 더 큰 값인 40px의 margin 값이 채택됨
- 자식 요소의 margin-top, margin-bottom이 부모에 영향을 주지 않는 것
div.child에 margin-top 값이 주어졌는데도 부모 요소의 높이에 변화가 없음- 그러나 margin이 부모 영역 밖으로 존재하기 때문에 부모 영역에서 margin-top을 또 줄 경우 낮은 값이 상쇄됨
- 위와 같은 경우 해결방법
- 부모 요소에
overflow속성 사용 - 부모 요소에
display: inline-block - 부모 요소에
border적용
5. 가변 크기 단위
em, rem
em은 부모 요소 폰트 크기의 배수
rem은 조상 요소 폰트 크기의 배수
- p, div의 폰트 크기: 기본값 16px
- 세 번째 one 클래스의 폰트 크기: 80px
10px x 2(em) x 2(em) x 2(em) = 80
Author And Source
이 문제에 관하여(TIL 04.06), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@plutoin/TIL-04.06저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
