TIL 04.01
종찬 님 특강
명칭 정리
div {
background-color: orange;
width: 800px;
}
div: 타입 선택자
background-color: 속성(property)
orange: 값(value)
div
의 크기는 부모 요소의 크기에 관련해 결정됨
width
는 국가에 따라 기준이 달라진다 (ex 한국은 왼쪽, 아랍은 오른쪽)
auto
width: auto;
부모 기준으로 높이 자동 조절
height: auto;
부모가 아닌 자식 기준으로 높이 자동 조절
margin-left: auto;
자동으로 좌측 여백을 취하겠다 → 오른쪽으로 이동
margin-right: auto;
자동으로 우측 여백을 취하겠다 → 왼쪽으로 이동
margin: 0 auto;
블록 요소의 가운데 정렬 방법 (width 값이 필요함)
- 0: 위아래 여백
- auto: 남는 여백을 양쪽으로 취하기 때문에 중앙 정렬 가능해짐
위아래 여백 없이 좌우 균등하게 여백 주며 가로 가운데 정렬
width: 400px;
margin: 0 auto;
initial
기본 초기값을 명시적으로 쓰는 것
IE에서는 지원하지 않기 때문에 잘 쓰지 않고 0으로 많이 씀
- can i use에서 확인 가능
✔️ TIP
background-color의 initial value는 tranparent
inherit
상속되는 속성이 있고 되지 않는 속성이 있으니 검색해 볼 것
원래 상속이 지원되는 속성은 초기화 할 때 inherit 키워드 즐겨 쓰자
상속이 지원되지 않으면 initial
background-position
%: 기본값은 0% 0%
- 앞의 값은 x축, 뒤의 값은 y축을 의미
- right, left, center는 x축, top bottom은 y축을 의미
이미지 스프라이트 기법 사용 시에 사용하면 편리
-
이미지 스프라이트(image sprite): 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
-
이미지를 하나만 관리할 수 있다는 장점이 있음
-
이미지 예시
-
코드로 사용하는 법
해당 코드처럼 입력하면 모든 아이콘마다 적용될 hover 기능을 하나씩 적어야 한다는 번거로움이 있다
.icon.github {
background-color: black;
background-position: left top;
}
.icon.facebook {
background-color: dodgerblue;
background-position: center top;
}
.icon.email {
background-color: orangered;
background-position: right top;
}
.icon.github:hover {
background-position: left top;
}
.icon.facebook:hover {
background-position: center top;
}
.icon.email:hover {
background-position: right top;
}
background-position-y 사용해 한 번에 해결 가능
.icon:hover {
background-position-y: bottom;
}
text-align: center / margin: 0 auto
inline일 때 text-align, block 요소일 때 margin
부모에게 text-align: center;
를 주고 <h1>
, <p>
를 작성
- 가운데 정렬이 된 것처럼 보일 수 있음
- 그러나
<h1>
,<p>
는 블록 요소이기 때문에 박스는 고정, 글자만 가운데 정렬되는 것 - 안의 텍스트는 inline인 것
width: 100% / width: auto
둘 다 부모 요소가 가지고 있는 너비만큼 꽉 채운다는 점은 동일
width: 100%
: margin, padding, border 값이 조금이라도 주어지면 부모 요소의 너비 초과width: auto
: margin-left를 자동으로 포함해서 계산하여 움직임, 좀 더 유연한 개념
inline & block elements
inline
- 종류:
<a>
,<span>
,<em>
etc - width와 height 속성 적용 안 됨
margin: 20px;
로 값을 줄 경우 위아래는 적용되지 않음
padding: 20px;
로 값을 줄 경우 보여지기는 하지만 상하단이 공간을 차지하지는 않음
a 태그 최초 작성 시 가로로 배치된 것을 확인할 수 있음
인라인 요소의 특징
- 한 줄씩 줄 바꾸어 작성할 경우 요소들 사이에 공백 생김
- 한 줄에 한꺼번에 작성 시 공백 사라짐
block
종류: <div>
, <p>
, <h1>
etc
- width, height, padding, margin 속성 모두 적용 가능
- 블록 요소는 한 줄이라는 땅을 다 샀다고 생각하면 됨
- 블록 요소에 인접한 상하단 margin은 겹친다
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
</div>
.wrapper {
margin: 100px auto;
width: 260px;
}
.box {
margin: 30px;
}
부모와 자식 모두가 블록 요소일 경우에 margin을 주면 위아래 margin이 눈에 안 보일 수 있음
이유: margin이 겹쳐 margin 상쇄 일어남
→ 부모의 margin이 100으로 더 크기 때문에 부모 margin이 적용되고 자식의 margin 30은 그 안에 포함되어 있는 값이 되는 것
.wrapper {
margin: 100px auto;
width: 260px;
padding: 1px;
}
.box {
margin: 30px;
}
padding을 주게 될 경우 부모와 자식의 margin이 분리됨
혹은 overflow: hidden;
이나 display: flow-root;
로도 해결 가능
overflow
는 IE를 고려한 선택, flow-root
는 IE가 빠진 밝은 미래의 해결책
display
display: block;
inline으로 태어났지만 block으로 살겠다는 의미
display: inline-block;
블록 요소이지만 인라인 형태로 쓰고 싶을 때 사용
기준점: 텍스트의 베이스라인
height 속성을 제거하면 text의 양만큼 씀
background-color: orange;
padding: 20px;
display: inline-block;
선택자 우선순위
같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
점수가 높은 선언이 우선
점수가 같은 경우 가장 마지막에 해석된 선언이 우선
- Specificity Calculator에서도 확인 가능
- important를 남발하는 것은 생태계 파괴
.wow {
background-color: blue;
}
.wow {
background-color: purple;
}
같은 클래스에서 동일한 속성 작성 시 나중에 작성한 속성이 적용
#wow {
background-color: aqua;
}
.wow.wow {
background-color: purple;
}
h1.wow.wow2 {
background-color: blue;
}
h1 {
background-color: orange;
}
h1 {
background-color: blue;
}
우선순위를 높여야겠다고 판단되면 붙여쓰면서 클래스 강조
.wow .wow : wow 클래스 하위의 wow 클래스
.wow.wow : wow 클래스 강조하며 우선순위 높임
TIPS
지키면 편한 css 작성 순서
- 전체적인 덩어리를 먼저 나눌 것
- 각 요소들이 차지하는 공간 확인을 위해 background-color 같은 속성 부여하여 시각적인 힌트 줄 것
- 안에 내용물을 넣기 전에 공간부터 마련하는 레이아웃 스타일부터 짤 것 (margin, padding 설정)
- 요리 재료 손질 먼저 할 것(요소, 타입 셀렉터 이용) 가장 담백한 상태로 만들 것 (inherit, initial(IE 박멸), margin: 0; padding: 0;(IE 지원하고 싶을 때))
- 이후에 세세한 작업 시작할 것 (class 이름 부여)
css 작성 시 공통적인 부분 + 스타일 초기화 부분은 가장 위로 뺄 것
여백 관련
div {
margin: 10px;
padding: 15px;
border: 10px solid royalblue;
}
margin
: 외부 여백
padding
: 내부 여백
설정하는 만큼 요소의 크기가 커짐
border
: 테두리를 설정해 주는 속성
border의 굵기는 width에 더해짐
다양한 border-radius 경험해 보기
https://9elements.github.io/fancy-border-radius/fancy-border-radius.png
선택자 작성
타입 셀렉터는 위험하다!
후손 선택자로 작성할 것
Author And Source
이 문제에 관하여(TIL 04.01), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@plutoin/TIL-04.01저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)