TIL 03 | CSS Basics

CSS, or Cascading Style Sheets

1. CSS는 HTML element들을 꾸며준다. HTML을 꾸며주기 위해서 CSS는 HTML element들을 선택하고, 꾸며줄 style들을 지정한다.

h1 {
	color: blue;	여기에서 color는 property, blue는 value라고 함.
    text-transform: uppercase;	property와 value를 입력했으면 ;(semicolon)으로 마무리하기.
}

2. CSS는 tag, class 또는 id로 HTML element들을 선택한다.

p {
	font-family: Arial;
}

.class {
	color: grey;
}

#id {
	font-size: 18px;
}

3. 여러 CSS class들이 HTML에 적용될 수 있다.

<h1 class="title green">I have two classes</h1>

.title {
	text-transform: uppercase;
}

.green{
	color: green'
} 

4. Class들은 다시 사용 할 수도 있고, id는 한 번만 사용 가능하다.

<h1 class="red" id="only-once"></h1>
<h2 class="red"></h2>

.red {
	color: red;
}

#only-once {
	background-color: black;
}

5. !important(css에 입력, 쓰지 않는 편이 좋음) > id > class > tag 순으로 구체적이고, 이 말은 구체적일 수록 구체적이지 않은 것들을 덮어씌울 수 있다는 말.

<h1 id="red" class="blue"></h1>

h1 {
	color: black !important;
}

#red {
	color: red;
}

.class {
	color: blue;
}

h1 {
	color: green;
}

6. 여러 css selector들은 함께 연결해서 요소를 선택할 수 있다. chaining은 구체성을 높임.

<h2 class="red">Hello, world!</h2>

h2.red {
	color: red;
}
-->

7. Nested elements는 selectors를 space로 나누면서 선택될 수 있다.

<div class="title">
	<p>I am inside of a div</p>
</div>

.title p{
	font-family: cursive;
}

8. 여러 관계없는 selectors는 콤마를 사용해 나눠서 같은 style을 적용할 수 있다.

<h1>Hello, world!</h1>
<h2>Hello, our planet, the Earth</h2>

h1, h2 {
	font-transform: uppercase;
}

CSS VISUAL RULES

1. CSS declaration은 property와 value를 쌍으로 구성된다.

body {
	property: value;
}

2. font-family property는 element의 글자체를 정의한다.

h1 {
	font-family: Georgia;
}

p {
	font-family: Ariel;
}

3. font-size는 글자 크기

p {
	font-size: 22;
}

4. font-weight는 글자 두께

p {
	font-weight: bold;
}

5. text-align는 텍스를 left, right, center 중에 위치할 지 정한다.

p {
	text-align: left;
}

6. color는 텍스트 색, background-color 텍스트 배경색

.caption {
	color: black;
    background-color: white;
}

7. element의 투명성, 불투명하게 조절하는 opacity property. value의 범위는 0~1이다.

#title {
	color: red;
    background-color: white;
	opacity: 0.5;
}

8. CSS는 element의 background-image로 배경 이미지를 설정할 수 있다.

.image {
	background-image: url("https://avatars0.githubusercontent.com/u/52394741?s=280&v=4");
    background-size: cover;
    backgroudn-position: right;
    height: 500px;
}

9. *는 모든 elements를 지정할 수 있다

* {
  box-sizing: border-box;
}

CSS Box Model

1. Box model은 html elements 사이에 공간을 만듦

2. height(높이), width(넓이)은 px과 %로 크기를 정한다.

#banner {
	height: 700px;
    width: 100%;
}

3. Borders는 elements와 content를 둘러싼다.

.border {
	border: 1px solid black; border 두께, 타입, 색깔 순
    border-top:
    border-right:
    border-bottom:
    border-left
    border-radius: 3px; #border를 원형으로 만듦
}

4. Padding은 content area와 border 사이의 공간

#padding {
	padding: 10px 10px 10px 10px; top right bottom left 시계 방향으로
    padding: 10px 20px; top, bottom 10px | right, left 20px;
    padding-top:
    padding-right:
    padding-bottom:
    paddig-left:
}

5. Margin은 element의 밖과 페이지 끕의 공간

#margin {
	margin: 10px 10px 10px 10px; top right bottom left 시계 방향으로
    margin: 10px 20px; top, bottom 10px | right, left 20px;
    margin-top:
    margin-right:
    margin-bottom:
    margin-left:
}

CSS Vertical Margins Collapse

6. Horizontal Margin 이미지 참조

수평의 margin은 인접한 element의 margin이 더해진다.

7. Vertical Margin 이미지 참조

수직의 margin은 인접한 element 중에 큰 쪽의 margin을 따른다

8. margin: 0 auto 수평적으로 중심

.center {
	margin: 0 auto;
}

9. overflow: display, hide, scroll

overflow property는 보이거나, 숨기거나, scroll를 설정함.

#main {
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  width: 400px;
  height: 1000px;
  overflow: scroll;
}

10. visibility은 elements를 숨기거나 보여줄 수 있다.

.visibility {
	visibility: hidden;  # display: none과 다른 점은 display는 element를 완전히 없애서 공간도 사라지고, visibility: hidden은 공간은 남아 있음. 
}

• specificity: 특성
• in addition to ~ : ~ 이외에, ~ 에 더하여
• concise: 간결한
• conversely: 거꾸로
• transparent: 투명한
• opacity: 불투명
• comprise: 포함하다
• adjacent: 이웃의. 인접하는