[티스토리 숏강좌 #3] 본문의 이미지 - 경계에 테두리 만들어 그림자효과넣거나 모서리 부드럽게 만들어주기

블로그에 글들을 쓰기 시작하면서

본문에 이미지를 삽입해서 텍스트 글과 함께 쓰다보면

이미지가 사진이 아니고, 문자가 들어가있는 배경이 하얀 스냅샷이면

어디까지가 내 본문의 텍스트이고 어디서부터가 이미지인지 경계가 구분이 안되어

본문이 불분명해져 가독성이 떨어질때가 있다.

 

 

이미지에 경계 효과를 주지 않았을때이다. 어디서부터 어디까지가 이미지인지 불분명하다.

그래서 이미지를 텍스트 중간에 삽입할때

이미지와 텍스트를 구분하는 방법을 알아본다.

이미지에 굵은 테두리를 그려 줄수도 있지만 여기서는 그림자 효과로 이미지에 입체감을 주어

이미지와 텍스트를 구분하는 방법을 쓰기로 한다.

 

 

이미지에 그림자로 경계효과를 주어 입체감을 살렸다

 

그리고 이미지의 모서리를 90도 각도로 사각형상태로 두지 말고 살짝 둥그럽게 만들어서

이미지를 부드럽게 만들어주는 효과도 같이 이용하는 방법을 시도해보도록 하자.

 

이걸 하기 위해서는 style.css 라는 스타일쉬트라는 프로그램을 원래의 스킨에서

살짝 바꾸어 주기만 하면 된다.  참고로 스킨의 주요 구성 파일은 style.css 와 style.html

그리고 나머지 이미지파일과 자바스크립트로 이루어져있다.  즉 스킨을 만들거나 변형해주려면

이 파일들을 만들어주거나 살짝 바꾸어주어야 한다.

 

여기서의 목적은 style.css 를 살짝 바꾸어주는 것이므로, 이 파일을 어디있는지 찾아서

어느 부분을 어떻게 바꾸어 주는지를 알면 된다.

 

1.  style.css 파일의 위치 찾아가기

 

우선 블로그의 관리자 페이지로 가야 한다. 

블로그의 관리자 페이지는 https://여러분의 블로그이름.tistory.com/manage 를 웹브라우저의 웹 주소창에

입력해주면 된다.  맨뒤에 manage 가 있음을 주목하라.

그러면, 왼쪽에 관리자 메뉴들이 나타나는데, 이중에서 꾸미기 > 스킨 편집 을 찾아 클릭한다.

 

다음으로,

오른쪽 상단 구석부분에서 "html편집" 이라고 쓰인곳을 마우스로 찾아 클릭한다.

 

다음으로,

위에  HTML | CSS | 파일업로드 라고 나타나는데, 이 중에서 마우스로 CSS 를 클릭해준다.

 

자, 여러분이 보고 있는 이 파일이 style.css 이다.   이제 이 파일에서 원하는 위치에 원하는 코드 조각을

삽입해주면 우리의 목적이 완성된다.

 

2.  코드 조각을 삽입할 위치 찾기.

 

이 파일안에서 우선 "imageblock" 이라는것이 있는지 없는지 검색해야 하는데, 이 파일안에서 이 단어를 검색하기 위해서는

우선 마우스로 이 파일 내부 영역을 아마데나 찍어주고,  PC에서는 컨트롤 키와 F키를 동시에 눌러준다. (맥에서는 커맨드키와 F키를 동시에 눌러준다.)  그러면 이 파일 첫번째 라인부분에 하일라이트가 생기고 커서가 입력을 기다린다.  이때 "imageblock" 을 입력해주고 리턴키를 누른다.  만약 이 파일안에 이 단어가 하나도 안들어 있으면 아무것도 찾아주지 않고 만약 찾게 되면 단어를 모두 노란색으로 보여준다.

오른쪽 스크롤바에도 가는 노란색의 가로선이 보여지는데 그 쪽으로 마우스를 스크롤 다운하면 그 지점에서 이 단어를 보여준다.

 

3. 코드 조각 삽입하기.

 

만약에  figure.imageblock 가 같이 있는 라인이 보이면 이 블락을    /* 와  */ 로 코멘트 처리해버리고

 

figure.imageblock {
        max-width: 95%;
        box-shadow: 7px 7px 6px 5px rgba(0,0,0,.44);
  border-radius: 3%;
}

 

로 바꾸어준다.

이파일  style.css 안에서 검색을 했는데도 imageblock 을 못찾으면, 이 파일의 가장 마지막줄에 가서 맨뒤에 위 블락을 삽입해주어도 되고, 아니면 figure 라는 단어를 다시 검색해보아서 figure 가 있는 마지막 블락에다 삽입해주어도 된다. 아래 그림을 보면 figure 를 찾아서 그 아래 부분에다 삽입해준 예를 보여준다.

 

참고로 box-shadow: 7px 7px 6px 5px rgba(0,0,0,.44) 에서 각각이 의미하는 바는 첫번째수는 아래위, 두번째는 수평방향, 세번째는 그림자의 흐릿한 정도, 네번째는 그림자의 크기 를 조절하는 숫자이므로 조정하면서 마음에 맞는 숫자를 찾아볼수 있다. 아니면 구글링해서

더 자세히 알아볼수도 있다.

 

대부분의 스킨이

figure 라는 아이디와 imageblock 라는 클래스를 사용하기 때문에

위 블락을 삽입하면 대부분 스킨에

적용이 되게 된다.

 

내 경우에는 Whatever 스킨의 변형된 버전을 쓰고 있는데

Whatever 스킨은 imageblock 을 css 파일안에 존재하지 않았고

대신 figure 를 찾아 figure 가 가장 마지막으로 쓰인 본문지점에다

아래 처럼 코드 조각을 삽입해 저장하였다.  이때 특정한 단어나 날짜를 코멘팅으로 집어넣어주어서

나중에 내가 기억을 못해도 이 부분이 내가 수정한 부분임을

표시해주는게 좋겠다. 이걸 표시안하면 수정할때마다 원본과 비교해야 하고 헷갈리게 된다.

 

 

 

4.  마지막으로

위의 코드 조각을 삽입했으면

오른쪽 위 구석에 "적용"을 찾아 마우스로 클릭해주면 이 버튼이 잠시 어둡게 변했다가 원래대로 돌아오는데

그러면 변경이 저장된 것이다.

 

이상입니다.

수고하셨습니다.