[code review]

kirin.log·2020년 11월 17일

🐠 :root

css에 :root 를 선언하고 변수를 정의하여 어느 곳에서나 사용할 수 있게 한다.
(해당 부분의 스타일을 일괄 관리하는 가상요소)

css

/* Color */
    --color-white: #ffffff;
    --color-light-white: #eeeeee;
    --color-pink: #ffe2e2;
/* Font size */
    --font-large: 48px;
    --font-medium: 28px;
    --font-regular: 18px;
/* Font weight */
    --weight-bold: 700;
    --weight-semi-bold: 600;
    --weight-regular: 400;

html

  h1 {
    font-size: var(--font-large);
    font-weight: var(--weight-bold);
    color: var(--color-white);
  }

🐠 cursor 속성

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.

auto: 자동
default: 기본값 (화살표)
pointer: 손가락 모양 (클릭 가능한 버튼)
wait: 로딩
move: 십자가
text: I 모양
help: 물음표
<button style="cursor:pointer"> Click </button>

🐠 vh/vw

css의 값으로 지정할 수 있는 viewport 단위.

🐳 CSS Viewport를 기준으로 한 단위(4가지)

vh, vw, vmin, vmax

Viewport Height (vh) : viewport의 높이에 근거.
1vh = viewport의 높이의 1%
/* vh를 사용하는 예시 */
.container {
    background: beige;
    height: 100vh;
}
/* viewport(화면이 보이는 부분)의 높이(height)를 100% 사용한다는 뜻.  
   부모와 상관 없이 보이는 viewport의 100%를 사용할때 사용 */



/*  %를 사용하는 예시 */
body, html {
    height: 100%;
}
.container {
    background: beige;
    height: 100%;
}
/* container가 들어있는 부모의 height을 기준으로, 높이를 100% 사용한다는 뜻.
   따라서 부모 태그(body, html)의 height을 100%로 지정 후 
   container의 height을 100%로 지정해주어야 화면의 100%를 덮을 수 있다 */
Viewport Width (vw) : viewport의 너비에 근거.
1vw = viewport의 넓이의 1%

Viewport Minimum (vmin) : viewport의 (높이와 너비 중) 작은 쪽의 치수에 기초로 함.
viewport의 높이가 폭보다 작은 경우, 1vmin는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 작은 경우, 1vmin는 viewport의 넓이의 1%와 같다

Viewport Maximum (vmax) : viewport의 (높이와 너비 중) 큰 쪽의 치수에 기초로 함.
viewport의 높이가 폭보다 큰 경우, 1vmax는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 큰 경우, 1vmax는 viewport의 넓이의 1%와 같다

예시)
viewport의 폭이 1200px, 높이가 1000px의 경우 10vw는 120px, 10vh는 100px이된다. 이 viewport는 폭이 높이보다 더 크기 때문에 10vmax는 120px, 10vmin는 100px이된다
이 장치의 방향이 바뀌어 viewport의 폭이 1000px 높이가 1200px되면 10vh는 120px, 10vw는 100px이된다. 흥미롭게도, 10vmax는 큰 쪽의 viewport의 값에 따라 결정되므로 120px 상태이다. 마찬가지로 10vmin도 100px로 그대로이다.
브라우저 창의 크기를 변경하여 viewport의 넓이를 1000px 높이를 800px하면 10vh는 80px, 10vw는 100px이된다. 마찬가지로 10vmax는 100px, 10vmin은 80px된다.
이 시점에서는 Viewport 단위는 % 지정 것처럼 보일지 모르지만, Viewport 단위와 % 사이에 큰 차이가 있다. % 지정 되어있다면 자식 요소의 폭과 높이는 부모 요소의 폭과 높이에 결정된다.
.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}
참고SITE: https://taimouse.tistory.com/8

🐠 icon 다운받기

https://fontawesome.com/
fontawesome 사이트에서 코드 전달받은 뒤(이메일 인증), 원하는 아이콘 다운받아서 코드삽입하기

(1) icon을 다운받은 뒤, 가상선택자(.btn)를 활용하기

ex)
.btn(class) 버튼의 텍스트 앞에 원하는 아이콘(예를들어, f6be)을 넣으려면

.btn {
	padding:10px;
    }
.btn:before {
    font-family:"FontAwesome5Free";   /* 무조건 이렇게 쓰기 */
    font-weight:900;   /* solid 타입은 fontweight:900, regular 타입은 fontweight:400, light타입은 fontweight:300 으로 한다 */
    font-size: 24px;   /* 아이콘이라해도 font-size로 크기 조절하기 */
    content:"\f35a";
    }

(2) icon의 주소(< i class="#####">)를 활용하기

 <nav>
    <div class="navbar_logo">
          <i class="fas fa-cat"></i>
          <a href="">kirin page</a>
    </div>
    <ul class="navbar_sns">
          <i class="fab fa-instagram-square"></i>
          <i class="fab fa-facebook-square"></i>
    </ul>
 </nav>

🐠 linear-gradient()

linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다.

함수의 결과는 < image>의 특별한 종류인 < gradient> 자료형이다.
background: linear-gradient(#e66465, #9198e5);
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

---css---
/* 
45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */
linear-gradient(45deg, blue, red);
/* 
우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */
linear-gradient(to left top, blue, red);
/* 
색상 정지점: 아래에서 위로, 파랑에서 시작해 길이의 40%에서 초록으로,
            빨강 종료 그레이디언트 */
linear-gradient(0deg, blue, green 40%, red);
/* 
색상 힌트: 왼쪽에서 오른쪽으로, 빨강에서 시작해 길이의 10% 지점에서 중간 색상으로, 
          나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */
linear-gradient(.25turn, red, 10%, blue);
/* 
다중 위치 색상 정지점: 45도 기울어진, 좌하단 절반 빨강, 우상단 파랑 절반에
                    두 색이 만나는 지점을 정확히 나누는 그레이디언트 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

참고SITE: https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient()

🐠 opacity

(css) 요소를 투명하게 만드는 속성

opacity로 요소의 투명도 정하기

기본값: 1
상속: no
애니매이션: yes
문법:

opacity:number   /* 0.0부터 1.0까지의 수 넣기 */
opacity:initial  /* 기본값으로 설정하기 */
opacity:inherit  /* 부모 요소의 속성값을 상속받기 */

예제

      .a {
        width: 600px;
        background-color: black;
      }
      .b {
        position: fixed;
        top: 100px;
        left: 100px;
        width: 600px;
        background-color: orange;
        opacity: 0.7;
      }

🐠 스크롤 기능(css)

(1)페이지 제일 위로 이동
<a href="#"> 제일 위로 </a>
사용자가 이 링크를 클릭하면 현재 위치가 어디든 상관없이 해당 페이지의 제일 위쪽으로 이동한다.

(2)스크롤 부드럽게 이동
scroll-behavior: smooth
(단, IE에서는 지원되지 않는 속성)

🐠 user-select(css)

사용자가 텍스트를 선택할 수 있는지 지정하는 기능.


<p>You can select this text.</p>
<p class="unselectable">you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
/* css */

.unselectable {
  user-select: none;
}
/*
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
*/

.all {
  user-select: all;
}
/*
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
*/
(user-select) >> text를 드래그하는 범위만큼 select 가능 / 기본 속성이므로 따로 지정 안해줌

user-select:none >> text를 드래그해도 select되지 않음

user-select:all >> text를 한번 클릭하면 전체가 select됨