HTML & CSS (2)

---

position 속성

형식 : position: ~~;

1. fixed

• 스크롤을 움직여도 element가 고정된다.
• 레이어를 부수고 다른 레이어에 위치해 있는다.
• 모든 것의 위에 있음 (덮어 씌움)

2. static

• position속성의 default값
• 레이아웃이 박스를 처음 위치하는 곳에 두는 것

3. relative

• element가 처음 위치한 곳을 기준으로 위치를 수정
• top, bottom, left, right 속성과 사용
• 조금씩만 element를 옮기고 싶을 때 사용

4. absolute

• 가장 가까운 relative 부모를 기준으로 이동 (body는 기본적으로 relative)
• absolute의 부모를 relative로 만들면 그 element기준으로 위치가 옮겨짐
• top, bottom, left, right 속성과 사용
  
  

Pseudo Selectors

• 좀 더 세부적으로 엘리먼트를 선택해 주는 것
• id나 class를 따로 만드는 것 보다 훨씬 좋은 방법임 -> css에서만 선택을 하면 되기 때문에 (html코드 고칠 필요 x)

ex1)

	div:first-child {	}
	div:last-child {	}
	span:nth-child(n) { 	}

• first, last-child는 list에 있는 div중 첫 번째에 있는 div와 마지막에 있는 div를 의미한다.
• n 자리에 일반항을 넣을 수 있다
• 2n+1, Odd -> 홀수, 2n, Even -> 짝수
  
  

ex2)

p span {	
	color : teal;
	}

• p부모에 있는 자식 span의 color를 teal로 바꾼다 (부모와 자식 관계)
• 부모 안에 있는 자식에만 css 적용하기
• combinator
  1. p > span : direct children에게만 적용 가능 (부모와 바로 밑 자식의 관계)
  2. p + span : p 바로 다음으로 오는 span (형제와 바로 뒤에 오는 형제의 관계)
  3. p ~ span : 다음은 다음인데 바로 다음 으로 오지는 않을 때 사용 (형제와 형제 관계)
  

• Attribute Selector

input[placeholder~=“name”]{
	backgorund-color : pink;
    }

placeholder에 "name"을 포함한 모든 input을 지정하여 배경색을 pink로 바꾼다

1) ~= : ~를 포함
2) $= : ~로 끝나는 (접미사)
3) ^= : 앞에 ~인 (접두사)

• Pseudo element
  1) ::placeholder : place holder 만을 꾸밀 때 사용
  2) ::selection : 영역을 선택(드래그) 했을 때 적용
  3) ::first-letter : 첫 글자에만 적용
  4):: first-line : 첫 라인에만 적용
  
  

State

1. :Active : 버튼을 누르고 있을 때
2. :Hover : 커서가 올라가 있을 때
3. :Focus : 키보드로 선택되었을 때
4. :visited(링크에만 적용) : 링크를 방문(클릭)했을 때 상태 변경
5. Focus-within : 자식 엘리먼트 중 어느 하나가 focused 되면 부모 변경
   
   

Color and Variables

컬러 적용 방법에는 3가지가 있다.
1) hexadecimal color (16진수 컬러) : color = #FCCE00;
2) rgb : color = rgb(252, 206, 0);
3) rgba(a는 투명도(opacity)) : rgba(252, 206, 0, 0.8);
+color picker라는 chrome extension으로 색상 따올 수 있음


Variables 예시

:root {
	—main-color : #fcce00;
}

p {
	background-color : var(—main-color);
}

• root는 기본적으로 모든 document의 뿌리가 되는 것이다.
• —를 써주고 변수이름쓰기, 빈 공간이 있을 경우 - 로 채운다
• 변수에는 color말고도 border등 다양하게 지정 가능
  
  

---

Advanced CSS

Transition

• 어떤 상태에서 다른 상태로의 "변화"를 애니메이션(서서히 변함)으로 만드는 방법
• tradition: background-color 10s ease-in-out;
• transition이 element의 상태를 찾고 그 변화를 애니메이션으로 바꿈
• transition: all; 이라고 할 경우 변화하는 모든 것에 transition을 준다.(대부분의 경우 all 사용)
• transition할 옵션들은 엘리먼트 뿐아니라 상태에도 꼭 있어야 한다. (둘 다 있어야 함)
• transition은 상태에 있는게 아니라 엘리먼트 쪽에 있어야 한다.
  -> 상태에 줄 경우 그 상태에 있을 때만 transition이 적용되기 때문 상태에서 풀려날 경우 다시 원상태로 즉각 돌아감

참고) CSS animation tool
https://matthewlein.com/tools/ceaser

• Ease-in, ease-out, linear 등등 차이 확인해보기!
• 애니메이션에서 default로 가지고 있는건 linear, ease-in, ease-out, ease
• Equivalent cubic-bezier : 나만의 커브(애니메이션)를 만들 수 있게 해줌 -> 사이트 아래에 있는 코드 복사
  
  

Transformation

• 말 그대로 한 요소를 변형시킴
• 형식 : Transform: ~;
• rotate, scale, skew, translate등등 다양한 옵션이 있음
• transformation은 다른 box element를 변형시키지 않는다 (형제 엘리먼트는 그대로)(inline이어도 그대로임) -> 3D transformation이기 때문 (box 차원이 아님)
  
  

Animation

@keyframes animationName {
	from{
		transform: rotateX(0);
	}
	to{
		transform: rotateX(360deg);
	}
}

/* 적용 */

Img{
	border: 10px solid black;
	animation: animationName 5s ease-in-out;
}

-> 마우스의 움직임 없이 애니메이션이 일어나는게 특징!

다른옵션

@keyframes animationName {
	0% {
		transform: rotateY(0);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(0);
	}
}

-> 단계별로 지정하기, 중간에 70%, 75% 등등 알아서 지정하면 된다.

Media Query

• 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법으로 조건을 활용한다.

@media screen and (min-width:600px) and (max-width: 1200px) {
	div {
		background-color: wheat;
	}
}

-> 스크린의 크기가 600 초과 1200 미만일 경우 배경색을 바꾼다

• 모바일 환경의 경우 orientation: landscape나 orientation: portrait를 통해 가로 세로 화면에 대한 조건을 줄 수 있다.
• screen 대신 print를 써서 인쇄환경에서의 디자인을 바꿀 수도 있다.