기억보다 기록을

[Html/Css] 고급 정리 (SASS)

 

 

 

Pseudo

* pseudo class - (:) 다른 상태일 때 

* pseudo element - (::)내부의 일부분만 스타일을 줄 때

.text::first-letter {
  color : red;
}

.text::first-line {
  color : red;
}

.text::after {
  content : '뻥이지롱';
  color : red;
}

.text::before {
  content : '뻥이지롱';
  color : red;
}

first-letter: 앞 글자

first-line: 첫 문장

after: 뒤에 추가

before: 앞에 추가

 

.box::after {
  content : '';
  display : block;
  clear : both;
}

float 속성 사용시 clear: both; 속성 주기

 

 

 

shadow DOM

F12(개발자 도구) - 설정 - Show user agent shadow DOM 클릭

 

보려는 태그의 pseudo 속성값을 보면 해당 위치를 수정가능하다.

input::-webkit-input-placeholder {
  color : red; 
}

크롬: -webkit-

파이어폭스: -moz-

익스플로러: -ms-

 

* user agent stylesheet = 브라우저 기본 스타일같은 거

 - 기본 스타일은 apperance: none; 등을 사용해야 기본 스타일 적용을 해제 할 수 있다.

 

 

 

사이트 발행

1. github

아이디 / 아이디.github.io

Repository name 부분을 해당 형식으로 지정한다.

 

 

2. 일반 호스팅

cafe24.com 에서 웹 호스팅을 사고 FTP 프로그램(ex.Filezilla)을 이용해서 파일관리.

 

 

 

SCSS, SASS

css에 변수, 함수, import, 상속 등의 기능을 사용할 수 있게 만든 것.

$main-color: #2a4cb2; /* 변수 */
$sub-color: #eeeeee;

.box{
	font-color: $main-color; /* 변수 사용 */
}

- 자주 사용하는 색을 변수로 사용

 

$basic-size: 16px;

.background{
    font-size: ($basic-size - 2px);
}

- 사칙 연산도 가능하다.

 

 

* CSS에서 변수와 사칙연산 사용하기

:root{
  --main-color: red;
}

.background {
  background-color: var(--main-color);
  font-size: calc(16px - 2px);
}

 

 

 

 

* SCSS, SASS 차이

- SCSS

.background {
    color: red;
}

 

- SASS

.background
    color: red

 

 

* Nesting

- Nesting 전

.main-bg{
    width: 100px;
}

.main-bg h4{
    font-size: 16px;
}

.main-bg button{
    color: red;
}

 

- Nesting 후

.main-bg{
    width: 100px;
    h4{
        font-size: 16px;
    }
    button{
        color: red;
    }
}

 

 

 

* @extend

%btn{
    width: 100px;
    height: 100px;
    padding: 20px;
}

.btn-green{
    @extend %btn;
    color: green;
}

.btn-red{
    @extend %btn;
    color: red;
}

.btn-blue{
    @extend %btn;
    color: blue;
}

- %는 .대신 쓸 수 있는 임시 클래스를 의미한다. 아무것도 없는 css에 %를 쓴 임시클래스는 클래스로 컴파일 하고 싶지 않을 때 쓰는 기호이다. (% 대신 .도 사용 가능)

 

 

 

* @mixin

@mixin mixinEx($param, $param2) { /* 파라미터 받음 */
    font-size: $param; /* 파라미터 사용 */
    #{ $param2 }: -1px; /* 속성 부분은 #{} 으로 한번 더 감싸야 한다. */
}

h2{
    @include mixinEx(40px, letter-spacing); /* @mixin 적용 */    
}

h3{
    @include mixinEx(30px, width) /* @mixin 적용 */
}

h4{
    font-size: 10px;
    letter-spacing: -1px;
}

 

 

 

* @use

- reset.scss

body{
    margin: 0;    
}

div{
    box-sizing: border-box;
}

$main-color: brown;

 

- main.scss

@use 'reset'; /* 해당 경로의 파일 이름 */

*** @use나 @import 같은 경우는 항상 맨 위에 적용한다.

- 해당 파일 같은 경우는 css 파일을 컴파일 할 필요가 없기 때문에 _reset.scss 형식으로 앞에 '_'를 붙여서 생성한다. '_'를 붙인 경우는 css 파일을 만들지 않는다.

 

@use 'reset';

h2{    
    color: reset.$main-color; /* scss 파일의 변수를 사용 */
}

- @use로 가져온 scss 파일의 $나 @mixin을 사용하기 위해서는 위처럼 그 파일 명을 꼭 앞에 붙여야 한다.

 

 

 

Video, Audio

<video controls autoplay muted loop poster="썸네일경로" preload="metadata">
  <source src="비디오파일경로">
</video>

• controls: 재생 버튼이 생김
• autoplay: 자동 재생 (chorm에선 muted와 함께 써야 함)
• muted: 음소거
• loop: 반복재생
• poster: 썸네일 이미지 생성
• preload: 미리 다운 받을지 정함. (auto, metadata, none)

 

* 비디오 배경 가운데 정렬

.video-box {
  height: 500px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.video-container {
  position: absolute;
  width : 100%;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
  z-index: 0;
}

 

 

자식 요소를 position absolute, top, left, transform 속성을 주면 position relative를 가진 부모 요소의 정 가운데에 위치 시킬 수 있다.

 

 

 

 

transform & animation

.box {
  transform : rotate(10deg); /* 회전 */
  transform : translate(10px, 20px); /* 좌표이동 */
  transform : scale(2); /* 확대축소 */
  transform : skew(30deg); /* 비틀기 */
  
  /*transform 두개 이상을 한꺼번에 쓰려면*/
  transform : rotate(10deg) translateX(30px);
}

 

* transition과의 차이

- transition은 시작스타일, 최종스타일, 트리거, transition을 변경하면 a -> b 형태로 변환이 가능하다. 하지만 추가적으로 a -> b -> c 등 이나 정지, 복잡한 움직임 등은 하지 못함. (@keyframes 사용해야 함)

 

 

@keyframes

@keyframes moveTo{
  0% {
    transform : translateX(0px); /* 애니메이션이 0%만큼 동작시 */
  }
  50% {
    transform : translateX(-20px); /* 애니메이션이 50%만큼 동작시 */
  }
  100% {
    transform : translateX(20px); /* 애니메이션이 100%만큼 동작시 */
  }
}

- 애니메이션을 정의하기 위한 공간이다.

 

.box:hover {
  animation-name : moveTo; /* 애니메이션 이름 (만든 keyframes) */
  animation-duration : 1s; /* 애니메이션 동작시간 */
  animation-timing-function : linear; /*베지어 주기*/
  animation-delay : 1s; /*시작 전 딜레이*/
  animation-iteration-count : 3; /*몇회 반복할것인가*/
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
}

 

 

* transform을 쓰는 이유

 - browser에는 RenderTree부터 layout, paint, composite 등의 작업을 순서대로 하면서 화면을 만들어 나가는데, margin이나 width 등은 layout 단계에서 수정이 일어나게 되어 layout부터 composite까지의 작업이 다시 일어나야 하지만 transform은 composite 단계에서 작업이 일어나기 때문에 상대적으로 성능부분에서 이득이 있다.

 

 

* css 성능 향상

 

- will-change

.box {
  will-change: transform;
}

바뀔 내용을 미리 렌더링한다. 애니메이션을 주는 스타일이 느리게 동작한다면 사용한다. 성능이 안나올 때만 사용하자.

 

 

- 하드웨어 가속

.box {
  transform: translate3d(0, 0, 0); /* 3D 이동을 하여 GPU 사용하여 연산 */
}

3D 이동을 하는데 값을 0,0,0을 주었기 때문에 움직이지 않는 이동명령을 내린 뒤, 추가적으로 필요한 transform을 적용하면 GPU를 통해서 transform 속성을 연산할 수 있다.

 

 

 

CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 격자 열 (fr은 배수) */
  grid-template-rows: 100px 100px 100px; /* 격자 행 */
  grid-gap: 10px;
}

 

 

* 레이아웃 만드는 법

 

1. 자식 높이와 폭 조정

<div class="grid-container">
    <div class="grid-nav"></div>
    <div class="grid-sidebar"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.grid-nav {
  grid-column : 1 / 4; /* 열의 1번 째 선부터 4번째 선까지 병합 */
  grid-row : 2 / 4; /* 행의 2번 째 선부터 4번째 선까지 병합 */
}

- grid-column: 열의 시작 선 / 열의 끝 선

- grid-row: 행의 시작 선 / 행의 끝 선

 

 

2. 자식 이름으로 부모가 배치

<div class="grid-container">
    <div class="grid-nav">헤더</div>
    <div class="grid-sidebar">사이드바</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.grid-nav {
  grid-area: 헤더;
}

.grid-sidebar {
  grid-area: 사이드;
}

- grid-area: 자식 태그의 이름 지정할 수 있음.

 

 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-areas: 
    "헤더 헤더 헤더 헤더"
    "사이드 사이드 . ."
    "사이드 사이드 . ."
}

grid-template-areas 속성으로 지정한 모양대로 grid를 나눌 수 있음

 

 

 

position sticky

<body style="background : grey; height : 3000px">

<div class="grey">
  <div class="image">
    <img src="appletv.jpg" width="100%">
  </div>

  <div style="clear : both"></div>
  <div class="text">Meet the first Triple Camera System</div>
    
</div>

</body>

.grey {
  background: lightgrey;
  height: 2000px;
  margin-top: 500px;
}
.text {
  float: left;
  width : 300px;
}
.image {
  float: right;
  width : 400px;
  position: sticky;
  top: 100px;
}

position: sticky; 는 스크롤할 만큼의 크기에 부모 박스가 있어야하고 top을 꼭 지정해 주어야 한다.

 

 

 

3D 애니메이션

transform : rotateX(180deg); /* 가로를 대칭으로 회전 */
transform : rotateY(180deg); /* 세로를 대칭으로 회전 */
transform : rotateZ(180deg); /* 모니터와 사용자간을 대칭으로 회전 */

transform-style: preserve-3d; /* 3d 사물처럼 동작하기 위해 줌 */
backface-visibility: hidden; /* 뒷면의 그림자(앞면의 대칭) 안보이게 처리 */