CSS
CSS Selector
[ CSS 선택자 | MDN ]
선택자는 CSS 규칙조합이 어떤 요소들에 적용될지 정의한다.
/* 모든 엘리먼트를 선택한다 */
* {
box-sizing: border-box;
}
/* 모든 <p> 엘리먼트를 선택한다 */
p {
color: red;
}
/* class명이 'box'인 모든 엘리먼트를 선택한다 */
.box {
background-color: orange;
}
/* id명이 'wrapper'인 엘리먼트를 선택한다 */
#wrapper {
border: none;
}[ CSS 선택자 게임 - Well aimed? How well do you know CSS selectors? | Paulina Hetman ]
height
[ height | MDN ]
height CSS 속성은 요소의 높이를 지정한다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정한다.
height: 200px;
height: 15em;
height: 100%
height: 100vh;box-sizing
[ box-sizing | MDN ]
box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.
-
border-box
테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지한다. 대부분의 경우 이 편이 크기를 조절할 때 쉽다. -
content-box
기본 CSS 박스 크기 결정법을 사용한다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해진다.
box-sizing: border-box;
box-sizing: content-box;cursor
[ cursor | MDN ]
cursor CSS 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다.
'마우스 커서가 올라갔을 때' 보여줄 모양을 지정하므로, 마우스 포인터가 요소 위에 올라갔을 때의 변화를 지정하는 가상 클래스 :hover을 사용할 필요가 없다.
/* <button class="btn></button> */
.btn {
cursor: pointer;
}
/* 버튼 위에 마우스를 올리면, 손가락 모양으로 포인터가 바뀐다 */float
[ float | MDN ]
float CSS 속성은 어떤 엘리먼트가 보통 흐름(normal flow)으로부터 빠져나와 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.
float: left;
float: right;overflow
[ overflow | MDN ]
overflow CSS 속성은 블록 레벨 컨테이너(block-level container)보다 내용(content)이 너무 클 때(즉, 내용을 감싸고 있는 영역보다 커졌을 때), 내용을 잘라낼 지, 스크롤 바를 보여줄 지, 혹은 범위를 넘어가게 보여줄 지를 지정한다.
overflow 속성이 효력을 갖기 위해선, 반드시 블록 레벨 컨테이너의 높이가 설정되어 있거나, white-space가 nowrap으로 설정되어야 한다.
- overflow의 여러가지 값을 적용한 모습 보기(codepen)
- 모바일 브라우저에서 스크롤바를 보이게 하기 :
[ ::-webkit-scrollbar | MDN ]
[ Make scrollbar visible in mobile browsers | Stack Overflow ]
/* 스크롤바 없이 컨테이너 밖으로 넘치게 모든 내용을 보여준다 */
overflow: visible;
/* 스크롤바 없이 컨테이너 안에 들어갈 만큼만 내용을 보여준다 */
overflow: hidden;
/* 컨테이너 안에 가로와 세로 스크롤바가 생긴다 */
overflow: scroll;
/* 컨테이너 안에 필요한 스크롤바가 생긴다 */
overflow: auto;