[카테고리:] 프로그래밍

작성일자

JavaScript로 웹 브라우저의 콘솔 로그(Console Log) 스타일 지정하기

자바스크립트로 웹 앱을 개발할 때 디버깅 방법 중 콘솔에 필요한 로그를 출력하는 것은 매우 유용합니다. 이런 유용함에 더해 원하는 로그에 대한 문자열의 색상 등과 같은 스타일을 지정할 수도 있는데요. 아래의 코드가 바로 그 예시입니다.

console.log(
    '%cHello %cWorld. %cMy Name is %cDip2K.', 
    'color: red', 
    'color: yellow',
    'color: gray',
    'color: white;font-weight: 900'
)

출력 결과는 다음과 같습니다.

작성일자

backdrop-filter로 반투명 효과 주기

유리 효과는 현대적인 UI를 개발하는데 사용하는 효과 중 대표적인 기술 중 하나입니다. 아래와 같은 결과를 얻고자 합니다.

먼저 DOM 요소입니다.

다음은 스타일 요소입니다.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

.container {
    width: 700px;
    height: 250px;
    position: relative;
}

div div {
    position: absolute;
    display: inline-block;
}

.left-circle {
    left: 0px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(#f9d924, #ff2c24)
}

.right-circle {
    right: 0px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(#01d6ff, #0f24f9)
}

.center-box {
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 250px;
    border-radius: 45px;
    z-index: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.1);
}
작성일자

clip-path로 원하는 영역만 표현하기

원하는 형태의 폴리곤 영역만 표시하고자 할때 clip-path를 사용합니다. 예를 들어 아래와 같은 결과를 보면..

위의 결과는 2개의 div 요소로 표현되는데, 아래와 같습니다.


    GIS DEVELOPER




    GIS DEVELOPER

스타일은 다음과 같습니다.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {
    position: fixed;
    background-color: black;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    font-weight: 700;
}

div:nth-child(1) {
    color: white;
}

div:nth-child(2) {
    color: black;
    clip-path: circle(1.4em at center center);
    background-color: white;
}

clip-path로 지정된 도형의 형태로 잘려진 것만 표시됩니다.

작성일자

웹 페이지 스크롤 이벤트 관련 코드

먼저 웹 페이지에서 전체 내용을 다 보기 위해 스크롤 해야할 크기는 다음 코드로 얻을 수 있습니다.

let totalHeight = document.body.scrollHeight - window.innerHeight;

다음으로 지금 스크롤된 정도를 백분율 값으로 얻는 코드는 다음과 같습니다.

let scrollPercentage = (window.pageYOffset / totalHeight) * 100;
작성일자

휜 그림자를 가진 카드

표현하고자 하는 목표는 다음과 같습니다. 하단이 휜듯이 살짝 그림자가 들어간 카드입니다.

DOM 구조는 다음과 같습니다.


    

        

            
content

CSS는 다음과 같습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    position: relative;
    width: 300px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0, 0.1);
}

.card .shadow {
    position: relative;
    width: 100%;
    height: 100%;
}

.card .shadow div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #7f8c8d;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #fff;
    color: #fff;
    font-size: 3em;
}

.card .shadow::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 4%;
    width: 80%;
    height: 50%;
    background: #000;
    filter: blur(15px);
    opacity: 0.5;
    transform-origin: right;
    transform: skewY(-11deg);
    z-index: -1;
}

.card .shadow::before {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 4%;
    width: 80%;
    height: 50%;
    background: #000;
    filter: blur(15px);
    opacity: 0.5;
    transform-origin: left;
    transform: skewY(11deg);
}

filter는 IE에서 적용되지 않습니다. 대신 box-shadow를 사용하여 비슷하게 효과를 낼 수는 있습니다.