Reference/CSS

text-shadow 속성은 텍스트 그림자를 설정합니다.

by @webs 2022. 11. 30.

text-shadow

text-shadow 속성은 텍스트 그림자를 설정합니다. x축, y축 길이를 통해 그림자의 길이를 설정하고, blur를 통해 뿌연 정도를 컨트롤 할 수 있습니다. 다중 속성을 이용하여 실제 느낌의 그림자 연출도 가능합니다.

특징	설명
기본값	text-shadow : none
적용	text
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

text-shadow 속성은 텍스트 그림자를 설정합니다.
text-shadow 속성의 blur는 뿌연 정도를 나타내는 속성입니다.
text-shadow 속성의 color를 설정하지 않으면 기본 컬러색으로 설정됩니다.

비교(Compare)

text-shadow 속성은 텍스트 그림자를 설정합니다.
box-shadow 속성의 박스 요소에 그림자를 설정합니다.

문법(Syntax)

text-shadow : none | offset-x | offset-y | blur | color

/* 기본 속성 */
text-shadow : none; /* 기본값 */

/* 속성 규칙 */
text-shadow: 1px 1px;          /* x축 | y축 */
text-shadow: 1px 1px red;      /* x축 | y축 | 색 */
text-shadow: 1px 1px 2px red;  /* x축 | y축 | 블러 | 색 */

/* 다중 속성 */
text-shadow: 1px 1px red, 2px 2px blue;
text-shadow: 1px 1px 2px red, 2px 2px 2px blue, 3px 3px 3px yellow;

/* 전역 속성 */
text-shadow: inherit;   /* 상속 */
text-shadow: initial;   /* 초기화 */
text-shadow: revert;    /* 원래대로 돌리기 */
text-shadow: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
none	text-shadow: none;	텍스트 그림자 효과를 설정하지 않습니다.(기본값)
offset-x	text-shadow: 1px 1px;	그림자의 크기를 x축을 기준으로 설정합니다.
offset-y	text-shadow: 1px 1px;	그림자의 크기를 y축을 기준으로 설정합니다.
blur	text-shadow: 1px 1px 1px;	그림자의 블러효과를 설정합니다.
color	text-shadow: 1px 1px 1px red;	그림자의 색을 설정합니다.

예제1(Sample)

텍스트 그림자 효과를 적용한 예제입니다.

어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.

운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.

정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.

text-shadow: none text-shadow: 1px 1px 2px red text-shadow: 1px 1px red text-shadow: 1px 1px

text-shadow: 1px 1px 2px red, 2px 2px 2px blue text-shadow: 1px 1px red, 2px 2px blue text-shadow: 1px 1px red, 2px 2px blue, 3px 3px black

HTML

CSS

SCRIPT

<div class="text-box">
    <div class="box">
        어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.
    </div>
    <div class="box">
        운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.
    </div>
    <div class="box">
        정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.
    </div>
</div>

.text-box .box {
    width: 100%;
    line-height: 1.4;
    text-align: justify;
    border: 1px solid #333;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
}
.text-box.overflow .box {
    overflow: visible;
}
.text-box.white .box {
    white-space: normal;
}
.sampleBtn1.red, .sampleBtn2.red {
    border-color: #ff4b4b !important;
    color: #ff4b4b !important;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

const btn1 = document.querySelector("#sample1 .sampleBtn1");
const btn2 = document.querySelector("#sample1 .sampleBtn2");
const box1 = document.querySelector("#sample1 .text-box")

btn1.addEventListener("click", (e)=> {
    e.preventDefault();
    box1.classList.toggle("overflow");
    btn1.classList.toggle("red");
    
    if(box1.classList.contains("overflow")){
        btn1.innerText = "white-space: normal";
    } else {
        btn1.innerText = "white-space: nowrap";
    }
})
btn2.addEventListener("click", (e)=> {
    e.preventDefault();
    box1.classList.toggle("white");
    btn2.classList.toggle("red");
    
    if(box1.classList.contains("white")){
        btn2.innerText = "overflow: visible";
    } else {
        btn2.innerText = "overflow: hidden";
    }
})

document.querySelectorAll("#sample1 .sampleBtn3 a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .text-box .box").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});

예제2(Sample)

텍스트 그림자 효과를 적용한 예제입니다.

Shadow

none active

HTML

CSS

SCRIPT

<div class="shadow-box">
    <span class="text">Shadow</span>
</div>

@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');

.shadow-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ececec;
}
.shadow-box .text {
    font-family: 'Mr Dafoe';
    font-size: 14vw;
    padding: 3vw;
    color: #000;
    text-shadow: 
        0 -3px 0 #333,
        0 6px 8px rgba(0, 0, 0, .4),
        0 9px 10px rgba(0, 0, 0, .15),
        0 30px 10px rgba(0, 0, 0, .18),
        0 15px 10px rgba(0, 0, 0, .21);
}

document.querySelectorAll("#sample2 a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.getAttribute("data-pro");
        document.querySelectorAll("#sample2 .shadow-box .text").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});