메인 배너 이미지를 넣다보면 신경쓰이는 것이 하나 있는데 이미지 그대로 색상이 나오는 게 아니라 검은색의 필터가 씌인것처럼 나타날 때가 있다. 그 부분이 딱히 신경쓰이지 않다면 상관없지만 이미지의 선명함과 색감을 살리고 싶다면 이렇게 시도해보면 좋다. 먼저 스킨편집을 통해 이미지를 채워보자.
이렇게 채워 넣다보면 이미지가 선명한 색상이 아닌 검은색이 살짝 흐릿하게 나타나있는 것을 확인할 수 있다. 이렇게 설정된 이유는 문구와 자세히보기 URL을 넣었을때 글자 가독성을 높이려하는 이유일것이라 생각한다. 하지만 한사랑 티스토리는 일반 배너로 사용하기 위해 해당 효과는 없애기로 판단하여 HTML 수정작업을 하였다.
작업하는 방법은 사이드바 플러그인 작업과 비슷한 방식으로 시도할 예정이며, 해당 글을 보지 않더라도 작업할 수 있도록 작성하려한다. 사이드바 플러그인 만드는 방법이 궁금하다면 아래 링크를 통해 확인하자.
티스토리 사이드바 플러그인 HTML 배너 출력 활용해보기!
티스토리는 스킨을 자유롭게 편집할 수 있도록 HTML 편집을 제공해주며, 플러그인 사이드바 모듈이 있어 활용에 따라 블로그를 다양하게 꾸밀 수 있게 되어있다. 그 중 가장 마음에 들었던 HTML 배
hansarangcnc.tistory.com
이미지를 등록 후 '적용' 버튼과 미리보기 버튼을 눌러 이미지가 잘 출력됬는지 확인한다.
확인 후에는 F12키를 눌러 개발자 툴(DevTools) 창을 열는 데, 개발자 툴 창은 브라우저에 따라 다른 모습을 띈다. 구조는 같으며, 오른쪽 메뉴에 있는 버튼을 눌러 창을 분할해서 사용하는 것이 가장 편하다. 주관적인 생각이니 편한 모습으로 사용하길 바란다.
개발자 툴 창여는 방법까지 마쳤다면 왼쪽에 있는 점선상자에 커서가 있는 버튼을 눌러라. 누르게되면 비활성화 회색에서 활성화 파란색으로 바뀌는 것을 확인할 수 있다.
활성화된 상태에서 아까 올렸던 이미지있는 부분에 마우스를 가져다 놓으면 해당 이미지를 선택하는 것처럼 상자모양이 나온다. 상자 모양이 나올 때 해당 이미지를 클릭하고 개발자 툴 창을 확인해라. 그러면 해당 배너가 어떠한 스타일(디자인)을 가지고 있는지 나오게 된다.
하지만 바로 눌러서 보다시피 검은색에 대한 내용은 나오지않고 배너의 위치와 상태들에 대한 내용만 나오는 것을 확인할 수 있다. 확인하는 방법은 컴퓨터에서 색상을 출력할 때 RGB 코드를 가져와 사용하기 때문에 색상을 확인하려면 아래 이미지와 같은 모양을 기억하면 된다. 직접적으로 color라는 글을 써서 이것은 색상이라고 알리는 코드도 있지만 알려주지 않는 코드도 있기 때문에 RGB 수치와 색상코드가 있다면 이것은 색상을 설명하는 코드라고 생각하면된다.
깨알 Tip. RGB 색상 확인하기
원하는 색상코드를 알고 싶다면 포토샵에 색상을 눌러보아도 되고 가장 간단한 방법은 코드의 컬러칩을 눌러보면 된다. 컬러칩을 누르면 홈페이지 안에 있는 이미지 중 색상 하나를 골라 스포이드 모양으로 축출할 수 있으며, 아는 색상코드 번호를 입력해도된다.
이 외에도 색상 코드 옆에 있는 화살표를 누르면 각 코드별 수치값을 입력할 수 있으며, 원하는 색이 딱히 없고 디자인 확인만 하고 싶을 때는 위에 있는 색상 팔레트에서 아무거나 골라서 확인해보면된다.
확인해보았을 때 배너에는 검은색이 깔리지 않은 것을 확인할 수 있었다. 그러면 검은색은 어디에 깔렸는 가 확인하고자 한다면 앞,뒤를 확인하는 것이 좋다. 거의 배너 이미지보다 앞에서 표현되기 때문에 앞 코드를 확인 하는 것이 확실할 것이다.그렇게 앞코드를 확인해보았더니 앞코드에도 딱히 의심할만한 검은색이 없었다.
HTML 코드는 div나 li와 같이 태그를 직접 생성하는 경우가 있지만 그렇지 않는 경우가 있다. 이때에는 그렇지 않는 코드를 확인해주면된다.
그렇지 않는 코드들은 CSS를 통해 임의로 생성된 코드라고 생각하면 된다. 이 코드의 특징은 태그를 클래스나 id로 불러와 :before, :efter, :child 등 태그 뒷부분에 :(쌍점)을 뒤에 붙인다는 특징이 있다.
이런식으로 .area-promotion:before이라고 표기하는 데 이렇게 되면 .area-promotion 이라는 코드 뒤에 before라는 공간이 생성되는 것이다. 디자인을 적용할 수 있는 또 하나의 물체같은 느낌이라 볼 수 있다. 개념 이해까지는 원치 않으니 이렇게 표현된다는 것을 알아두자. 이렇게 생성된 공간은 HTML에서 아래와 같이 표기되는 데 확인을 위해 해당 코드를 한번 눌러보자. 누르면 드디어 우리가 원하던 색상코드가 나왔다. 항상 디자인 적용은 상단에 있는 것을 우선 시 하기 때문에 색상 코드도 Style 탭의 상단만 확인하자.
우리가 수정해야 할 부분은 backgraound-color 부분의 rgba(58,58,58,0.3) 부분이다. 해당 수치를 확인해본 결과 완전 검은색이 아닌 진한 회색의 색상이 투명도가 30%인 것을 확인해볼 수 있다.
우리는 어두운 느낌을 없애 배너 이미지의 색감을 살리기 위함이 목적이니 투명도를 아예 0으로 만들거나 background-color를 지워버려야 배너 이미지 색감을 나타낼 수 있는 것을 개발자 툴로 확인되었다. 결과는 둘다 사라져 이미지가 깨끗하게 보이나 차이점은 제거와 가린다는 차이점이다. 제거할 경우에는 나중에 필요할 경우 코드를 외웠다가 다시 입력해야하는 작업을 해야하며, 가릴경우엔 투명도만 다시 수정하면 된다는 것이다. 한사랑 티스토리는 나중을 위해 가리는 걸로 선택하였다.
개발자 툴로 확인하였다고 해서 블로그가 수정된 것은 아니다. 이 다음이 중요한 작업인데 이렇게 효과가 적용된 위치를 알게 되었으니 이제 진짜 효과를 적용할 단계이다. 해당 코드는 .area-promotion:before 라는 것을 알게 되었으니 이제 html 편집으로 들어가 CSS 탭을 눌러보자.
CSS 탭을 누르면 수많은 디자인 코드들이 있는 데 이 중에서 .area-promotion:before을 찾아야한다. 일일이 찾기엔 시간이 걸리니 ctrl+F를 눌러 찾아보자.
찾아보면 개발자 툴 창에서 했던 것처럼 background-color를 삭제하거나 수정해주면된다. 그 후 적용을 누르고 블로그 페이지로 넘어가면 우리가 원하던 배너의 색상이 원본 그대로 나오는 것을 확인해볼 수 있다.
이 방법은 문구가 써져있는 이미지나 그냥 배경으로써의 역할을 위해 사용하는 거라면 적용해보는 것이 좋다. 만약 문구가 없는 배경에 티스토리에서 제공하는 문구창을 이용할 생각이라면 위의 방법을 통해 투명 검은색을 씌워 가독성을 높이길 바란다.
[용어 정리]
background : 배경
color : 색상
background-color : 배경 색상
rgba : 투명도 설정을 위한 색상코드
# : 정해진 색상을 사용하기 위한 색상코드
rgb : 빨강, 초록, 파랑을 섞어 색상을 만들어 사용하기 위한 색상코드
[background-color, color 사용방법]
<div style="color : #7c4c4c;">
: 색상코드로 입력할 경우
* CSS에서 사용할 땐 class 선택자와 id 선택자로 호출 후 {color:#7c4c4c;} 적용
<div style="background-color : rgba(red 값, green 값, blue 값, opacity 값);">
: 빨강, 초록, 파랑, 투명도 수치가 있을 경우
* CSS에서는 { background-color : rgba(red 값, green 값, blue 값, opacity 값); } 적용
* 투명도 수치는 100% = 1, 30% = 0.3으로 표기
<div style="background : #357ccc;">
: 색상코드로 입력할 경우
* CSS에서는 { background : #357ccc; } 적용
색상은 rgba, #, rgb 등
다양한 방법으로 입력 가능하다.
'TIP' 카테고리의 다른 글
| 티스토리 표 HTML을 이용해 행, 열 동일한 넓이로 만드는 방법 (3) | 2024.08.22 |
|---|---|
| 네이버 스마트스토어 외부링크 거는 방법 네이버 링크로 변환하는 방법(25년 5월 28일까지 허용) (0) | 2024.08.08 |
| HTML 이미지 추가하고 싶은데 호스팅이 없다면 해결하는 방법 (0) | 2024.02.24 |
| 티스토리 사이드바 플러그인 HTML 배너 출력 활용해보기! (0) | 2024.02.23 |
| 2024 갤럭시 아카데미 혜택(삼성에듀, 에듀윌, 대성마이맥, 원더월, 코멘토, 다락원,) (0) | 2024.02.19 |