gyeojin_1.log

(Updating) CSS 기능 아카이빙

Tue, 08 Feb 2022 03:07:12 GMT

CSS 기능

몰랐던 기능이 너무 많아 현타 와서 하는 아카이빙.

👀 목차 👀 1.mix-blend-mode 2.animation + keyframes 3.background-attachment 4.svg animation

mix-blend-mode

어느 요소의 컨텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정.
- 주로 마우스 호버 인터렉션에서 씀.
- 참고 : MDN 문서

animate & keyframes + 축약형

모르는 건 아닌데, 하도 까먹어서 적어둠
- animation 축약형 animation: animation-name / animation-duration / animation-delay / animation-iteration-count / animation-timing-function / animation-direction / fill-mode play-state;
  - animation-name : @keyframes 이름 animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용 animation-delay : 애니메이션을 시작하기 전 지연시간 설정 animation-iteration-count : 반복 횟수 지정 animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier ) animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며) animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both ) animation-play-state : 애니메이션 실행 중에 중지되었을 때 계속 진행하거나 멈추게 할 것인지를 지정 (running / paused)
- keyframes 문법 name - keyframes가 적용될 이름을 정합니다. 0% - 시작할 때 적용될 구간 100% - 끝날 때 적용될 구간
```
@keyframes name{
 0%{ }
 100%{ }
}
```

background-attachment

배경이미지의 스크롤 여부를 결정하는 css
- scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.

svg animation

step

1. 일러스트 작업 -> stroke 상태에서 svg파일로 내보내기
2. https://jakearchibald.github.io/svgomg/ : svg 경량화 및 코드 정리해주기
3. css -> stroke-dasharray(점선을 만들어주는 속성), stroke-dashoffset(어디부터 시작할 것인지 정해주는 속성) 값을 조절하여 애니메이션 입혀주기

👀크로스 브라우징에 관한 고찰

Mon, 07 Feb 2022 08:04:25 GMT

크로스 브라우징(Cross Browsing)

표준 웹 기술을 채용하여 다른 기종 or 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에, 어느 한쪽에 최적화되어 치우치지 않도록 웹 페이지를 제작하는 기법을 말하는 것. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.

왜 맞춰야 하나요? -각각의 브라우저의 렌더링 엔진이 다르기 때문.
- ex ) display: flex;
- MDN 문서의 하단에는 브라우저 호환성을 다루고 있음. 이처럼 브라우저 마다 지원하는 경우가 전부 다르기 때문에, 작업자가 의도한대로 브라우저의 부침 없이 동작하게 하려면 필요함.
어떻게 맞추나요? -무조건 동일하게 맞추는 것이 아님을 기억할 것. 동일하게 맞출 수도 없음🤔 디폴트 기능과 유사하게 맞춰야 한다. -기능을 주로 선보일 브라우저(이하 디폴트 브라우저)를 파악하고 있어야 한다. (사용이 적은 브라우저 맞추다 시간 보내지 말란 이야기.🤦‍♀️)
- 브라우징 방법✍
1. 사전에 방지
-Can I Use 활용 : CSS 속성을 입력하면 어느 브라우저에서 동작하는지 알려주는 사이트.
```
  
```
1. CSS 초기화 작업
-reset.css 등 : 브라우저마다 차이나는 기본 스타일 값들을 초기화.
```
 
```
1. 보수적으로 코딩하기
-작업 시작부터 대부분의 브라우저에서 호환되는 기능과 코드를 사용하는 것.
```
  
```
1. Vender Prefix
-크로스 브라우저를 개발하기 위해 CSS 속성 앞에 브라우저별 접두사를 붙이는 것
- 접두어 브라우저
  - -webkit- : 구글, 사파리, ios 사파리 안드로이드
  - -moz- : 파이어폭스
  - -o- : 오페라
  - -ms- : 익스플로러
  1. 메타테그 이용
```
// ...

//...
```
head 요소 안에 넣어두면 IE가 그 해당 문서를 읽고 원하는 모드로 렌더링을 하게 해줌.
content="IE=edge"는 해당 브라우저가 할 수 있는 가장 최신의 렌더 버전으로 렌더링 된다.

Vue 라이프사이클(lifeCycle) 이해하기

Mon, 13 Dec 2021 07:20:45 GMT

들어가기 전 , Vue 기초상식

Vue : Vuej는 날이 갈수록 진화하고 있는 웹콘텐츠들 및 웹사이트들(Youtube, Facebook, instagram 등)을 소비하는 사용자들을 위한 프론트엔드 부분을 더 쉽게 만들기 위해 만들어졌다.
Vue Instance : Vue로 화면을 개발하기 위해 필수 생성해야하는 기본 단위. Instance 생성 방법🔽
- 생성자 : 새 객체 생성 시 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장하고 사용하는 방법 el, data, template, methods, created 등 요러가지 속성이 있음.
- Instance 유효범위 : HTML 범위 내에서만 적용. 보통 범위는 el 속성에 의해 정해짐.
- Instance 화면 적용 순서 ㄴ Vue 라이브러리 로딩 -> Instance 생성 -> 특정 화면 el에 Instance 연결 -> el에 Instance 내용 적용 -> 적용화면 사용자 노출

라이프사이클(Life Cycle) 이란?

Vue Instance 나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단개의 과정을 거치게 되는데, 이를 '라이프사이클(Lifecycle)'이라고 함. Instance 생성 후 노출되고 사라지기까지의 단계.
- 생성(create) - DOM 부착(mount) - 업데이트(update) - 삭제 (destroy) 의 과정.
- 이 과정에서 훅(Hook)을 할 수 있도록 API를 제공. ㄴ 훅(Hook)? 사용자가 특정 단계(초기화 단계)에서 자신의 코드를 추가할 수 있는 함수.
- 종류 : beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

SCSS 탐방기

Thu, 04 Nov 2021 08:57:16 GMT

/*주석*/
//주석

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

/*선택자 중첩기능*/
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

/*중첩 안에서 &는 상위(부모)선택자 참조*/
.btn {/*부모선택자*/
  position: absolute;
  &.active {/*부모선택자인 .btn을 참조 치환*/
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

/*@at-root : 특정 변수 사용해야되는데 중첩 밖에 생성해야 할 때.*/
.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

/*중첩된 속성은 한꺼번에 처리할 수 있다.*/
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

/*변수 앞에 $붙이기. 블록 밖에서 전역선언하면 마음대로 쓸 수 있음.
선언된 블록 안에서만 유효범위 가짐. 변수 재할당도 가능.*/
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
    $color: #333333 !global; /*블록 안 변수도 global 선언하면 전역으로 설정.*/
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}
/*변수 선언한 box 밖에서 color 호출하면 에러*/
.box2 {
  background: $color;
}

/*!default 플래그를 쓰면 기존에 할당되어있던 값을 사용함.*/
$color-primary: red; /*먼저 선언되었기 때문에 선할당 된 것임.*/

.box {
  $color-primary: blue !default; /*기존값이 있으면 그걸 쓸게..*/
  background: $color-primary;
}

/* {}중괄호 블록+샵 이용하면 변수값 넣을 수 있음.*/
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

/*@import : 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합*/
@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

/*or 여러 파일 가져오기 : 파일명 사이에 세미콜론 붙이기*/

/*연산작업 가능*/

/* +: 더하기
 - : 빼기
 * : 곱하기 (하나 이상의 값이 반드시 숫자)
 / : 나누기 (오른쪽 값이 반드시 숫자)
 % : 나머지 연산자*/

 /* == : 동등
  != : 부등
   < : 대소 ~보다 작은
  > : 대소 ~보다 큰
   <= : 대소동등 ~보다 작거나 같은
    >= : 대소동등 ~보다 크거나 같은*/


/* 논리연산자 
    and:그리고 / or 또는 / not 부정 */

$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}

/* 숫자 : 상대적 단위 연산 */
/* width: 50% - 20px;  // 단위 모순 에러(Incompatible units error) */
/* width: calc(50% - 20px);  // 연산 가능 */

/*문자 연산
+로 문자연산 가능. 따옴표 같이 씀.
색상 연산 가능.*/
div::after {
  content: "Hello " + World;
  flex-flow: row + "-reverse" + " " + wrap
}

$color: rgba(10, 20, 30, .5);
div {
  color: opacify($color, .3);  // 30% 더 불투명하게 / 0.5 + 0.3
  background-color: transparentize($color, .2);  // 20% 더 투명하게 / 0.5 - 0.2
}

/*@Mixin 재활용+@include 포함*/
/* mixin 설정 */
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

/*include로 포함*/
h1 {
  @include large-text;
}
div {
  @include large-text;
}

/*인수
함수처럼 인수를 가질 수 있음.*/
@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }

/*@include시 별도의 인수전달 안되면 기본값 사용.*/

PORTFOLIO_Art Work

Sun, 10 Oct 2021 10:39:59 GMT

👽 개인 디자인 작업물 입니다.👽 (추후 신규 작업물 업데이트 예정입니다.)

🍀Introduce Myself!

Sun, 03 Oct 2021 08:17:39 GMT

👋안녕하세요, 반갑습니다!

저에 대해 궁금해주셔서 감사해요. 부디 기분 좋은 연락이 오기를 기다리고 있겠습니다.😊

📌 resume & Introduce document

아래의 아이콘을 클릭하시면 이력서가 열람됩니다.

📄 ◀ Click!

1.React 공부 복습글

Thu, 16 Sep 2021 08:16:29 GMT

'React' 라는 것을 공부해보자✨

1. React는 무엇인가요? > SPA (Single Page Application). 프론트앤드 라이브러리의 일종. component에 집중되어있는 라이브러리.

라이브러리 vs 프레임워크 내가 코드를 컨트롤 하느냐 vs 누군가의 규칙을 따라 코딩하는거냐! 라이브러리 : ex)jQuery -> 내가 필요할 때 불러와서 사용한다. 프레임워크 : ex)django -> 프레임워크가 정한 규칙에 따라서 사용해야한다.

PORTFOLIO_ASACK

Tue, 24 Aug 2021 08:58:44 GMT

🥑 비건 도시락 브랜드인 '아삭' 의 브랜딩 디자인 입니다. 🥑

PORTFOLIO_Go Camp!

Thu, 19 Aug 2021 06:07:19 GMT

🍀 공공 API 활용한 앱 프로토타입 작업에서 디자인 시안을 작업했습니다. 🍀

PORTFOLIO_디자인 작업

Thu, 19 Aug 2021 03:44:31 GMT

✨디자인 실무 & 개인 프로젝트에서 열심히 만든 작업물 입니다✨

210802_포트폴리오 사이트 작업

Mon, 02 Aug 2021 06:15:18 GMT

(아너무너무어렵고힘들다!)

이 곳엔 포트폴리오 작업 시 새로 알게 된 기능들을 아카이빙합니다. (latest update. 2021.08.04)

1.360도 무한히 회전하는 CSS code

/* CSS, Keyframes code */
.intro .infinity-img img{
    width: 100%;
    animation: rotate_image 10s linear infinite;
    transform-origin: 50% 50%;
    }

@keyframes rotate_image {
  0%{}
  100% {
    transform: rotate(360deg);}
}

transform-origin의 50% 50%은 회전의 중심 위치를 나타내는데, 완전 원형으로 회전시키려면 이미지 파일의 정중앙에 회전시키려는 중심이 위치 해야한다.

만약 이미지가 중심위치에서 상하좌우 비대칭이라면 다른 이미지 편집 툴을 사용하여 대칭으로 맞춰줘야 함.

animation 특성의 10s는 time period를 뜻하는데, 적을수록 빠르게 회전하므로 적절히 조절하여 설정해주면 됨

2.가로 스크롤 마우스 휠 이벤트

포트폴리오 부분 가로 스크롤

HTML

   
    
      
      
        
          Portfolio.
          이런 것들을 즐겁게 뚝딱거렸어요!
        
        
          
            
              
            
            
              My Schedule
              스케줄을 업데이트 할 수 있는 홈페이지.
글쓰기 수정·삭제 / 차트 값 반영 구현.
              프로젝트 인원 | 1인
              작업 기간 | 2주
              DETAIL
              WEB SITE
            
          
          
            
              
            
            
              My Schedule
              스케줄을 업데이트 할 수 있는 홈페이지를 만들었습니다.
              프로젝트 인원
              작업 기간

CSS

.pf {position: relative;}
.pf .bg {background: url(../img/portfolio_bg.png) no-repeat center center; background-size: cover; width: 100%; height: 100%; position: absolute; z-index: -1;}
.pf .center {overflow-x:scroll;}
.pf-box {width: 400%; position: relative; margin: 50px 0; display: flex;}
.pf-box .each-pf-box {width: 25%; display: flex; align-items: center;}
.each-pf-box .pf-imgbox {width: 70%; height: 600px; overflow: hidden;}
.each-pf-box .pf-imgbox .pfimg {background: url(../img/slide_01.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100%;}
.each-pf-box .pf-txtbox {padding: 0 0 0 40px; transform: translate(0, 50%);}
.each-pf-box .pf-txtbox b{font-size: 30px;}
.each-pf-box .pf-txtbox p {font-size: 16px; padding: 10px 0;}
.each-pf-box .pf-txtbox span {font-weight: 300; padding-top: 10px; display: block;}
.each-pf-box .pf-txtbox .first {margin-top: 10px;}
.each-pf-box .pf-txtbox a {padding: 15px 20px; margin-top: 20px; display: inline-block; border: 1px solid #222; margin-right: 10px;}

jQuery

$(function(){
  $(".pf .center").on('mousewheel',function(e){
    var wheelDelta = e.originalEvent.wheelDelta;
    if(wheelDelta > 0){
      //console.log("up");
      $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
    }else{
    //console.log("down");
      $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
    }
  });
});

↑ 아직 로직이 이해안되기 때문에 일단 적어둔다. 이해는 나중에ㅠ

3. 메인페이지에서 버튼 클릭 시 해당 컨텐츠로 이동하는 로직

Javascript

const navButton = document.querySelectorAll('.nav button');
//console.log(navButton);
const home = document.querySelector('.intro');
const aboutMe = document.querySelector('.about');
const portFolio = document.querySelector('.pf');
const design = document.querySelector('.design');

const homeTop = home.offsetTop;
const aboutMeTop = aboutMe.offsetTop;
const portFolioTop = portFolio.offsetTop;
const designTop = design.offsetTop;

navButton[0].onclick = function(){
  window.scroll({top:homeTop, behavior: 'smooth'})
}

navButton[1].onclick = function(){
  window.scroll({top:aboutMeTop, behavior: 'smooth'})
}

navButton[2].onclick = function(){
  window.scroll({top:portFolioTop, behavior: 'smooth'})
}

navButton[3].onclick = function(){
  window.scroll({top:designTop, behavior: 'smooth'})
}

↑ 노가다의 결정체. 추후 리팩토링 필요!

4. 텍스트 말줄임표 치환

CSS

/* 긴 대쉬보드명이 오는 경우에 "..." 표시를 위함 */
.Button.dashboard-menu {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*중요!! 까먹지 말기 */
    -webkit-box-orient:vertical; 
      -webkit-line-clamp:2; 
      display: -webkit-inline-box;
}

↑-webkit-line-clamp

-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한.

1.display 속성을 -webkit-box 또는 -webkit-inline-box설정 2.-webkit-box-orient (en-US) 속성을 vertical로 설정 위 두가지 조건이 충족해야 적용됨.

-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow 속성 또한 hidden으로 설정해야 합니다.

앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp

JS

var length = 13; // 표시할 글자수 기준
if (temp.length > length) {
  temp = temp.substr(0, length-2) + '...';
}

↑ 글자수 기준 말고 박스 크기 기준은 안되나? 해봐야지!

5. 가로 스크롤 시 body 세로 스크롤 멈추기

1차 : mouseover 와 mouseout 활용

$(function () {
  $(".artist_container")
    .mouseover(function () {
      $("body").css("overflow-y", "hidden");
    })
    .mouseout(function () {
      $("body").css("overflow-y", "auto");
    });
 });

*결과 : 실패! *why? : 정상 작동은 했지만 마우스가 들어오고 나갈때를 설정하니 컨텐츠가 거의 안 보이는 곳에서도 멈춰버림.

2차 : 컨텐츠 박스 (artist_container)의 스크롤값을 읽어 조건문 활용

$(".artist_container").on("mousewheel", function (e) {
    var wheelDelta = e.originalEvent.wheelDelta;
    var boxWidth = $(this).scrollLeft(); //최소 0 ~ 최대 2464
    //console.log(boxWidth);
    if (boxWidth == 0 || boxWidth == 2464) {
      $("body").css("overflow-y", "auto");
    } else {
      $("body").css("overflow-y", "hidden");
    }
  });

*결과 : 절반은 성공? *why? : 이것도 정상작동했지만, 최초로 마우스휠을 돌려야 기능 수행이 된다. (마우스 휠 이벤트를 실행할 때 같이 넣어서 그렇다.) 다른 방법 생각해봐야 할 듯 하다.

3차 : 컨텐츠 박스 (artist_container)의 스크롤값+mouseover&mouseout 함수 붙이기

$(".artist_container")
    .on("mousewheel", function (e) {
      var wheelDelta = e.originalEvent.wheelDelta;
      var boxWidth = $(this).scrollLeft(); //최소 0 ~ 최대 2464
      //console.log(boxWidth);
      if (boxWidth == 0 || boxWidth == 2464) {
        $("body").css("overflow-y", "auto");
      } else {
        $("body").css("overflow-y", "hidden");
      }

      if (wheelDelta > 0) {
        //스크롤 up 시 -150 찍힘
        $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
        //-(-150)+ 현재 요소의 스크롤 위치
      } else {
        //스크롤 down tl +150 찍힘
        $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
      }
    })
    .mouseover(function () {
      $("body").css("overflow-y", "hidden");
    })
    .mouseout(function () {
      $("body").css("overflow-y", "auto");
    });

*결과 : 성공..? *why? : 다 정상작동 하지만 스크롤값 처음 읽어들일때와 마우스 호버할 때 약간 충돌이 있는 듯 함. 일단 디자인 완성해놓고 다시 보기!

6. 시간 변화에 따른 이미지 변경

$(function(){
  function nightCheck(){
    var todayHour = new Date().getHours(); //그 날의 시간만 추출
    //console.log(todayHour);

    if(todayHour < 18){
      // day time
      //alert('day');
      $('.lobby_bg .bg_img').attr('src', 'img/lobby.jpg');
      $('.contents').removeClass('is_night');
    }else if(todayHour > 18){
      // night time
      //alert('night');
      $('.lobby_bg .bg_img').attr('src', 'img/lobby-night.jpg');
      $('.contents').addClass('is_night');
    }
  }

  nightCheck();

  var landingInt = setInterval(function(){
    nightCheck();
  },1000) //check time on 1s
});

*단순하게 시간만 불러와서 1초단위로 체크하는 기능

7. clip-path (css)

clip-path CSS 속성은 요소의 클리핑 범위를 지정한다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨짐. 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

min()/max() : ,로 값들을 나열한 후, 그 중 작은 것/큰 것을 선택한다. ex) width: max(100%, 500px) 인 경우, 가로를 꽉 채우다가 500px보다 작아지게 되면 더 이상 줄어들지 않는다.