codena

주요 리눅스 명령어

codena — Tue, 1 Apr 2025 08:55:48 +0900

1. 파일 및 디렉토리 관리

ls : 현재 디렉토리의 파일 목록 보기
cd 디렉토리명 : 디렉토리 이동
pwd : 현재 위치 확인
mkdir 디렉토리명 : 새 디렉토리 생성
rm 파일명 : 파일 삭제
rm -r 디렉토리명 : 디렉토리 삭제
cp 원본 대상 : 파일 복사
mv 원본 대상 : 파일 이동 또는 이름 변경

2. 파일 내용 확인 및 편집

cat 파일명 : 파일 내용 출력
less 파일명 : 파일 내용 페이지 단위로 보기
nano 파일명 : 간단한 텍스트 편집기
vim 파일명 : 강력한 텍스트 편집기
head 파일명 : 파일의 처음 몇 줄 보기
tail 파일명 : 파일의 마지막 몇 줄 보기

3. 사용자 및 권한 관리

whoami : 현재 로그인한 사용자 확인
who : 현재 로그인한 모든 사용자 확인
chmod 권한설정 파일명 : 파일 권한 변경
chown 사용자:그룹 파일명 : 파일 소유자 변경
sudo 명령어 : 관리자 권한으로 명령 실행

4. 프로세스 및 시스템 관리

ps : 현재 실행 중인 프로세스 확인
top : 실시간 시스템 상태 및 프로세스 확인
kill PID : 특정 프로세스 종료
htop : 인터랙티브한 프로세스 모니터링 도구 (설치 필요)

5. 네트워크 관련 명령어

ifconfig 또는 ip a : 네트워크 인터페이스 정보 확인
ping 주소 : 네트워크 연결 상태 확인
netstat -tulnp : 열린 포트 및 서비스 확인
curl URL : 웹 요청 보내기
wget URL : 파일 다운로드

jQuery 전용 선택자 종류

codena — Tue, 5 Mar 2024 22:16:30 +0900

기본 필터 선택자(Basic Filter)

선택자	예제	설명
:odd	$("div:odd")	홀수 번째에 위치한 문서 객체를 선택함
:even	$("div:even")	짝수 번째에 위치한 문서 객체를 선택함
:first	$("div:first")	첫 번째 위치한 문서 객체를 선택함
:last	$("div:last")	마지막에 위치한 문서 객체를 선택함

선택자	예제	설명
:root	$("div:root")	document의 루트 요소 선택
:target	$("div:target")	document의 URL의 flagment 식별자로 지정된 대상 요소를 선택
:header	$("div:header")	h1, h2, h3 등과 같이 헤더인 모든 요소를 선택
:empty	$("div:empty")	자식이 없는 모든 요소(텍스트 노드 포함)를 선택
:parent	$("div:parent")	하나 이상의 하위 노드(요소 또는 텍스트)가 있는 모든 요소를 선택

함수 필터 선택자(function Filter)

선택자	예제	설명
:eq(index)	$("div:eq(1)")	일치하는 집합 내의 인덱스 n에 있는 요소를 선택
:gt(index)	$("div:gt(2)")	일치하는 세트 내의 인덱스보다 큰 인덱스에서 모든 요소를 선택
:lang(language)	$("div:lang(en-us)")	지정된 언어의 모든 요소를 선택
:lt(index)	$("div:lt(4)")	일치하는 집합 내의 인덱스보다 작은 인덱스에서 모든 요소를 선택
:not(selector)	$("div:not(:checked)")	지정된 선택자와 일치하지 않은 모든 요소를 선택
:contains(text)	$("div:contains('Hello'")	지정된 텍스트를 포함하는 모든 요소를 선택
:has(selector)	$("div:has(p)")	지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택
:animated	$("div:animated")	선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택 ":not(:animated)" => 애니메이션중이지 않은것

입력 양식 폼(Form) 필터 선택자

선택자	예제	설명
:button	$(":button")	input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택
:checkbox	$(":checkbox")	체크박스 유형의 모든 요소 선택
:checked	$(":checked")	체크되거나 선택된 모든 요소와 일치한 요소 선택
:disabled	$(":disabled")	비활성화된 모든 요소 선택
:enabled	$(":enabled")	활성화된 모든 요소 선택
:file	$(":file")	파일 유형의 모든 요소를 선택
:focus	$(":focus")	현재 포커스가 있는 요소 선택
:image	$(":image")	이미지 유형의 모든 요소 선택
:input	$(":input")	모든 input, textarea, select, button 요소 선택
:password	$(":password")	패스워드 유형의 모든 요소 선택
:radio	$(":radio")	라디오 유형의 모든 요소 선택
:reset	$(":reset")	reset 유형의 모든 요소 선택
:selected	$(":selected")	선택된 모든 요소 선택
:submit	$(":submit")	submit 유형의 모든 요소 선택
:text	$(":text")	text 유형의 모든 input 요소 선택

<select>
   <option>사과 </option>
   <option>딸기 </option>
   <option>수박 </option>
   <option>멜론  </option>
</select>

<script>
	$('select > option:selected').val();   // select 로 선택된 값이 찾기
</script>
출처: https://inpa.tistory.com/entry/jQuery- -제이쿼리-선택자-Selector- -정리 [Inpa Dev  ‍ :티스토리]

가시성 필터 선택자 (Visibility Fileter)

선택자	예제	설명
:hidden	$("div:hidden")	hidden 된 모든 요소 선택
:visible	$("div:visible")	visible인 모든 요소 선택

jQuery CSS 선택자 종류

codena — Tue, 5 Mar 2024 22:00:25 +0900

기본 선택자

선택자	예제	설명
*	$("*")	모든 요소를 선택
.class	$(".class")	지정한 클래스를 가지는 모든 요소를 선택
element	$("element")	지정된 태그명을 가지는 모든 요소를 선택
#id	$("#id")	지정한 ID 속성을 가지는 하나의 요소를 선택
,	$("selector1, selecotr2")	모든 지정한 선택자들의 결과들을 결합하여 선택

자식 선택자 (child)

선택자	예제	설명
:first-child	$("div:first-child")	부모의 첫 번째 자식인 모든 요소를 선택
:first-of-type	$("div:first-of-type")	동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택
:last-child	$("div:last-child")	부모의 마지막 하위 요소인 모든 요소를 선택
:last-of-type	$("div:last-of-type")	동일한 name 요소의 형제 중 마지막 요소인 모든 요소를 선택
:nth-child(index/even/odd/equation)	$("div:nth-child(2)")	부모의 n 번째 자식인 모든 요소를 선택
:nth-last-child(index/even/odd/equation)	$("div:last-child(2)")	마지막 요소에서 첫 번째 요소까지 계산하여 부모의 n 번째 자식인 모든 요소를 선택
:nth-last-of-type(index/even/odd/equation)	$("div:nth-last-of-type(2)")	마지막 요소부터 첫 번째 요소까지 같은 name 요소를 가진 형제와 관련하여 부모의 n 번째 자식인 모든 요소 선택
:nth-of-type(index/even/odd/equation)	$("div:nth-of-type(2)")	동일한 name 요소를 갖는 형제와 관련하여 부모의 n번째 자식인 모든 요소 선택
:only-child	$("div:only-child")	부모의 유일한 자식인 모든 요소를 선택
:only-of-type	$("div:only-of-type")	동일한 name 요소를 갖는 형제 노드가 없는 모든 요소 선택

계층 선택자 (Hierarchy)

선택자	예제	설명
> :: parent > child	$("ul > li")	"parent"로 지정된 요소의 "child"로 지정된 모든 직접 자식 요소 선택
(공백) :: ancestor descendant	$("form input")	지정된 조상의 자손인 모든 요소 선택
+ :: prev + next	$("label+input")	형제 "prev"가 바로 앞에 오는 "next"와 일치하는 다음 요소 모두 선택
~ :: prev~siblings	$("#prev~div")	"prev"요소 다음에 오는 모든 형제 요소를 선택하고, 상위 요소가 같으며 필터링 "siblings" 선택자와 일치하는 요소

속성 선택자 (Attribute)

선택자	예제	설명
[attribute\|='value']	$("[name\|=apple]")	속성 name값이 apple이거나, apple- 으로 시작하는 요소
*[attribute='value']**	$("[name*=apple]")	속성 name값이 apple이란 단어를 포함하는 요소 (어느 위치든)
[attribute~='value']	$("[name~=apple]")	속성 name값이 apple이거나 apple 공백 / 공백 apple 으로 구분된 단어를 포함하는 요소
[attribute$='value']	$("[name$=apple]")	속성 name값이 apple이거나 apple로 정확히 끝나는 값인 요소 비교는 대소 문자를 구분함.
[attribute='value']	$("[name=apple]")	속성 name값이 정확히 apple인 요소
[attribute!='value']	$("[name!=apple]")	속성 name값이 apple을 아예 갖지 않거나, apple 이외의 값을 갖지 않는 요소
[attribute^='value']	$("[name^=apple]")	속성 name값이 apple이거나, apple로 정확히 시작하는 요소
[attribute]	$("[name]")	속성 name을 갖고있는 요소
[attribute='value'][attribute2='value2']	$("[name=apple][name2=banana]")	각 속성 선택자들이 and로 일치하는 요소

올리브영 온라인몰 (적응형 PC, Mobile)

codena — Wed, 31 Jan 2024 23:41:53 +0900

올리브영 온라인몰

사이트명 : 올리브영 온라인몰
작업기간 : PC버전 7일, 모바일 1.5일
사용언어 : HTML5, CSS3, Jquery, JSON
라이브러리 : Swiper
분류 : PC 적응형, Mobile 적응형 웹사이트
URL :

PC > https://codenablog.github.io/Oliveyoung-pc/

Mobile > https://codenablog.github.io/Oliveyoung-mo/

✨ POINT

✔️ Fetch 비동기 통신을 활용해 JSON 파일의 정보 불러오기
✔️ Filter로 원하는 값의 데이터를 분류
✔️ 3단 카테고리 구성
✔️ 다른상품 추천, 다른 키워드 더보기 버튼 클릭시 새로운 정보 불러오기
✔️ Swiper 커스텀 - 내장 속성 'thumbs' 활용 , 그리드 형태의 슬라이더 구현
✔️ 모바일에서 이미지 height 고정형으로 개선
✔️ Swiper 커스텀 - 실시간 View 랭킹

Fetch 비동기통신 활용

event.json

json 파일을 만들어 불러올 정보들을 담아주었다.

{
    "items":[
        {
            "thumbUrl":"./assets/images/banner01.jpg",
            "title":"팔로우하면 20% 쿠폰 GET",
            "linkUrl":"#banner01"
        },
        {
            "thumbUrl":"./assets/images/banner02.jpg",
            "title":"올리브 멤버스 하반기 혜택",
            "linkUrl":"#banner03"
        }
    ]
}

main.js

json파일에 담긴 정보를 불러오기!

fetch('./assets/data/event.json')
  .then(res=>res.json())
  .then(json=>{
  	data = json.items // 전체 데이터를 data라는 변수에 담기
  	let html=``; // 데이터 입력을 위한 변수 할당
  
	data.forEach(element=>{
      html+=`${element.title}` // json 파일의 items의 title 정보를 불러온다
    })
  
  })

Filter로 원하는 값을 분류

product.json 파일에서 각각 EventId, brand 값이 일치하는 상품만 뽑아왔다!

event.json

{
  "items":[
    {
      "id":"prd01",
      "cate":"1001",
      "brand":"에스트라",
      "productName":"에스트라 아토베리어365 로션 150ml 기획 ...",
      "thumbUrl":"./assets/images/product01.jpg",
      "best":true,
      "cost":31000,
      "sale":23560,
      "tag":["세일","쿠폰","증정","오늘드림"],
      "eventId":false,
      "view":32,
      "linkUrl":"#product1"
    },
 .
 .
 .

main.json

Filter를 함수로 만들어서 매개변수에 원하는 값을 넣어 호출해주는 방식으로 뽑아왔다.

       // 브랜드별 상품 리스트 불러오기
fetch('./assets/data/product.json')
  .then(res=>res.json())
  .then(json=>{
    data = json.items;
    function sortData(brandId,sortId){
               // 브랜드가 일치하는 상품 필터링
      brandData = data.filter(function(parm){
        return parm.brand === sortId;
      })
          
      let html=``;

      brandData.forEach(element=>{
        .
        .
      })
      $(`.sc-brand .brand${brandId}`).html(html);
    }
    sortData(1,"빌리프");
    sortData(2,"아벤느");
    sortData(3,"빌리프");
    sortData(4,"아벤느");
})

3단 Category 구성

대분류 > 중분류 > 소분류

전체 카테고리 버튼을 누르면 나오는 영역은
"뷰티 > 스킨케어 > 토너/로션/올인원" 형태의 3단 분류로 되어있다.

category.js

중분류를 기준으로 category.json 파일에 작성하면서
소분류는 submenu라는 key에 배열로 만들어주고,
대분류는 sort라는 key를 만들어서 필터로 분류해주었다.

{ 
  "items":[
  {
    "id":1,
    "name":"스킨케어",
    "sort":"뷰티",
    "submenu":[
      {
        "id":1001,
        "name":"토너/로션/올인원"
      },
      {
        "id":1002,
        "name":"에센스/크림"
      },
      {
        "id":1003,
        "name":"미스트/오일"
      }
    ]
  },
  .
  .
  .

main.js

// 전체 카테고리 불러오기
fetch('./assets/data/category.json')
  .then(res=>res.json())
  .then(json=>{
    data=json.items; // 전체 데이터
    let html=``;

    // 카테고리 출력 폼
    function cateAll(sortId){

    cateList = data.filter(function(parm){
      return parm.sort == sortId; // 대분류 필터
    })
      
	// 대분류
    html+=`
    <div class="group-cate">
      <h3>${sortId}</h3> 
      <ul class="cate-list">
    `
    //중분류
    cateList.forEach(element => {
      html+=`<li class="cate-item">
               <a href="#${element.id}">${element.name}</a>
               <ul class="sub-list">`
      //소분류
      sub = element.submenu;
      sub.forEach(element=>{
        html+=`
                 <li class="sub-item"><a href="#${element.id}">${element.name}</a></li>
        `
      })
      html+=`
               </ul>
             </li>
      `
            });
      html+=`
           </ul>
         </div>
      `
      $(".gnb .cate-wrapper").html(html);
    }
    // 대분류 값 넣어서 카테고리 출력폼 호출
    cateAll("뷰티");
    cateAll("헬스&푸드");
    cateAll("라이프");
  })

다른상품 추천, 다른 키워드 더보기

추천 상품, 키워드 영역의 버튼을 누르면 다른 상품을 호출해야한다.
이 부분 역시 함수를 만들어서, 버튼을 누르면 다른 매개변수값을 넣은 함수를 호출하는 방식으로 만들었다.

current3 = 1; // 현재 값을 저장하기위한 변수
function keywords(i,j){
  fetch('./assets/data/keywords.json')
    .then(res=>res.json())
    .then(json=>{
      data=json.items;
      html=``;

      while(i < j){
        element = data[i];
                
        html+=`
          <li class="keyword-item">
            <a href="${element.linkUrl}">
              <figure class="img-box">
                <img src="${element.thumbUrl}" alt">
              </figure>
              <div class="text-box">
                <h3>${element.title}</h3>
                <p>${element.subTitle}</p>
              </div>
            </a>
          </li> 
        `
    
      i++;
    }
    $('.sc-keyword .keyword-list').html(html);
  });
}        
keywords(0,2); //기본으로 보여줄 것

$('.sc-keyword .other-btn').click(function(){
  if(current3 == 1){
    keywords(2,4);
    current3 = 2;
  }else if(current3 == 2){
    keywords(4,6);
    current3 = 3;
  }else{
    keywords(0,2);
    current3 = 1;
  }
  $('.sc-keyword .other-btn .current').html(current3);
})

forEach 문법을 활용해서 리스트를 뽑아올 경우 return true/false여부에 관계없이 continue 되기 때문에 원하는 갯수만 뽑아오기 위해 while문법을 활용했는데, 이후 더 찾아보니 try catch를 사용하는 방법도 있었다.

Swiper 커스텀

1. 탭 메뉴를 슬라이더와 연동

Swiper.js Demo 페이지의 Thumbs gallery를 활용했다.

탭 슬라이더와 내용 슬라이더를 각각 따로 만들어 준 후, 연동해주면 된다.

const brandSlider = new Swiper(".sc-brand .swiper",{
  loop:true,
  spaceBetween:30,
  navigation:{
    nextEl:".sc-brand .next",
    prevEl:".sc-brand .prev"
  },
  pagination:{
    el:".sc-brand .pagination",
    type: "fraction"
  },
  //이 부분!!
  thumbs: {
    swiper: brandTab, 
  }
})

2. Grid 형태의 슬라이더

main.js

swiper의 grid 속성을 이용해서 만들었다.

$(`.sc-dessert .prd-list`).html(html)
    const dessertSlider = new Swiper("#dessertSlider",{
        slidesPerView:3,
        slidesPerGroup:3,
        spaceBetween:8,
        grid:{
            rows:2
        },
        pagination:{
            el:".sc-dessert .pagination"
        },
    })

그리드 슬라이더를 만들때 주의할 점은, .swiper-slide의 부모 요소인 .swiper-wrapper에 높이값이 꼭 지정되있어야 정상적으로 작동한다.
위에 상품 리스트의 경우 화면 너비에따라 유동적으로 값이 바뀌기때문에, calc()로 정확한 값을 계산해서 높이값을 넣어주었다 !

CSS

/* swiper-wrapper */
.sc-dessert .prd-list{ 
    gap: 0;
    min-height: 456px;
    height: calc(((100vw - 30px) / 3 + 118px) * 2); 
    /* ((화면너비 - 양옆 margin) / 3열 +textbox의 높이) * 2행*/
}

 /* swiper-slide */
.sc-dessert .prd-item{
    width: 100%;
    margin-top:0 !important;
    min-height: 228px;
    height: calc((100vw - 30px) / 3 + 118px);
    /* (화면너비 - 양옆 margin) / 3열 +textbox의 높이) */
}

3. 실시간 View 랭킹

① 1-5위 상품이 첫번째 슬라이드, 6-10위 상품이 두번째 슬라이드에 있다.

② 3초에 한번씩 아이템의 포커스가 이동하고, 포커스가 해당 슬라이드의 끝까지 이동하면 다음 슬라이드로 넘어간다.
페이징 혹은 아이템을 클릭하면 초기화하기 위해 함수에 담아준 뒤에 호출했다.

// 3초에 한번씩 자동으로 넘어감
    function rankAuto(){
        rankFocus++;
        if(rankFocus == 11){
            rankFocus = 1;
        }
        // rankCurr 값이 바뀌면
        if(rankFocus < 6){  
            rankSlider.slideTo(0);
            $('.ranking-prd a').removeClass('active');
            $(`.sc-ranking .rank${rankFocus}`).addClass('active');
        }else if(rankFocus < 11){  
            rankSlider.slideTo(1);
            $('.ranking-prd a').removeClass('active');
            $(`.sc-ranking .rank${rankFocus}`).addClass('active');
        }
    }

    interval = setInterval(rankAuto, 3000);

③ 아이템 제목을 클릭하면 포커스가 이동한다. (이때 setInterval의 타이머 초기화)

// 아이템 클릭시 
    $('.sc-ranking .rank-item').click(function(a){
        a.preventDefault();
        rankFocus = Number($(this).attr('href').charAt(1)*10) + Number($(this).attr('href').charAt(2))
        i = rankFocus ;

        
        $('.ranking-prd a').removeClass('active');
        $(`.sc-ranking .rank${rankFocus}`).addClass('active');
        clearInterval(interval);
        interval = setInterval(rankAuto, 3000);
    
    })

④ 페이징 클릭시에 슬라이드가 넘어간다. (setInterval의 타이머 초기화)

    let rankFocus = 1; //현재 값을 저장하는 변수
    $('.sc-ranking .rank1').addClass('active');//첫번째 아이템에 기본 포커스
    
    // 페이징 클릭시 
    $('.sc-ranking .swiper-pagination-bullet').click(function(a){
        a.preventDefault();
        i = $(this).index();
    
        rankSlider.slideTo(i);
        if(i == 0){
            rankFocus = 1;
        }else{
            rankFocus = 6;
        }
        $('.ranking-prd a').removeClass('active');
        $(`.sc-ranking .rank${rankFocus}`).addClass('active');
      
        clearInterval(interval); //클릭시 인터벌의 타이머 초기화
        interval = setInterval(rankAuto, 3000); // 타이머 다시 시작
    })

모바일에서 이미지 height 고정형으로 개선

개선 전, 기존 올리브영 사이트

화면 너비가 줄어들면 배너의 height도 따라서 줄어든다.

개선 후

화면 너비가 줄어들어도 height는 그대로 유지된다.
이미지에 object-fit:cover를 주어 넘치는 부분은 깔끔하게 잘리도록 했다.

Healthy life CSS 개선

기존 올리브영 사이트에서 Healthy 영역의 텍스트 박스 배경이미지까지 통으로 쓰고있다.
그런데 이 부분이 마우스를 hover 하면 scale이 살짝 커지는 모션이 들어가는데, 그때 배경색과 이미지의 경계부분이 좀 뭉개져서 개선하기로 했다.

클론코딩 작업할 때 필요한 이미지 부분만 잘라서 업로드하고, 색상 배경 부분은 CSS에서 Background로 처리했다.

(+ ISSUE ) 슬라이더는 then()함수 안쪽에 ..

함수 바깥쪽에 슬라이더 함수를 쓰게되면 동적으로 생성된 요소를 슬라이더 함수가 감지하지 못해 각 슬라이드마다 인덱스 값이 NaN으로 뜨고 페이징이 제대로 동작하지 않는다.
이거때문에 한참 헤맸다. 오랜 시간을 서칭해본 끝에 해결 완료

반응형 웹 - 디바이스별 반응형 분기점

codena — Fri, 12 Jan 2024 18:02:01 +0900

오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다.

기본 설정

반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다.

html <head> 태그에 뷰포트 태그를 선언해줍니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width : 화면의 넓이를 디바이스의 넓이로 지정

initial-scale=1: 기본 사이즈를 1로 지정함.

디바이스별 분기점

반응형 분기점

1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px

2. 테블릿 가로 : 768px ~ 1023px

3. 모바일 가로, 태블릿 : 480px ~ 767px

4. 모바일 : ~ 480px

/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}

/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { /*스타일입력*/}

/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { /*스타일입력*/}

3개의 반응형 분기점

1. pc : 1024px ~

2. 테블릿 가로, 태블릿 세로 : 768px ~ 1023px

3. 모바일 가로, 모바일 세로 : ~ 768px

/* PC (해상도 1024px)*/
@media all and (min-width:1024px) { /*스타일입력*/}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) { /*스타일입력*/}

엔터프라이즈블록체인

codena — Wed, 10 Jan 2024 23:54:30 +0900

엔터프라이즈 블록체인

사이트명 : 엔터프라이즈 블록체인
작업기간 : 6일
사용언어 : HTML5, CSS3, JQuery
라이브러리 : GSAP, Swiper
분류 : PC 세미 반응형 웹사이트
URL : https://codenablog.github.io/Enterprise-Blockchain/

✨POINT

✔️ 모션의 분석과 이해
✔️ GSAP + ScrollTriger를 활용한 애니메리션 구현
✔️ Video Background로 사용
✔️ Top 버튼 위치 변화
✔️ 한 방향으로 계속 흘러가는 텍스트 베너

구조 살펴보기

1. 전체 태그를 wrapper로 감싸주기

세미 반응형이지만 PC만 지원하도록 만들었기 때문에, 최소너비를 1300픽셀로 잡아주었다.
이때, 컨텐츠의 수평 스크롤영역 때문에 가로스크롤이 생길 위험을 낮추기 위해 overflow-x:hidden 을 사용했는데, body와 wrapper에 둘다 각각 1300px의 min-width를 주고, wrapper에 overflow-x:hidden을 사용해서 화면이 1300px보다 작아서 넘치는 영역에만 스크롤이 생길 수 있도록 코딩했다.

.wrapper{
  min-width:1300px;
  overflow-x: hidden;
}
body{
  min-width:1300px;
}

2. 시멘틱 태그를 활용해 영역 구성

3. 각각의 section에는 h2태그로 제목 구성

4. 클래스명에 통일성을 주어 직관적으로 구조를 파악할수있도록 구성

각 섹션 내부 수평으로 스크롤되는 영역은 'group-hori', 수직으로 스크롤되는 영역은 'group-scroll'로 구성하여 컨트롤해서 구조파악하기 용이하게 했다.

<section class="sc-data sc-card">
  <div class="group-hori">
  .
  .
  </div>
  <div class="group-scroll">
  .
  .
  </div>
</section>

5. article

section들을 모은 영역은 독립적으로 존재할수 있는 article 태그로 감쌀 수 있다.
엔터프라이즈블록체인 사이트를 클론코딩하면서 DATA ID 내용이 나열되는 영역은 'DATA ID'라는 공통 내용을 담은 독립적인 컨텐츠기 때문에 article로 구성했다.

GSAP + ScrollTrigger

사이트의 모션 효과를 만들 위해 Greensock에서 만든 GSAP이라는 JS 라이브러리를 이용했다.
GSAP의 플러그인인 ScrollTrigger를 함께 사용하여 스크롤을 이용해 애니메이션이 움직이고 멈추도록 만들었다.

1. ScrollTrigger 사용법

① timeline 메서드를 이용해 스크롤시 동작할 애니메이션을 만들어준다.

기본적으로 나열된 순서에 따라 동작하지만, 동시에 동작하고 싶은 애니메이션은 addLabel을 이용해 Label을 선언하고, 중괄호 뒤에 붙여주면 같은 Label이 붙은 애니메이션은 동시에 동작하게 된다.
또 { 중괄호 안 } 의 duration, delay 속성을 활용하여 타이밍을 더 디테일하게 컨트롤할 수 있다.

const intro = gsap.timeline();
intro
  .addLabel('a')
  .to(".sc-intro .text-bg", {backgroundColor:"rgba(0,0,0,0.6)", duration: 100},'a')
  .from(".sc-intro .t01", {autoAlpha: 0, duration: 100},'a')
  .to(".sc-intro .t01", {autoAlpha: 0, duration: 100},"+=1")
  .from(".sc-intro .t02", {autoAlpha: 0, duration: 100}, "+=1")
  .to(".sc-intro .t02", {autoAlpha: 0, duration: 100},"+=1")
  .from(".sc-intro .t03", {autoAlpha: 0, duration: 100}, "+=1")
  .to(".sc-intro .t03", {autoAlpha: 0, duration: 100},"+=1")
  .from(".sc-intro .t04", {autoAlpha: 0, duration: 100}, "+=1")

② ScrollTrigger를 만들어 애니메이션을 적용한다.

ScrollTrigger.create({
  animation: intro,
  trigger: ".sc-intro",
  start: "top top",
  end: "+=7000",
  scrub: true,
  pin: true,
})

animation: 실행할 애니메이션의 이름
trigger: 어떤 요소를 기준으로 할지
start: 시작점 기준. "요소 / 창"
end: 끝점 기준. "요소 / 창" , "+=숫자" ("+=3000"이면 시작점에서 3000px이 스크롤 될때까지 동작)
pin:true: 애니메이션이 동작하는 동안에 영역이 화면에 고정
scrub:true: 스크롤이 중단되거나 뒤로 돌아갈때 애니메이션도 함께 정지되거나 역재생한다.

2. ScrollTrigger을 이용한 Class 컨트롤

① toggleClass 메서드를 이용해 간단하게 클래스를 on/off할 수도 있고,
② 'onEnter','onLeave', 'onEnterBack','onLeaveBack' 메서드를 이용하면 원하는 타이밍에 클래스를 on/off할 수도 있다.

// 1
ScrollTrigger.create({
  animation: intro,
  trigger: ".sc-intro",
  start: "top top",
  end: "+=7000",
  scrub: true,
  pin: true,
  markers: false,
  toggleClass:{
    targets:"#topBtn", className:"hide"
  }
})

// 2
ScrollTrigger.create({
  trigger:'body',
  start:"1000px 0%",
  end:"100% 100%",
  onEnter:function(){
    $('.header').addClass('fixed')
  },
  onLeaveBack:function(){
    $('.header').removeClass('fixed')
  }
})

동영상을 Background로 사용할 때

position:absolute로 위치를 영역에 고정시키고, z-index를 이용하여 뒤로 보냈다.
비디오에 autoplay, loop도 줬는데 ..! 자동재생이 될때가 있고 안될때가 있음
왜 그런지 찾아보니까 크롬에서 소리가 있는 동영상은 자동재생이 안된다고, 이럴땐 muted를 써줘야한다고 한다.

<video src="./videourl" autoplay loop muted></video>

Visual 영역

처음엔 각각 영역을 잡고 Background를 주었는데 이미지 영역과 텍스트 영역을 따로 잡고 코딩하는 방법이 더 간단하다.

MarkUp

이미지가 absolute로 붙어서 마지막 이미지부터 보일 것이기 때문에 역순으로 코딩한다.

<section class="sc-showcase">
  <h2 class="blind">비주얼영역</h2>
  <div class="group-visual">
    <figure class="img-box"><img src="./asset/images/img-showcase03-pc.jpg" alt></figure>
    <figure class="img-box"><img src="./asset/images/img-showcase02-pc.jpg" alt></figure>
    <figure class="img-box"><img src="./asset/images/img-showcase01-pc.jpg" alt></figure>
  </div>
  <div class="group-text">
    <div class="text-bg"></div>
    <p class="t01">기록하고</p>
    <p class="t02">증명하고</p>
    <p class="t03">성장하기</p>
  </div>
  <div class="desc">
    <div class="text-bg"></div>
    <p>
      엔터프라이즈블록체인은 블록체인 네트워크<br>
      DATA ID를 활용해 그 문제를 해결하고 새로운 방식을<br>
      제안하고자 합니다.
    </p>
  </div>
</section>

CSS

이미지 영역과 텍스트 영역은 absolute로 붙여주고, 각 영역의 너비와 높이를 잡아준다.
포인트는 다른 영역의 높이는 100vh로 잡고, 이미지를 담는 div영역만 100%로 잡기 !
그리고 overflow:hidden;으로 height값이 잘리는 부분에서 넘치는 영역은 안보이게 한다.

.sc-showcase{ 
    position: relative; 
    width: 100%; height: 100vh; 
}
.sc-showcase .group-visual{
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100vh; 
}
.sc-showcase .group-visual .img-box{
    position: absolute; 
    top: 0; left: 0;
    z-index: -2;
    width: 100%; height: 100%; 
    overflow: hidden; 
}
.sc-showcase .group-visual img{
    width: 100%; height: 100vh;
    object-fit:cover;
}
.sc-showcase .group-text{
    position:absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    .
    .
}

.sc-showcase .desc{
    position:absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    .
    .
}

Animation

이미지 넘어가는 타이밍이랑 텍스트 나타나고 사라지는 타이밍을 잘 배치해서 애니메이션을 만들어준다 .
이미지 넘어가는건 100%였던 height값을 0으로 바꿔서 구현함.

showcase
    .addLabel('a')
    .fromTo(".sc-showcase .group-text .text-bg", {backgroundColor:"rgba(0,0,0,0.0)"}, {backgroundColor:"rgba(0,0,0,0.6)",duration:20},"a")
    .from(".sc-showcase .group-text", {autoAlpha:0,duration:20},"a")
    

    .addLabel('b')
    .to(".sc-showcase .group-text .text-bg", {backgroundColor:"rgba(0,0,0,0.0)",duration:20},"b")
    .to(".sc-showcase .t01", {xPercent:100,duration:20},'b')
    .to(".sc-showcase .t03", {xPercent:-100,duration:20},'b')
    
    .addLabel('c')
    .to(".sc-showcase .t01", {autoAlpha:0,duration:20},'c')
    .to(".sc-showcase .t02", { autoAlpha:0,duration:20},'c')
    .to(".sc-showcase .t03", {autoAlpha:0,duration:20},'c')

    .to(".sc-showcase .img-box:nth-child(3)",{height:0,duration:20})
    
    .to(".sc-showcase .img-box:nth-child(2)",{height:0,duration:20})
    .to(".sc-showcase .desc .text-bg",{backgroundColor:"rgba(0,0,0,0.4)", duration:20},)
    .from(".sc-showcase .desc",{autoAlpha:0,duration:20})

DATA 영역 모션 분석

① .group-hori 영역이 수평으로 스크롤 됨, 마지막 카드는 고정
② .group-scroll 영역이 수직으로 스크롤 됨
③ ②번이 진행되면서 카드 리스트2 의 첫번째 카드가 페이드인되면서 ①에서 고정된 카드를 덮음 (안보이게)
④ 나머지 카드가 스크롤되어 올라오고, ③에서 나타난 카드 뒤로 겹쳐짐

시간을 가장 많이 잡아먹은 부분이었다..
모션자체는 구현할만 했는데 화면 너비나 높이가 줄어들면 자꾸 위치가 바뀌어서 힘들었다.

컨텐츠 너비에 유동적으로 반응하는 가로 스크롤

창 크기를 줄이거나 늘릴때도 가로 스크롤 컨텐츠의 끝점이 창 너비 끝점과 맞게 신경썼다.
컨텐츠 너비와 화면너비를 변수에 넣어서 연산해보거나 방법은 여러가지였지만 여러가지 시도를 해본끝에
가장 간단한 코드는 이거였다.

.to(".sc-economy .group-hori",{xPercent:-100,x:"100vw",duration:4},"a")

① xPercent:-100: 컨텐츠의 너비만큼 왼쪽으로 밀어버린다
② x:"100vw": 왼쪽으로 밀었던걸 화면너비만큼 다시 오른쪽으로 땡겨온다
이걸 동시에 실행하면 손쉽게 맞출수있다
이렇게 쉬운걸 헤매다니 .. ‍ ️

맨 아래에서 Top버튼 Position 변화.

Top버튼이 position:fixed로 항상 같은 영역에 붙어있다가 푸터까지 스크롤이 내려오면 fixed 속성이 사라진다. 이 부분은 ScrollTrigger와 클래스 컨트롤로 쉽게 구현할 수 있다.

#topBtn a{
    position: fixed;
    bottom: 40px; right: 100px;
    .
    .
}
#topBtn a.fixed{
    position: absolute;
    right: 100px; bottom:100px;
}

ScrollTrigger.create({
    trigger: ".footer",
    start: "0% 100%",
    end: "110% 100%",
    scrub: true,
    onEnter:function(){
        $('#topBtn a').addClass('fixed');
    },
    onLeaveBack:function(){
        $('#topBtn a').removeClass('fixed');
    }
});

한 방향으로 계속 흘러가는 텍스트 배너

한 방향으로 끝없이 흘러가는 배너는 keyframe을 활용해서 구현해주었다.
무한으로 텍스트가 나오는것처럼 보이지만 사실 트릭이다. 한 블럭 가면 다시 되돌아오는 구조로 만들면 됨.

<section class="sc-banner02">
  <h2 class="blind">Join us</h2>
  <div class="banner-overflow">
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
    <span>JOIN <i>us</i></span>
  </div>
</section>

[Github 웹호스팅] 터미널 작성 코드

codena — Wed, 10 Jan 2024 20:11:51 +0900

github 업로드를 위한 핵심 코드

1. git init (맨 처음만)
2. git add .
	2-2. git status (생략가능)
3. git commit -m "first commit"
4. git remote add origin https://github.com/CodenaBlog/파일 이름.git
	4-2. git remote -v (생략가능)
5. git push origin master

코드 자세히 살펴보기

1. git init

init = initialize = 초기화 (git을 쓰기 위해 초기화를 한다는 의미이다.)

맨 처음 프로잭트를 올릴때는 git init을 해주어야 함

2. git add .

git add는 git hub에 어떤 파일을 올릴지 선택하는 명령어인데 .(점)은 전부라는 뜻이다.

만약에 파일 하나만 올리고 싶다면 -> git add index.html 이런식으로 작성 가능하다.

✔️ Error : LF will be replaced by CRLF in

원래는 git add . 를 하면 아무일도 일어나지 않는게 정상이지만, 만약 위와 같은 오류가 떴다면

git config --global core.autocrlf input 을 넣어보자

2-2. git status

git add .를 통해 선택 된 파일을 보여줌 (확인을 위한 과정이니 생략가능)

3. git commit -m "first commit"

git commit은 히스토리를 만드는 명령어이고 "first commit"이라는 이름으로 업로딩 된다.

다음에 코드를 수하고 다시 덮어쓰기 저장을 해야할때는 second commit, third commit ~ 이런 식으로 저장해서 히스토리를 만들어 나가면 된다. (히스토리 이름은 본인이 원하는데로 써도 무관함. 별로 중요하지 않음)

81개 (본인 파일 개수) 파일이 변환되었다라고 뜨면 성공!

4. git remote add origin https://github.com/CodenaBlog/HansumEQL.git

github에서 코드를 복붙하면 된다.

내가 만든 파일을 github에 연결시키는 코드이다.

https://github.com/CodenaBlog/HansumEQL.git 의 repositories로 내 소스코드를 보낸다는 뜻이고

터미널에서 엔터를 눌렀을때 아무 변화도 없으면 성공!

✔️ Error : git remote origin aleady exists

기존에 연결되어 있는 레파지토리가 다시 새로운 레파지토리에 소스코드를 올리려고 하면 발생되는 에러이다.

해결방법은 간단하다. 위와 같이 원격 저장소와의 연결이 되어 있다고 하니 기존의 연결을 끊고 새로 올리고 싶은 곳에 소스코드를 올리면 된다.

1. 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줌

git remote remove origin

2. git remote add origin [새롭게 연결할 깃 레파지토리 주소] 입력

3. git remote -v

4.git push origin master

4-2. git remote -v

연동이 됐는지 확인하는 방법 (선택 사항)

5. git push origin master

github로 소스코드 보내기~

마지막에 *[new branch] master -.> master 가 나오면 성공!

✔️ Error : failed to push some refs to ' ~ '

git push를 했을때 아래와 같이 error: failed to push some refs to 에러가 발생하는 경우가 있다.

이는 원격저장소(github)에 내 로컬(내컴퓨터)에는 없는 파일이 있을 때 내 파일을 push 할 면 발생하는 오류이다.

이럴땐 원격저장소에서 내 로컬에 저장하지 않은 파일을 pull한 후 원격저장소에 다시 push를 해야한다.

1. 상황

내 컴퓨터(local)에서 f1.py파일을 수정하였다. 이후 github에 수정한 내용을 push하려고 했지만, 팀원이 f2.py 파일을 올려놨다. 이 경우 나의 push가 제한된다.

2. pull

먼저 원격저장소에 f2.py를 내 로컬로 가져와야된다. 즉 원격저장소를 pull 해야한다.

git pull origin master

3. push

이후에는 push가 가능해지므로 add,commit,push를 해서 내가 반영하고 싶은 수정사항을 반영하면 완성!

git push origin master

linear-gradient 속성에 transition 적용하기

codena — Mon, 25 Dec 2023 18:15:33 +0900

CSS transition 속성으로 엘레멘트의 위치, 크기, 컬러 등이 변경될 때 부드러운 전환 효과를 넣을 수 있다.

하지만 일반적인 백그라운드 컬러와 달리, linear-gradient 를 사용한 백그라운드 컬러에는 transition 속성값이 적용되지 않는다.

그래서 여기서 트릭을 사용해야 한다

- 부모 요소에 가상 요소인 ::before 혹은 ::after를 만든다.

변화 하고 싶은 색을 linear-gradient를 사용해 입력한다.
transition의 time값을 지정한다.
absolute을 사용해 부모 요소와 포지션이 완전히 겹치도록 만든다.
opacity 값은 0으로 설정한다. (중요!!)

- 마지막으로 hover했을때 opacity가 1이되도록 속성을 추가하면 끝이다.

Smooth gadient

그라디언트를 적용하고자 하는 요소의 가상 요소를 만들어 opacity 0으로 보이지 않게 했다가 hover를 하면 opacity 1로 나타나도록 하는 방법을 이용해 linear-gradient에 부드러운 움직임 효과를 넣는 방법이다.

.gradient1{
    position: relative;
    width: 600px;
    height: 150px;
    background: #ccc;
    &::after {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: all 0.3s linear;
        background: linear-gradient(180deg, rgba(0,97,255,1) 0%, rgba(141,226,255,1) 100%);         
      }
    &:hover::after{
        opacity: 1;
    }
}

CSS로 아이콘과 텍스트를 수평 정렬하기

codena — Fri, 1 Dec 2023 00:34:15 +0900

웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 있다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있고, 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여주어야 할 때도 있다.

이럴 때 사용할 수 있는 CSS 스타일링 요령에 대해서 알아보았다.

1. HTML 마크업

아이콘과 텍스트를 나란히 배치하는 HTML 코드를 작성하였다. 아이콘은 SVG를 텍스트는 <span> 태그를 사용하였다.

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
    <circle cx="12" cy="7" r="4" /></svg
  ><span> 내 프로필 </span>
</div>

2. 기본 스타일링

정렬을 하기 전에 중요한건 우선 SVG 이미지와 텍스트의 크기를 비슷하게 맞춰주는 것이다. 아이콘 크기와 텍스트 크기가 반드시 정확히 동일할 필요는 없고 사용 사례에 따라서 약간의 차이는 있어도 된다.

svg {
  width: 4rem;
  height: 4rem;
}

span {
  font-size: 4rem;
}

내 프로필

위의 화면을 보면 아이콘과 텍스트의 크기를 맞췄지만 정렬이 약간 틀어져있는 것을 볼 수 있다.

3. vertical-align

그렇다면 어떻게 아이콘과 텍스트를 수평으로 나란히 정렬할 수 있을까?

기본적으로 SVG도 인라인(inline) 요소이고, 텍스트도 인라인 요소이다. 따라서 인라의 요소를 수평 방향으로 정렬을 맞춰주는 CSS의 vertical-align 속성을 사용다면 된다.

두 요소에 동일하게 vertical-align 속성을 middle로 설정해주면 아이콘과 이미지의 정렬이 맞는 것을 볼 수 있다.

svg,
span {
  vertical-align: middle;
}

내 프로필

하지만 이 스타일 방법의 단점은 아이콘과 텍스트 간의 거리를 정확히 원하는 값으로 설정하기 어렵다. 왜냐하면 인라인 요소 간의 간격은 letter-spacing 속성이 결정하는데 이 속성값을 바꿀 경우 단어 간의 간격에도 영향을 주게 되기 때문이다.

4. Flexbox

이 번에는 Flexbox(플렉스박스)를 활용해서 아이콘과 텍스트를 수평으로 나란히 정렬해 보았다.

아이콘과 이미지의 부모 요소를 Flexbox로 만들고, align-items 속성을 center로 설정해주면 되는데 이 방법은 gap 속성을 통해서 아이콘과 이미지 간의 간격을 자유롭게 조정할 수도 있다.

div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

내 프로필

이 스타일 방법은 특히 버튼(button)이나 태그(tag), 레이블(label)과 같은 UI를 구현할 때 유용하다.

5. 응용: 세로 배치

Flexbox를 활용하면 아이콘과 텍스트를 가로, 세로 나란히 배치할 수 도 있다.

svg {
  width: 4rem;
  height: 4rem;
  padding: 8px;  border: 2px solid;  border-radius: 9999px;}

span {
  font-size: 2rem;}

div {
  display: flex;
  flex-direction: column;  align-items: center;
  gap: 1rem;
}

내 프로필

grid(3)

codena — Thu, 23 Nov 2023 01:22:11 +0900

grid의 정렬 속성에 대하여 알아보았다.

1. auto-fill과 auto-fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채울 수 있다.

따라서 반응형을 보다 쉽게 만들 수 있고 repeat() 함수와 minmax() 함수랑 궁합이 잘 맞는다.

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fil 의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어갑니다.

auto-fill과 auto-fit 의 차이는

auto-fil은 크기보다 셀의 개수가 부족하면, 공간이 남게 되고

반대로 auto-fit을 사용하면, 남는 공간을 채운다.

2. row-gap / column-gap / gap

gap은 행과 행, 열과 열 사이에 간격을 지정해줄 수 있다. 더 정확히는, grid Line의 두께를 지정해주는 것이다.

.container {
	display: grid;
	grid-template-columns: repeat(3, 130px);
	grid-template-rows: repeat(2, 130px);
	column-gap: 30px;
	row-gap: 30px;
}

3. align-content / justify-content

grid의 정렬 또한 flex의 정렬과 같은 테그를 사용한다.

세로축으로 정렬하는 align-content와 가로축으로 정렬하는 justify-content이 있고

사용할 수 있는 값도 start, center, end, space-around, space-between, space-evenly, stretch로 똑같다.

codena

주요 리눅스 명령어

1. 파일 및 디렉토리 관리

2. 파일 내용 확인 및 편집

3. 사용자 및 권한 관리

4. 프로세스 및 시스템 관리

5. 네트워크 관련 명령어

jQuery 전용 선택자 종류

기본 필터 선택자(Basic Filter)

​

함수 필터 선택자(function Filter)

​

입력 양식 폼(Form) 필터 선택자

가시성 필터 선택자 (Visibility Fileter)

jQuery CSS 선택자 종류

기본 선택자

자식 선택자 (child)

계층 선택자 (Hierarchy)

속성 선택자 (Attribute)

올리브영 온라인몰 (적응형 PC, Mobile)

올리브영 온라인몰

✨ POINT

Fetch 비동기통신 활용

Filter로 원하는 값을 분류

3단 Category 구성

다른상품 추천, 다른 키워드 더보기

Swiper 커스텀

1. 탭 메뉴를 슬라이더와 연동

2. Grid 형태의 슬라이더

3. 실시간 View 랭킹

모바일에서 이미지 height 고정형으로 개선

Healthy life CSS 개선

(+ ISSUE ) 슬라이더는 then()함수 안쪽에 ..

반응형 웹 - 디바이스별 반응형 분기점

기본 설정

디바이스별 분기점

반응형 분기점

3개의 반응형 분기점

엔터프라이즈블록체인

엔터프라이즈 블록체인

✨POINT

구조 살펴보기

1. 전체 태그를 wrapper로 감싸주기

2. 시멘틱 태그를 활용해 영역 구성

3. 각각의 section에는 h2태그로 제목 구성

4. 클래스명에 통일성을 주어 직관적으로 구조를 파악할수있도록 구성

5. article

GSAP + ScrollTrigger

1. ScrollTrigger 사용법

2. ScrollTrigger을 이용한 Class 컨트롤

동영상을 Background로 사용할 때

Visual 영역

DATA 영역 모션 분석

컨텐츠 너비에 유동적으로 반응하는 가로 스크롤

맨 아래에서 Top버튼 Position 변화.

한 방향으로 계속 흘러가는 텍스트 배너

[Github 웹호스팅] 터미널 작성 코드

github 업로드를 위한 핵심 코드

코드 자세히 살펴보기

1. git init

2. git add .

✔️ Error : LF will be replaced by CRLF in

2-2. git status

3. git commit -m "first commit"

4. git remote add origin https://github.com/CodenaBlog/HansumEQL.git

✔️ Error : git remote origin aleady exists

4-2. git remote -v

5. git push origin master

✔️ Error : failed to push some refs to ' ~ '

linear-gradient 속성에 transition 적용하기

CSS로 아이콘과 텍스트를 수평 정렬하기

1. HTML 마크업

2. 기본 스타일링

3. vertical-align

5. 응용: 세로 배치

grid(3)

1. auto-fill과 auto-fit

2. row-gap / column-gap / gap

3. align-content / justify-content