CSS 기본 정리
Selector (선택자)
CSS = Cascading Style Sheet
Author style = 우리가 만드는 css
User Style = 브라우저에서 사용자가 글자 크기, 다크 모드 등을 설정하는 것
Browser = 브라우저에서 기본적으로 지정한 스타일
그래서 CSS 에서 Cascading은 Author -> User -> Browser 순서대로 스타일이 지정되는 것을 말한다.
만약 "! important"를 쓰게 되면 이 순서는 무시하고 제일 중요한 CSS로 지정 된다.
그러므로, 가능하면 ! important를 쓰지 않는 것이 좋다.
selectors (선택자)
HTML의 어떤 태그들을 고를건지 정의하는 것
| * | 모든 태그들을 고르는 것 |
| 태그의 이름 ex) div | 해당 태그를 고르는 것 |
| #id | 해당하는 id만 고름 |
| .class | 해당하는 class를 고름 |
| : | 태그 옆에 State를 달 수 있음 |
| [] | 해당하는 속성값만 고름 |
margin과 padding
padding : 컨텐츠 안의 공간을 조절
margin : 컨텐츠 밖의 공간을 조절
padding, margin은 top, right, bottom, left를따로 지정할 수도 있다.
padding-right 이런 식으로 하나씩 지정할 수도 있지만, 시계 방향 순서로 top, right, bottom, left를 한 줄에 지정할 수 있다.
예)
padding: 20px 20px 20px 20px;
위 아래만 따로 줄 경우에는
padding: 20px 0px;
css selector 연습하기 아주 좋은 게임!!
Layout (레이아웃)
Display
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Demo</title>
</head>
<body>
<!-- Block level -->
<div></div>
<div></div>
<div></div>
<!-- Inline level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>div, span {
width: 80px;
height: 80px;
margin: 20px;
}
div {
background: red;
display: inline-block;
}
span {
background: blue;
display: block;
}
기본적으로 div는 block-level, span은 inline-level의 태그이다.
여기서 block은 한 줄에 하나만 표기되는 방식, 그리고 inline은 태그 안에 내용이 있을 때 한 줄에 모두 표기되는 방식을 말한다.
Container
container는 body 전체를 감싸는 속성이라고 이해하면 되는데,
여기서 container는 기본적으로 position 속성이 static이 디폴트 값이다.
만약 container의 크기를 변경하고자 한다면 반드시 position 속성을 relative로 바꿔줘야 한다.
position: absolute는 선택한 태그의 부모 태그를 기준으로 위치 조정이 되게 해주는 속성이다.
position: fixed는 container를 벗어나서 window를 기준으로 위치 조정이 되게 해준다.
position: sticky는 스크롤을 내려도 원래 있는 자리에 고정시켜주는 속성이다.
Flexbox
float : 텍스트와 이미지를 배치하기 위한 속성
참고
css 레퍼런스 사이트
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
CSS reference - CSS: Cascading Style Sheets | MDN
Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Al
developer.mozilla.org
게임으로 css selector 연습할 수 있는 사이트
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
css 브라우저 호환성을 알아볼 수 있는 사이트
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
웹사이트 컬러 조합을 볼 수 있는 사이트
https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=BBDEFB
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
flexbox 속성에 어떤 item이 들어가는지 알 수 있는 사이트
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com