Cascading Style Sheet
cascading : 위에서 아래로 흐르는
위에서부터 아래로 코드를 읽는다는 뜻
맨 마지막에 있는 코드가 구현됨
div 옆에 다른 div 는 올 수 없음.
span은 옆에 다른 span이 올 수 있다.
link는 옆에 올 수 있다.
p는 옆에 올 수 없다.
옆에 다른 요소가 못 오는걸 block
올 수 있는걸 inline라고 한다. (in the same line)
inline의 대표적인 태그 span, link, img
block의 특징 (inline에는 없음)
block은 높이와 너비가 있다.
margin, padding, border
브라우저는 기본적으로 style 속성을 준다.
margin - 경계의 바깥에 있는 공간 (border보다 바깥)
inline / block 솏성은 서로 바꿀 수 있다. (display속성이라고 함)
inline 속성 이면, 높이와 너비를 가질 수 없다.
margin
방향 설정없이 margin을 하나를 주면 사방에 전부 적용됨.
4개를 줄 경우 시계방향 순 적용 (상 우 좌 하)
collapsing margin 현상 (상하에서만 발생)
body안에 있는 div의 위아래 margin이 body의 margin과 만나면 둘 중 큰 값의 마진으로 body에 적용된다
padding
padding은 margin과 반대라고 생각하면 된다.
padding은 box의 경계로부터 '안쪽'에 있는 공간이다
사용법은 margin과 동일하다
padding 은 span에 적용된다.
span은 inline속성이라 높이와 너비를 가질수 없어 margin을 가질 수 없다.
border
border : box 의 경계
border은 보통 한 종류만 사용함
ex) border:2px solid black (너비, 스타일, 색깔)
border은 inline과 block 모두에 적용 됨.
Class
class는 여러개의 속성들이 공용으로 사용할 수 있는 스타일 형식이다.
class는 .속성 으로 사용한다
ex) .tomato , .btn
class는 여러 개를 가질 수 있다.
ex) span class ="btn, tomato"
inline block
block이 inlince 속성을 갖게 해준다.
즉, 옆에 둘 수 있고, width와 height를 가질 수 있다.
그렇지만 옛날방식의 코딩방식이고 깔끔하지 못하다.
ex) 모니터크기마다 다르게 나타남, 빈 공간이 생김
flex
inline block의 문제점을 해결하기 위해 flexblock을 사용
1. 자식에게 명시하지 않고 부모에게 명시한다.
자식 element를 움직이게 하려면 부모 element를 flex containetr로 만들어야 함.
2. align-items : 세로로 작용
3. justify-content : 가로로 작용 (디폴트)
flex-container가 height를 가지고 있지 않으면, align-items를 사용하더라도 위치 변경되지 않음.
vh = viewport height(스크린에 따라 비율에 맞게 적용됨)
[차이점]
100vh = The screen's height
100vw = The screen's width
100% = 100% of the PARENT
main axis, cross axis 의 기본값을 바꾸기 위해서는 flex-direction을 수정
display를 flex로 했을 때 default는 row(수평) 이다.(Justify-content: 수평 / align-items: 수직)
flex-dirction: column; 을 주면 주축과 교차축이 반전 됨. (Justify-content: 수직 / align-items: 수평)
flex-wrap: nowrap;을 통해 wrapping이 일어나지 않게 할 수 있다. (wrap : block이 겹치지 않게)
flexbox는 width값을 초기 사이즈로만 여기고, 모든 엘리먼트를 같은 줄에 있게 하기 위해 width를 바꾸기도 한다.
flex-direction: column-reverse; 밑에서 시작해서 위로 올라가게 한다.(마찬가지로 row-reverse도 있다.)
flex-wrap: wrap-reverse; 또한 있는데, 브라우저를 줄일 때, 엘리먼트가 겹쳐지는 위치가 역전된다.
flex-wrap: wrap; 부모의 넓이보다 요소들의 총 넓이가 크다면 나머지 요소들을 다음줄로 바꿈.
flex 연습 할 수 있는 게임링크 https://flexboxfroggy.com/#ko
fixed
position fixed를 이용하면 스크롤해도 항상 제자리에 머무른다.
처음 만들어진 자리에 고정되어 있는다.
그러나, top,left,right,bottom 중 하나만 수정해도 레이어에 위치가 무시된다.
position fixed를 이용하면 가장 위에 위치하게 된다(맨 앞)
position
position : static : 박스를 처음위치한 곳에 두는 것
position : fixed : 처음 위치한 자리에서 화면의 스크롤에 상관없이 고정
position : relative : 박스가 처음 위치한 곳을 기준점으로 top,bottom, left, right로 위치를 조금씩 수정 할 수 있따.
position : absolute : 가장 가까운 부모 엘리먼트에 position:relative를 추가한다.
부모 기준으로 top,bottom,left,right 이동하고, 아닐시엔 body 기준으로 이동 된다.
position의 특징 중 하나가.
적용된 요소의 크기는 내용의 크기만큼 자동으로 인지된다
pseudo selector
좀 더 세부적으로 엘리먼트를 선택 해주는 것.
pseudo selector
div:first-child{
background-color:tomato;
}
div:last-child {
background-color: teal;
}id나 class를 따로 만든느 것보다 훨씬 좋은 방법이다.
css만 건들고 html코드를 고칠 필요가 없음.
n번째 태그 수정하기 nth-child(n)
span:nth-child(2) {
background-color: teal;
}
span:nth-child(even) { //or odd ( 홀수 )
background-color: teal;
}
span:nth-child(5n + 1) {
background-color: silver;
}
n을 사용하면 매우 편함.
"~"를 사용해 바로뒤에 오는 형제 관계가 아닌 tag에도 스타일을 적용 시킬 수 있다.
tag[attribute="value"]을 통해 스타일을 적용시킬 수 있다.
tag[attribute~="value"]으로 value를 포함하는 모든 tag에 스타일을 적용시킬 수 있다.
combinations
div의 바로 밑 자식에서 span을 찾아서 그것만 효과를 주는 방법
1)
div span {
text-decoration : underline;
}이렇게하면 div밑에 있는 모든 span이 효과를 가진다
직접적인 부모가 아니어도 밑에있는 것들을 모두 css가 찾는다.
2)
div > span {
text-decoration : underline;
}이렇게 하면 바로 밑의 자식만 건드릴 수 있다.
3)
p + span {
color: black;
}"+" 를 사용하면 형제에게 영향을 끼칠 수 있다.
> 를 사용하면 direct child를 찾고, + 를 사용하면 코드상 다음 형제에만 적용~ 를 사용하면 형제와 형제 관계 꼭 바로 뒤에 올 필요 없다.States
1) active : 대상을 클릭하고 있는 상태
2) hover : 마우스가 대상 위에 있을때의 상태
3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다
4) visited : 링크에만 적용이된다 그 링크에 방문했다면 그 안에 스타일이 적용이된다
5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다
위의 예시에서 form은 그 자식들인 input이 focus가 되면 form의 모습을 바꾼다는 것이다
state들을 다른 엘리먼트와 연계해서 사용할 수도 있다
1) 부모의 state에 따라 조정
form:hover input {
background-color: slateblue;
}즉, form이 hover일경우 input의 백그라운드 컬러가 바뀌게된다
부모의 state에 따라 자식의 state를 조정할 수 있다
2) 부모와 자식의 state에 따라 조정
form:hover input:focus {
background-color: teal;
}Color
RGB 방식
이건 디자이너들이 많이쓴다
rgb(252,206,0); 이런식
rgba (205,23,0, 0.5);
4번째 숫자는 투명도를 말한다
a 즉 알파는 투명도를 말하는 것이다
Variable (custom properties)
ex)
:root{
--main-color: #19ce60;
--default-border: 1px solid var(--main-color);
}
a {
color: var(--main-color);
border: var(--default-border);
}Transitions
어떤 상태에서 다른 상태로의 변화를 보내주는 애니매이션이다
-
transtion은 state가 없는 요소에 붙어야한다
처음 생긴곳에 있어야한다 -
transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것이다
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: all 1s ease-in-out;
}
a:hover {
border-radius: 20px;
color: tomato;
background-color: wheat;
}
</style>[참고] transition ease-in function 요소 테스트 사이트
https://matthewlein.com/tools/ceaser
transition 은 상태에 따라 바뀌는 요소가 있을 때 사용.
ex) hover, active, focus
ease-in function
ㄴlinear - 변화 그래프가 직선
ㄴease-in - 시작과 끝이 빠름
ㄴease-out - 시작과 끝이 느림
ㄴease-in-out - 시작이 빠르고 끝이 느림
all : 변화 요소를 한번에 다룬다.
ㄴ따로 다루고 싶으면 각각 써주면 됨
cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.
Transform
→ transformation은 한 요소를 transform(변형)시킬 수 있다.
→ translate는 transformation을 적용시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다.
→ transformation은 box element를 변형시키지 않는다.
→ margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.
→ margin, padding을 위해서 translateX, translateY를 사용하지 않는다.
[참고] transform function 요소 테스트 사이트
https://developer.mozilla.org/en-KR/docs/Web/CSS/transform
Transform 사용법
<style>
img {
border: 1px solid black;
border-radius: 50%;
transition: transform 2s ease-in-out;
}
img:hover {
transform: rotateY(360deg) scale(0.5);
}
</style>Animation
애니메이션 만들기
@keyframes superSexyCoinFlip {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg) translateX(100px);
}
}
img {
border: 1px solid black;
border-radius: 50%;
animation: superSexyCoinFlip 5s ease-in-out infinite;
}무한으로 반복되게 하려면 뒤에 infinite를 붙여준다.
Animation Sample Site (https://animista.net/)
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
@keyframes superSexyCoinFlip {
0% {
transform: rotateY(0);
}
25% {
transform: scale(2);
border-radius: 0px;
}
50% {
border-radius: 0px;
transform: rotateY(180deg) translateY(100px);
border-color: tomato;
opacity: 0;
}
75% {
transform: scale(5);
border-radius: 20px;
}
100% {
transform: rotateY(0);
}
}
img {
border: 1px solid black;
border-radius: 50%;
width: 200px;
animation: superSexyCoinFlip 5s ease-in-out infinite;
}
</style>- CSS의 keyframes 애니메이션으로 splash 애니메이션을 줄 수는 있지만, 완벽하게 없어진 상태를 만들 수는 없다. 때문에 JavaScript가 필요하다. 그러나 hidden으로 숨길 수는 있다. f12로 inspector 들어가면 다 보임
ex)
@keyframes hideSplashScreen {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}- 애니메이션의 마지막 값을 기억하고 싶다면 forwards라는 단어를 사용해야한다. → 마지막 keyframes를 기억한다.
- animation-delay로 약간 지연 시킬 수 있다.
#splash-screen {
background-color: var(--yellow);
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 132px;
animation: hideSplashScreen 0.4s ease-in-out forwards;
animation-delay: 1s;
}Media Queries
- Media query는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.(웹사이트를 보고 있는 사용자의 스크린 사이즈)
- @media screen and (max-width: 00px) {} 을 이용하여 몇 픽셀부터는 달라보이도록 만들 수 있다. 이를 통해 스크린의 사이즈를 알 수 있다.
- min 사이즈와 max사이즈를 조절하여 단계별로 만들면, 스크린 사이즈의 범위를 알 수 있다.
- @media screen and (min-width: npx) and (max-width:npx) and (orientation : landscape (가로모드) 혹은 portrait(세로모드)) => 스크린 사이즈에 따라서 property 조정 가능함. orientation으로 가로 세로 감지 가능
Z-index
z-index
default: 0
숫자가 작을수록 낮은 layer, 클수록 위의 layer
fixed, absolute position에 이용 가능.
- 포토샵의 Layer 를 생각하면 된다.
팁
같은 요소가 반복 될 때, 간단한 수정을 할땐
class를 하나 더 추가해서 css파일에 입력한다.
message-row는 좌측으로 정렬되어 있지만 message-row--own 를 우측으로 정렬하고 싶을 때
ex)
.message-row {
width: 100%;
display: flex;
margin-bottom: 25px;
}
.message-row--own {
justify-content: flex-end;
}flex children 에는 order 기능이 있고
display 방식을 바꿀 수 있따.
order:0 / order:1 이처럼 순서를 정해주는 방식이다.
flex children이 많아지면 코드를 많이 써야하니
flex-direction: row-reverse를 이용해 좌 우 반전도 가능하다.
ex)
.message-row--own .message__info {
flex-direction: row-reverse;
}위에서 .message__info 클래스는 display: flex가 선언 되어 있기 때문에 사용이 가능하다.
will-change
- will-change는 애니메이션이 좀 더 부드럽게 동작할 수 있게 한다
- 브라우저에게 어떤 것이 변할 것인지 예고해주는 것
- will-change는 그래픽카드를 이용해서 애니메이션을 가속화 함.
