CSS
CSS
Variable, Color, State, Selector
3.0 How to add CSS to HTML
-
같은 HTML 파일에 HTML, CSS 코드를 놓는 방법
head tag 안에 style tag를 작성한다. -
CSS와 HTML을 분리시키는 방법(추천)
-
link tag를 이용해 style.css와 연결하고 rel을 이용해 관계를 적어준다.
<link href=”styles.css” rel=”stylesheet”/>
3.1 Wirting Our first CSS
-
CSS가 하는 일은 HTML 태그를 가리키는 일. (이 태그는 초록색이다. 이 가리키는 것 자체를 ‘selector’)
-
CSS 작성에선 띄어쓰기를 하지 않는다.
-
font-size:20px; 과 같이, 속성 다음 콜론(:), 값 다음 세미콜론(;)으로 닫아줘야 한다. 속성이름:속성값;
-
밑줄(_) 또는 슬래쉬(/)도 사용해선 안된다.
-
css 또한 어떤 값이든 쓸 수 있다. 하지만 속성에 맞는 값을 써야 브라우저에서 적용이 된다.
-
css 또한 모든 속성을 일일이 다 기억할 필요 없다. 기본적으로 어떻게 동작하는지만 기억하면 된다.
h1{
font-size: 50px
}
3.2 What Does Cascading Mean
-
브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다.
-
CSS를 직접 적는 것을 inline CSS, CSS 파일을 include 하는 것을 external CSS라고 한다.
-
만약 같은 selector를 가리키는 CSS가 여러개이면, 가장 마지막 스타일이 적용된다.
3.3 Block and Inlines
-
div는 옆에 다른 div가 오지 않는다.(block)
-
span은 옆에 다른 span이 올 수 있다.(Inline)
-
link는 옆에 올 수 있다.(Inline)
-
p는 옆에 올 수 없다.(block)
-
옆에 다른 요소가 못 오는걸 block
-
n올 수 있는걸 inline라고 한다. (in the same line)
inline의 대표적인 태그 span, a, img
3.4 Margin Part one
- block의 특징 (inline에는 없음)
- inline block 서로 바꿀 수 있다. (display속성이라고 함)
- 어떤 요소가 inline 이면, 높이와 너비를 가질 수 없다.
- block는 높이와 너비가 있다.
- block의 특징 margin, padding, border
- 브라우저는 기본적으로 style 속성을 준다.
- margin - 경계의 바깥에 있는 공간 (border보다 바깥)
margin-top: a;
margin-right: b;
margin-bottom: c;
margin-left: d;
3.5 Margin Part two
- margin은 값 하나 -> 전체
- 둘 -> 위아래, 좌우
- 네개 -> 위, 오른, 아래, 왼
- collapsing margins 현상 : 흰 box의 경계가 보라색 box의 경계와 같다면 margin은 하나로 취급된다.(위, 아래쪽에서만 일어난다.)
3.6 Paddings and IDs
- padding은 margin과 반대 개념이다.
- padding은 box의 경계로부터 ‘안쪽’에 있는 공간이다.
- 값의 개수에 따라 적용되는 방향은 margin과 동일하다.
- 여러 div를 생성했을 때 ‘id’를 이용하여 div들을 구분할 수 있고, 각각 다른 속성을 적용시킬 수 있다.
- CSS로 first div에 속성을 적용 시킬 땐, #first {}
- 이는 body, span 등에서도 마찬가지다.
- CSS 코드의 id명은 HTML 코드에서 썼던 id명과 같아야 한다.
3.7 Border
- border : box 의 경계
- 여러 border 가 있지만 보통 한 개만 쓴다.
- border : 두께 스타일 색; 으로 작성.
-
: 모든 요소를 가르킨다.
- border-style : 2개의 요소를 작성하지 않고 스타일 하나만 사용할 수 있다.
3.8 Classes
- span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.
- 하지만 padding은 사방에 가질 수 있다.
- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.
- 온점(.)은 class명이라는 뜻.
- id⇒ #tomato는 id=”tomato” class⇒ .tomato는 class=”tomato”
- id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.
- 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다.
```css .btn {
padding: 5px 10px;
border-radius:5px;
} //둥근 버튼모양
.teal{
background-color{teal;
}
ㅇㅇ;
---
## 3.9 Inline Block
- inline : wdt, hgt 무시돼서 무언가 추가하지 않는 이상 아무것도 안보임
- inline-block : 위 문제를 해결할 수 있어서 좋긴 한데, 반응형 디자인 지원되지 않음(각 기기마다 만족하는 최적값을 일일히 찾아야 함)
예 :10.5 ,10.4 ,10.3, ...... 10.01, ......10.08, 10.05,..10.05!)
- 이 문제를 해결할 수 있는게 flex
---
## 3.10 Flexbox Part One
- 자식 엘리먼트에는 어떤 것도 적지 말아야 함.
- 자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다.
``` css
body{
display: flex;
justify-content: space-between; //수평에서 작용 (center)
align-items: stertch; // 수직에서 작용(stretch는 vh값을 주어야함)
}
- flex-container가 height를 가지고 있지 않으면 align-items를 사용하더라도 위치가 바뀌지 않음.
- vh = viewport height (스크린에 따라 다름)
3.11 Flexbox Part two
flex-direction: column; //수평 수직 바꾸기 (default = row)
flex-wrap: nowrap, wrap; // 래핑 설정
3.12 Fixed;
position: fixed; //화면에 고정 (스크롤을 움직여도 있음) 사클, 유튜브뮤직
top, left,right,bottom : 5px ; // (위치를 정하면 다른 박스를 무시함 다른 레이어에 존재)
opacity: 0.2; // 불투명율
3.13 Relative Absolute
position: static; // 레이아웃을 처음 있는곳으로 보냄
position: relative; // 엘리먼트 첫위치 기준으로 상하좌우 움직임
top, bottom, left, right : -10px;
position: absolute;// 가장 가까운 relative 부모를 기준으로 이동
top, bottom, left, right : 0px;
3.14 Pseudo Selectors part one
span:nth-child(even){
background-color: tomato;
}
first-child, nth-child(2n+1), last-child
3.15 Combinators
- 부모 안에 있는 것 모두는 p span
- 그 바로 밑에 있는것만 하면 p > span
- p 바로 뒤에 오는 span에는 p + span
- 바로 뒤가 아니어도 됨 p ~ span
p span{
color teal;
}
<p>
<span>ㅇㅇㅇ</span>
</p>
3.16 Pseudo selector part two
- 많은 Pseudo selectors가 있다.
- tag[attribute=”value”]을 통해 스타일을 적용시킬 수 있다.
- tag[attribute~=”value”]으로 value를 포함하는 모든 tag에 스타일을 적용시킬 수 있다.
background-color: red;
}
a[href$=".org"]{
3.17 States
button:active{
}
- Active, hover, focus, focus-within, visited
- active 해당 요소를 누르고 있을때
- hover 마우스가 위에 있을때
- focus 키보드로 선택되었을 때 효과를 적용
- focus-within 부모 요소에게 적용. 자신의 자식 요소 중 하나가 focused되었을 때 효과를 적용
-
visited 방문한 사이트일 경우에 효과를 적용
- 조건을 나열해 여러 상황을 설정할 수 있음.
high-tag:hover low-tag:focus{ }
위 경우, 상위 요소위에 마우스 커서가 있고, 하위 요소가 focused되었을 때 효과를 적용하게 된다.
and 의 개념으로 받아드리면 될 것 같다.
form:hover input{
~~
}
3.18 Recap
input ::placeholder{ //placeholder를 꾸며줌 ::
color:yellow
}
p::selection // 선택했을때 색상
3.19 Colors and Variables
컬러, 변수
컬러
- hexadecimal color(16진수 컬러)
- RGB //rgba = 투명도까지 (255. 255. 255. 0.8)
:root{ // 변수 설정
–main-color”red
}
댓글남기기