[티스토리] 블로그 디자인: 이미지에 그림자 효과 적용하기

블로그에서 이미지는 글을 더 풍성하게 만들어주고 독자들의 시선을 사로잡는 역할을 합니다. 그러나 때로는 이미지의 경계선이 모호하여 블로그 레이아웃이 조금 불분명해 보일 수 있습니다. 이럴 때 어떻게 하면 이미지를 더 선명하게, 그림 효과를 더해 가독성을 높이고 포스팅을 더욱 미려하게 꾸밀 수 있을까요?

 

저는 그림자를 통해 이미지를 강조하려고 합니다. 

 

레이아웃 찾기

먼저, 이미지에 적용할 CSS를 찾기 위해 개발자 도구를 사용합니다.

1. 이미지를 첨부한 포스팅을 열고 F12 또는 ctrl + shift + c 를 눌러 개발자 도구(DevTools)를 엽니다.
2. 개발자툴의 좌측 상단에 아이콘을 클릭해주세요.
3. 아이콘을 클릭하고 포스팅창에서 마우스를 움직이면 다음처럼 오브젝트에 파란색 박스가 생기고 개발자 도구에서 해당 오브젝트의 상세 코드가 보여집니다.
4. 이미지를 클릭해서 개발창에 이미지의 정보를 확인합니다. 이미지의 부모 요소인 figure 태그에 imageblock 클래스가 적용되어있습니다. 이 경우, CSS 요소명을 figure.imageblock img 로 설정할 수 있습니다. 

 

스타일 변경 계획

이미지에 둥글둥글한 모서리와 약간의 그림자를 더해보려 합니다. 여기에 사용할 CSS 속성은 `border-radius`와 `box-shadow`입니다.

/* 이미지 모서리를 둥글게 만들기 */
border-radius: 10px;

/* 이미지 크기를 약간 작게 조절하기 */
width: 95%;

/* 그림자 효과 추가 */
/* X축, Y축, 흐림 정도, rgb(색상 / 투명도) */
box-shadow: 0 3px 12px rgb(0 0 0 / 15%);

/* transform 대한 변화에 0.3초의 지연을 부여 */
transition: transform 0.3s ease; 

/* 크기를 1.05배로 확대하는 변화를 적용 */
transform: scale(1.05);

 

• `border-radius: 10px;`: 
  • 이 부분은 이미지의 모서리를 둥글게 만듭니다. 10px의 값으로 설정하여 부드러운 곡선을 만들어내어 이미지가 더 독특하게 보이도록 했습니다.
• `width: 95%;`:
  • 이미지의 크기를 현재 크기의 95%로 줄여, 콘텐츠와의 구분을 뚜렷하게 하였습니다.
• `box-shadow: 0 3px 12px rgb(0 0 0 / 15%);`:
  • X축(offset-x )은 그림자가 가로 방향으로 이동하는 정도를 지정합니다. 양수 값은 그림자를 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다.
  • Y축(offset-y )은 그림자가 세로 방향으로 이동하는 정도를 지정합니다. 양수 값은 그림자를 아래로, 음수 값은 위로 이동시킵니다.
  • 흐림 정도(blur)은 그림자의 흐림 정도를 나타냅니다. 값이 클수록 흐린 그림자가 생성되며, 값이 작을수록 선명한 그림자가 만들어집니다. 이 값은 선택적으로 사용 가능합니다.
  • 그림자 색상(color)은 그림자의 색상을 나타냅니다. 색상은 표준 CSS 색상 표현 방식을 사용하여 지정됩니다. 투명도를 조절할 수 있습니다.
  • 그림자 효과를 추가하여 이미지가 페이지에서 떠 있고, 콘텐츠로부터 약간 떨어져 있는 듯한 느낌을 주었습니다. 가로로는 움직이지 않고, 세로로 3px만 아래로 그림자가 표시되며, 그림자의 크기는 12px로 설정하여 자연스럽게 퍼지도록 했습니다.

• 'transition: transform  0.3s ease;':
  • transition은 CSS의 속성에 변화가 일어날 때 해당 변화를 부드럽게 처리하기 위한 속성입니다. 이를 통해 변화가 일어날 때 특정 지속 시간 동안 애니메이션 효과를 부여할 수 있습니다. 마치 해당 속성에 대한 변화를 일종의 '이벤트'로 처리하는 것처럼 동작합니다.
  • 위 코드에서는 해당 요소에 `transform` 속성 변화가 발생하면 이 변화에 대해 0.3초 동안의 지연을 부여하여 부드러운 애니메이션을 적용합니다.
• 'transform: scale(1.05);':
• 크기를 현재 크기에서 1.05배로 확대하는 것을 나타냅니다.
• 일반적으로 `width: 100%;`와는 달리 다른 요소에 영향을 미치지 않습니다. `width: 100%;`를 사용하면 요소의 크기가 100%로 늘어나기 때문에 주변 요소의 위치가 변할 수 있습니다. 반면에 `transform: scale(1.05);`은 해당 요소 자체의 크기만 변하고 다른 요소들에는 영향을 미치지 않습니다. 이것은 주로 애니메이션 효과를 부여할 때 유용합니다.

스타일 변경 실행

스타일 변경 계획에 맞춰 스킨을 편집하겠습니다. 

[블로그 관리> 꾸미기> 스킨 편집] 메뉴에서 'html 편집' 버튼을 클릭하고 CSS 탭을 선택합니다. 

 

1. Page Down 키를 사용하여 맨 하단으로 이동합니다.
2. figure.imageblock img 요소에 다음 스타일을 적용합니다. transition은 이벤트라고 생각하시면 편합니다. img 요소에 미리 이벤트를 걸어주는 것입니다.

   figure.imageblock img { 
       box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
       border-radius: 10px;
       max-width: 95%; 
       transition: transform  0.3s ease;
   }

3. 오디세이의 경우 이미지 크기를 조절하기 위해 다음 코드를 추가합니다.

   #article-view figure img:not([width]){
       width: 95%;
       transition: transform  0.3s ease;
   }

4. 이미지 위에 마우스가 올라왔을 때 적용될 코드를 추가합니다.

   figure.imageblock img:hover,
   #article-view figure img:not([width]):hover {
       transform: scale(1.05);
   }

5. 적용 버튼을 클릭해서 적용합니다.

/* image shadow s */ 
figure.imageblock img{
    box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
    border-radius: 10px;
    max-width: 95%; 
    transition: transform  0.3s ease;
}

#article-view figure img:not([width]){
    width: 95%;
    transition: transform  0.3s ease;
}​

figure.imageblock img:hover,
#article-view figure img:not([width]):hover {
    transform: scale(1.05);
}
/* image shadow e */

 

미리보기 확인

입력을 마치셨다면 미리보기를 확인해보겠습니다.

좌측 상단에 드롭박스를 홈에서 '글'로 변경하면 가장 최근에 작성된 게시글이 나타납니다. [적용] 버튼을 누르고 [새로고침]을 누르거나 ctrl+s 키를 누르시면 변경된 CSS 스타일이 적용된 화면을 확인 할 수 있습니다. 

 

예외사항 체크

적용되면 안되는 부분에는 적용되지 않았는지, 적용해야 하는 부분에는 안되지 않았는지 체크해야 합니다. 이 과정에서 예외사항을 발견했습니다.  여러개의 이미지를 하나의 블럭으로 합쳐 둔 경우에 그림자가 적용되지 않았습니다.

예외사항 적용 안되는 문제 예시

 

1번과 동일한 방법으로 해당 오브젝트의 정보를 확인합니다.

1. 이미지를 첨부한 포스팅을 열고 F12 또는 ctrl + shift + c 를 눌러 개발자 도구(DevTools)를 엽니다.
2. 개발자툴의 좌측 상단에 아이콘을 클릭해주세요.
3. 아이콘을 클릭하고 포스팅창에서 마우스를 움직이면 다음처럼 오브젝트에 파란색 박스가 생기고 개발자 도구에서 해당 오브젝트의 상세 코드가 보여집니다.
4. 이미지를 클릭해서 개발창에 이미지의 정보를 확인합니다. 이미지의 부모 요소인 figure 태그에 imageblock 클래스가 적용되어있습니다. 이 경우, CSS 요소명을 figure .imagegridblock img 로 설정할 수 있습니다. 

 

예외사항 수정

요소명은 다르지만 적용하고자 하는 CSS가 동일한 스타일을 필요로 할 때, 콤마(,)를 사용하여 여러 CSS 규칙에 해당 스타일을 적용할 수 있습니다.

/* image shadow s */ 

figure.imageblock img,
figure.imagegridblock img {
    box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
    border-radius: 10px;
    max-width: 95%; 
    transition: transform  0.3s ease;
}

#article-view figure img:not([width]){
    width: 95%;
    transition: transform  0.3s ease;
}

figure.imageblock img:hover,
figure.imagegridblock img:hover,
#article-view figure img:not([width]):hover {
    transform: scale(1.05);
}
/* image shadow e */

 

 

저장

스킨을 편집했다면, 해당 내용을 안전하게 보관하고 나중에 스킨을 변경하거나 초기화해야 할 때를 대비하여 백업해 주시기를 권장합니다. 아래는 스킨을 보관하는 단계입니다.

1. [블로그 관리 > 꾸미기 > 스킨변경] 메뉴를 클릭합니다.
2. "보관" 버튼을 클릭합니다.
3. 나타나는 팝업에서 보관하려는 스킨의 이름을 입력합니다.
4. 보관함을 클릭하시면 저장한 내역을 확인 할 수 있습니다. 

이렇게 스킨을 보관해 두면 나중에 스킨을 변경하거나 수정할 때, 이전 상태로 쉽게 복구할 수 있어 편리합니다.