inhwa.log

[CSS] transform

Tue, 21 Mar 2023 08:37:49 GMT

transform

transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다.
transform은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 transition이나 animation과 함께 사용한다.

2D Transform

transform function	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소시킨다	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다	0과 양수
skew(x-angle, y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다	+/- 각도(deg)

3D Transform

transform function	설명	단위
translate(x,y,z)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼, Z축으로 z만큼 이동시킨다	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다	px, %, em 등
translateZ(n)	요소의 위치를 Z축으로 z만큼 이동시킨다	px, %, em 등
scale3d(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대 또는 축소 시킨다	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다	0과 양수
scaleZ(n)	요소의 크기를 Z축으로 z배 확대 또는 축소 시킨다	0과 양수
rotate3d(x,y,z)	요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다	+/- 각도(deg)
rotateX(n)	요소를 X축으로 x각도 회전시킨다	+/- 각도(deg)
rotateY(n)	요소를 Y축으로 y각도 회전시킨다	+/- 각도(deg)
rotateZ(n)	요소를 Z축으로 z각도 회전시킨다	+/- 각도(deg)

[CSS] animation

Tue, 21 Mar 2023 07:23:26 GMT

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state ;
transition이 자동발동(self-invoking transition) 하도록 하고 싶다면 CSS animation을 사용한다.
animation효과는 HTML 요소에 적용되는 스타일을 다른 스타일로 부드럽게 변화시킨다.
애니메이션을 나타내는 스타일과 애니메이션의 sequance를 나타내는 복수의 ( @keyframes )들로 이루어진다.
비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다.
세밀한 제어를 위해서는 Javascript 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 Javascript가 훨씬 유용하다.
여러 사항들을 고려하여 Javacript를 사용할지 CSS를 사용할지 결정하여야 한다.

프로퍼티	설명	기본값
animation-name	@keyframes 애니메이션 이름을 지정한다
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다	ease
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
animation-iteration-count	애니메이션 재생 횟수를 지정한다	1
animation-direction	애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다	normal
animation-fill-mode	애니메이션 미실행 시( 종료 또는 대기 )요소의 스타일을 지정한다
animation-play-state	애니메이션 재생 상태( 재생 또는 중지 )를 지정한다	running
animation	모든 애니메이션 프로퍼티를 한번에 지정한다 ( shorthand syntax )

@keyframes

애니메이션의 흐름 중의 여러 시점에서 CSS 프로퍼티값을 지정할 수 있다.

div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    /* @keyframes rule */
    @keyframes move {
      /* keyframe */
      from {
        left: 0;
      }
      /* keyframe */
      to {
        left: 300px;
      }
    }

from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의하였다.
```
@keyframes move {
0%   { left: 0; }
50%  { left: 100px; }
100% { left: 300px; }
}
```
from, to 키워드 대신 %(퍼센트)를 사용할 수도 있다. 시작과 끝 키프레임 사이에 %단위로 키프레임을 삽입할 수 있다.

animation-name

애니메이션을 대표하는 임의의 이름을 부여한다.
@keyframes move {}

animation-duration

한 사이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s로 인해 어떠한 애니메이션도 실행되지 않는다.
animation-duration: .5s; 또는 animation-duration: 500ms;

animation-timing-function

애니메이션 효과를 위한 수치 함수를 지정한다. transition-timing-fucntion을 참조한다.

animation-delay

요소가 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
animation-delay: 2s;

animation-iteration-count

애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복 할 수 있다.
animation-iteration-count: 3; 또는 animation-iteration-count: infinite;

animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.

프로퍼티값	설명
normal	기본값으로 from(0%)에서 to(100%)방향으로 진행한다
reverse	to에서 from방향으로 역진행한다
alternate	홀수번째는 normal로, 짝수번째는 reverse로 진행한다
alternate-reverse	홀수번째는 reverse로, 짝수번째는 normal로 진행한다

animation-fill-mode

애니메이션 미실행 시(대기 또는 종료)요소의 스타일을 지정한다.

프로퍼티값	상태	설명
none	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다
forwards	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다
backwards	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다
both	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다

animation-play-state

애니메이션 재생 상태를 지정한다. 기본값은 running이다

running 또는 paused

예제

Text animation


      
        
          
            The 1st
            Text effect
          
        
      

      
        
        
        
          
            The 2nd
            Text effect

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;800&display=swap');

    * {
      padding: 0;
      margin: 0;
    }

    body {
      display: flex;
      height: 100vh;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    section {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 1800px;
    }

    /* Common */

    .effect {
      margin: 40px;
    }

    span {
      display: block;
      font-size: calc(1.5rem + 0.5vw);
    }

    span:first-child {
      font-family: 'Montserrat Light', sans-serif;
    }

    span:last-child {
      font-family: 'Montserrat ExtraBold', sans-serif;
    }

    /* Text effect1 */
    .text-effect1 p {
      border-left: 4px solid #000;
      padding-left: 20px;
      transform: scaleY(0);
      animation: scaleUpBorder 1s forwards cubic-bezier(0.85, 0, 0.15, 1);
      overflow: hidden;
    }

    @keyframes scaleUpBorder {
      to {
        transform: scaleY(1);
      }
    }

    .text-effect1 .text-wrapper {
      transform: translateX(calc(-100% - 20px));
      animation: slideTextRight 1s 0.5s forwards cubic-bezier(0.85, 0, 0.15, 1);
    }

    @keyframes slideTextRight {
      to {
        transform: translateX(0%);
      }
    }

    /* Text effect2 */
    .text-effect2 {
      position: relative;
    }

    .text-effect2 .top-bottom-borders {
      position: absolute;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      inset: 0;
      transform: scaleX(0);
      animation: scaleUpHorizontally 1s forwards cubic-bezier(0.85, 0, 0.15, 1);
    }

    .text-effect2 .right-left-borders {
      position: absolute;
      border-right: 2px solid #000;
      border-left: 2px solid #000;
      inset: 0;
      transform: scaleY(0);
      animation: scaleUpVertically 1s forwards cubic-bezier(0.85, 0, 0.15, 1);
    }

    .text-effect2 .text-wrapper {
      overflow: hidden;
    }

    .text-effect2 p {
      text-align: center;
      padding: 20px;
      transform: translateY(100%);
      animation: slideTextUp 1s 0.1s forwards cubic-bezier(0.85, 0, 0.15, 1);
    }

    @keyframes slideTextUp {
      to {
        transform: translateY(0%);
      }
    }

    @keyframes scaleUpVertically {
      to {
        transform: scaleY(1);
      }
    }

    @keyframes scaleUpHorizontally {
      to {
        transform: scaleX(1);
      }
    }

[CSS] transition

Tue, 21 Mar 2023 06:08:47 GMT

transition

transition : property duration timing-function delay ;
CSS 속성값이 변화할때, 속성값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다
transition은 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다.
transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자 또는 Javascript의 부수적인 액션에 의해 발동한다.
transition property

프로퍼티	설명	기본값
transition-property	트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다	all
transition-duration	트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition-timing-function	트랜지션 효과를 위한 수치 함수를 지정한다	ease
transition-delay	프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다 `transition : ( property , duration , timing-function , delay )`
```css
div {
transition-property: width, opacity;
transition-duration: 2s, 4s;
}
```
```css
div {
/* shorthand syntax */
transition: width 2s, opacity 4s;
}
```
## transition-timing-function
프로퍼티값	효과
: -------	:------
ease	기본값. 느리게 시작하여 점점 빨라졌다가 느려지면서 종료한다.
linear	시작부터 종료까지 등속 운동을 한다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동을 한다.
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.

예제

1. 이미지에 hover시 크기가 커지는 효과


  
    
      
    
    매점 팝콘 무료쿠폰
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa, amet!

* {
  margin: 0;
  padding: 0;
}

.con-wrap {
  width: 500px;
  margin: 100px auto;
}

.con-wrap:hover img {
  transform: scale(1.2);
}

.img-wrap {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.img-wrap img {
  width: 100%;
  transition: 0.5s;
}

h3 {
  margin-top: 10px;
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin-top: 7px;
  font-size: 0.8em;
  font-weight: 100;
  line-height: 1.2;

}

어떤 요소,상황에 transition을 적용시키는가

자연스럽게 둘다 적용시 직접적인 엘리먼트에 ransition넣기
마우스만 올렸을때 적용시 hover 이벤트에 ransition넣기

overflow : 부모 바깥으로 넘치는 자식을 관리해준다. 속성값 중 hidden은 넘치는 자식을 잘라주는 역할을 한다. 항상 부모에게 넣어주는 속성이다.

2. hover시 색상이 채워지는 더보기 버튼


  
    
    더 보기 →

* {
  margin: 0;
  padding: 0;
}

.btn-wrap {
  width: 300px;
  height: 100px;
  border: 3px solid #50D994;
  border-radius: 10px;
  margin: 100px auto;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.btn-wrap:hover .gage{
  width: 100%;
}

.btn-wrap h3 {
  color: #494949;
  position: relative;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
}

.btn-wrap:hover h3 {
  color: #fff;
}

.gage {
  width: 0%;
  height: 100%;
  background-color: #50D994;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
}

[Vue] Vue 컴포넌트

Wed, 15 Mar 2023 08:32:52 GMT

컴포넌트

기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화한다
View, Data, Code의 세트 (컴포넌트 안에는 HTML코드, 코드를 실행하기 위한 Javascript코드, 데이터가 존재한다)
경우에 따라 특별한 is 속성으로 확장
'UI 덩어리'라고 생각하기 (ex_ 헤더영역: 메뉴, 검색 기능들이 각 컴포넌트로 구성)

전역 등록

전역 컴포넌트를 등록하려면,Vue.component(tagName, options) 를 사용한다

지역 등록

모든 컴포넌트를 전역으로 등록할 필요는 없다

컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/ 컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다

data는 함수로 작성하기

data: function () {
return {
  ...
}
}

Props

컴포넌트에 전달할 수 있는 데이터를 정의할 수 있다
props 프로퍼티는 배열 또는 객체를 값으로 가진다
부모는 props를 통해 자식에게 데이터를 전달한다
camelCase vs kebab-case
Html 속성은 camelCase
javascript 속성은 kebab-case

컴포넌트 작성

Vue.js에서 부모-자식 컴포넌트 관계는 'props는 아래로, events는 위로'라고 요약할 수 있다
부모는 props를 통해 자식에게 데이터를 전달한다

자식은 events를 통해 부모에게 메시지를 보낸다

[Vue] 폼 입력 바인딩

Wed, 15 Mar 2023 05:15:18 GMT

폼 입력 바인딩

기본 사용법

v-model 디렉티브를 사용하여 입력 폼 input과 textarea 엘리먼트를 양방향 데이터로 바인딩할 수 있다.
v-model은 내부적으로 서로 다른 속성과 서로 다른 이벤트를 전송한다.
- text와 textarea 태그는 value 속성과 input 이벤트를 사용한다
- 체크박스와 라디오버튼은 checked 속성과 change 이벤트를 사용한다
- Select 태그는 value를 prop으로, change를 이벤트로 사용한다
```
  
    
    {{ message }}
  

  
```

```

주의사항

v-model을 통해서 한글을 입력할 경우 하나의 글자가 완성되지 않으면 한박자 늦게 적용됨
한글을 입력할 경우 @input , :value을 통해 양방향 바인딩을 적용한다

수식어
.lazy : v-model은 각 input 이벤트 후 입력과 데이터를 동기화한다. .lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있다.
.number : 사용자 입력이 자동으로 숫자로 형변환 된다. HTML 입력 요소의 값은 항상 문자열(String)을 반영하기 때문에 종종 유용하다.
.trim : 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거한다.

[Vue] 이벤트 핸들링

Wed, 15 Mar 2023 02:25:07 GMT

메서드 이벤트 핸들러


    
      
        
          {{ todo.title }}

inline method handler

li요소를 클릭하면 console에 요소의 className이 찍히도록 동작 clickMethod1(title, event) { console.log(event.currentTarget.className)} :class="'item - ' + (index + 1)"

인라인 + 이벤트

인라인 이벤트 핸들러(인수사용)에 이벤트 핸들러를 함께 사용하는 방법

Multiple event handlers

다중 메서드 핸들러를 사용할때는 인수가 없어도 ()소괄호를 명시해야한다

이벤트 수식어(Event Modifiers)

handler(e) {
  e.preventDefault()
} 
// HTML의 기본 동작을 방지하고 method만 실행하는 기능

handlerB(e) {
  e.stopPropagation()
}
// 버블링을 방지하는 기능

이벤트 핸들러 내부에 event.preventDefault() 또는 event.stopPropagation()을 호출하여 DOM 이벤트 세부 사항을 처리하는 대신, 데이터 로직에 대한 메소드만 사용할 수 있도록 Vue는 v-on 이벤트에 이벤트 수식어를 제공한다. 수식어는 점으로 표시된 접미사이다.

.stop
.prevent
.capture
.self
.once
.passive

...

```

키 수식어

키보드 이벤트를 수신할 때 Vue는 v-on에 대한 키 수식어를 추가할 수 있다

.enter
.tab
.delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
.esc
.space
.up
.down
.left
.right
시스템 키 수식어 목록
해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있다
.ctrl
.alt
.shift
.meta

[Vue] 리스트 렌더링 - 객체

Tue, 14 Mar 2023 07:03:18 GMT

객체 변경

때로는 Object.assign()이나 _.extend()를 사용해 기존의 객체에 새 속성을 할당할 수 있다. 이 경우 두 객체의 속성을 사용해 새 객체를 만들어야 한다.

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

Vue.set(object, propertyName, value) 메소드를 사용하여 중첩된 객체에 반응형 속성을 추가할 수 있다

인스턴스 메소드인 vm.$set를 사용할 수도 있다. 이는 전역 Vue.set의 별칭이다

methods: {
          pushTodo() {
            // this.todos[3] = { title: '야식먹기' }
            // this.todos.push({ title: '야식먹기' })
            this.$set(this.todos, 3, { title: '야식먹기!' })
          }
        }

Vue.set(this.todos, 3, { title: '야식먹기!' })을 이렇게 변경해도 똑같이 작동한다

[Vue] 리스트렌더링 - 배열

Tue, 14 Mar 2023 06:21:24 GMT

v-for



     {{ todo.title }}

배열 변경 감지

Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거한다 버튼을 누르면 4번째 인덱스가 추가되도록 push메서드 생성



  
    
    
    
    Document
    
  

  
    
      
      
        {{ todo.title }}

변이 메서드

배열 데이터를 갱신하거나 삭제할때는 자바스크립트의 변이 메서드를 사용해야 한다 push() 배열의 가장 뒤에 새로운 요소를 추가해주는 메서드 pop() 배열의 가장 뒤의 요소를 반환해주는 메서드 shift() 배열의 가장 앞의 요소를 반환해주는 메서드 unshift() 배열의 가장 앞에 요소를 추가해주는 메서드 splice() 인덱스를 이용해서 요소를 추가하거나 삭제할 때 사용하는 메서드 sort() 배열을 정렬해주는 메서드 reverse() 배열을 뒤집어주는 메서드

배열 대체

변이 메소드는 호출된 원본 배열을 변형한다. 이와 비교하여 변형을 하지 않는 방법도 있다 filter() concat() slice()
원본 배열을 변형하지 않고 항상 새 배열을 반환한다

[Vue] 조건부 렌더링

Fri, 10 Mar 2023 00:34:51 GMT

v-if

v-if , v-else , v-if-else
v-if는 토글비용이 높다
실질적으로 요소를 없애버린다

v-show



  
    
    
    
    Document

초기 렌더링 비용이 높다
CSS로 display: none; 을 적용시켜 요소를 없애지 않고 요소가 보이지 않게 한다

[Vue] computed

Thu, 09 Mar 2023 04:48:50 GMT

computed

참조하고 있는 값이 변경될때마다 정의된 계산식에 따라 값을 출력한다.
정의된 계산식에 따라 결과값을 반환할때 사용한다

Document

``` - console `vm.todos.push({id: 4, done: false, title:'야식먹기'})`

야식먹기 추가

computed Getter, Setter /

watch

지정한 대상의 값이 변경될때마다 정의한 함수가 실행되는 것.



  {{ msg }}
  {{ reversedMsg }}

reversedMsg 변경될때 값 받아오는 get(), set() 작성

[Vue] 템플릿 문법

Thu, 09 Mar 2023 04:28:47 GMT





  
  
  
  Document
  



  
  
    
      {{ msg }}

문자열

“Mustache” 구문(이중 중괄호)을 사용

원시 HTML

이중 중괄호는 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야한다.

Using mustaches: {{ rawHtml }}
Using v-html directive:

약어

v-bind: 약어 = :
v-on: 약어 = @
```
  {{ msg }}
```

[Vue] 라이프 사이클

Thu, 09 Mar 2023 02:42:28 GMT





  
  
  
  Document
  



  
    {{ msg }}

created , mounted 중요
destroy 할때 vm.$destroy()

[CSS] 위아래 분리 네비게이션 호버 이펙트

Thu, 09 Mar 2023 00:13:09 GMT



  
    
    
    
    위아래 분리 네비게이션 호버 이펙트
    
  
  
    
      
        
          
          Mars
        
        
          
            화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다.
            동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의
            전쟁의 신 마르스의 이름을 따 Mars라 부른다.
          
          Read More
        
      

      
        
          
          Jupiter
        
        
          
            목성은 태양계의 다섯번째 행성이자 가장 큰 행성이다. 태양의 질량의
            천분의 일배에 달하는 거대행성으로, 태양계에 있는 다른 모든 행성들을
            합한 질량의 약 2.5배에 이른다.
          
          Read More
        
      

      
        
          
          Saturnus
        
        
          
            토성은 태양으로부터 여섯 번째에 있는 태양계의 행성으로,
            진성(鎭星)으로도 불렀다. 토성은 태양계 내의 행성 중 목성에 이어 두
            번째로 크며, 지름은 약 12만 킬로미터이다.
          
          Read More

가로배치할 item들 .item { display: inline-block; }
transition 시작할때 속성 값이 없으면 안먹힘

[CSS] hover 흐려지는 네비게이션

Tue, 07 Mar 2023 08:39:12 GMT



  
    
    
    
    네비게이션 만들기
    
    
    
    
    
  
  
    
      New Arrivals
      Summer Collection
      Winter
      Special Offers
      Trends

[CSS] 마우스 오버 툴팁 만들기

Tue, 07 Mar 2023 07:37:17 GMT



  
    
    
    
    툴팁만들기
    
    
    
    
    
  
  
    
      
        
          sentiment_very_satisfied
        
        기분이 좋아요
      
      
        
          sentiment_neutral
        
        생각이 없어요
      
      
        
          sentiment_very_dissatisfied
        
        힘들어요
      
      
        
          sentiment_very_satisfied
        
        행복해요

[CSS] hover활용 상세설명 상품목록

Tue, 07 Mar 2023 05:42:03 GMT



  
    
    
    
    상세설명상품
    
  
  
    
      
        
        
          캡슐커피
          
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quod
            unde quidem asperiores modi aut voluptatum, porro fuga minus
            eligendi?
          
          가격: 32000원 -> 28000원
          상세보기
        
      

      
        
        
          머신 세척 약품
          
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quod
            unde quidem asperiores modi aut voluptatum, porro fuga minus
            eligendi?
          
          가격: 10000원 -> 5000원
          상세보기
        
      

      
        
        
          원두
          
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quod
            unde quidem asperiores modi aut voluptatum, porro fuga minus
            eligendi?
          
          가격: 29000원 -> 19000원
          상세보기

요소 구현하고 기능넣기
가로정렬 - display: inline-box; , width값 설정
이펙트 주는 요소(.caption)에 transition
.caption opacity: 0; 에서 opacity: 1;

[HTML]container안에 태그 구분으로 불필요한 class명 줄이기

Wed, 22 Feb 2023 14:45:51 GMT


  
  
  
  
    Heading Text
    
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
      molestias quas dolorum! Itaque quae ex recusandae. Nulla nam enim
      dolorem!
    
     Read More

위 코드를 이런 식으로 작성할 경우, 어떤 모양과 역할의 태그인지 의미 파악은 되지만 .square(container) 안에 여러 div 태그가 존재하기 때문에 CSS 작성 시 다소 복잡하고 혼돈을 줄 수 있다.


  
  
  
  
    Heading Text
    
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
      molestias quas dolorum! Itaque quae ex recusandae. Nulla nam enim
      dolorem!
    
     Read More

선으로 만들어질(border스타일을 적용해줄) 태그들을 span 태그로 변경해주고,

선 안에 내용이 될 컨텐츠는 클래스명없이 div 태그로 정리해주면,

큰 .square 안에 span 태그와 div 태그로 선과 컨텐츠가 구분이 가능하다.

클래스명을 주지 않고 요소들을 div 태그로만 감싸줄 필요도 없게 된다.

[CSS] CSS 우선순위

Wed, 15 Feb 2023 13:27:20 GMT

CSS 우선순위

속성 값 뒤에 !import를 붙인 속성 점수 ♾pt

인라인 선언방식 = HTML에서 style을 직접 지정한 속성 점수 1000pt

id 선택자, #id로 지정한 속성 점수 100pt

클래스 선택자, .class, :추상클래스 로 지정한 속성 점수 10pt

태그 이름으로 지정한 속성 점수 1pt

전체 선택자, * 점수 0pt

상속받은 속성 상속 받은 속성은 항상 우선시 하지 않음

[CSS] float clear하는 방법

Wed, 15 Feb 2023 05:17:51 GMT

float

뜨다 라는 의미이며, block요소를 지정한 위치에 떠있도록 배치하는 속성이다

float를 clear한다는 의미는?

float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다. 이러한 현상은 브라우저의 오류로 생겨난 것이고,float의 부작용을 해제한다는 의미이다.

float clear 방법

부모 요소에 높이값(height) 부여 => 높이를 고정으로 주는 콘텐츠가 아니라면 높이값으로 float를 해제하는 것은 바람직하지 못하다. 근본적인 해결이 안된다.
부모 요소에 float 적용 => 부모요소의 레이아웃이 깨지는 현상이 일어난다. 그 부모의 부모에서 또 float를 해제해야하기 때문에 이 방법은 불편하다.
부모 요소에 overflow:hidden 적용 => 해당 요소 안의 콘텐츠를 박스 외부로 표현할 수 없다. 예를 들어 자식요소에서 부모요소보다 위로 올라가는 이미지 요소를 올리게 되면 잘리게 된다.
부모 요소에 overflow:auto 적용 => 특정 브라우저에서 스크롤바가 표시된다. 예를 들어 자식 요소가 부모 요소의 가로길이보다 크면 가로 스크롤바가 생기고 세로 스크롤바가 생기는 경우에는 사용할 수 없다.
float된 요소 다음에 나오는 태그에 clear:both 적용 => clear:both된 요소에 margin-top적용이 불가하다.
부모 요소에 가상요소 선택자 ::after 를 만들고 clear:both 적용 => 최고의 방법이다!

[JS] 클래스와 생성자 함수

Mon, 06 Feb 2023 09:57:58 GMT

클래스 정의

class 키워드를 사용하여 정의한다

// 익명 클래스 표현식
const Person = class = {}
// 기명 클래스 표현식
const Person = class MyClass{}

클래스를 표현식으로 정의할 수 있다 = 클래스가 값으로 사용할 수 있다 = 일급객체
- 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다
- 변수나 자료구조(객체, 배열 등)에 저장할 수 있다
- 함수의 매개변수에게 전달할 수 있다
- 함수의 반환값으로 사용할 수 있다
클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적메서드 세가지가 있다

클래스와 생성자 함수의 정의 방식 비교

생성자함수

var Person = (function() {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function() {
    console.log('Hi! My name is' + this.name);
  }

  // 정적 메서드
  Person.sayHello = function() {
    console.log('Hello!');
  }

  // 생성자 함수 반환
  return Person;
}());

클래스

class Person {
  // 생성자
  constructor(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  sayHi() {
    console.log('Hi! My name is ${this.name}');
  }

  // 정적 메서드
  static sayHello() {
    console.log('Hello!');
  }
}