티스토리 스킨 오류 수정-아이콘에 갑자기 글자가 뜨는 경우

티스토리를 열심히 가지고 놀다보면 이런 일이 생긴다.

댓글 창 위치도 바꾸고 티스토리 댓글과 라이브러리 댓글 tab 기능도 좀 부여하다보니, 하단 이미지가 망가져 버렸다.

이럴 때 어떻게 수리해야 할까?

가장 고지식한 방법은 f12기능키나 오클 뒤 '페이지소스'를 보는 것이다.

크롬에서 f12를 누르면 해당 페이지의 소스를 볼 수 있는데 여기서 찾아야한다.

빨간색으로 오류 난 곳을 표시 해 주면 고맙겠지만, 컴퓨터가 오류로 인식하지 않으니 고대로 화면에 출력 했을 것이고 고로 별도의 표시는 없다. 그저 '컨트롤 + f '단축키를 눌러 가장 눈에 띄는 글자를 기준으로 찾는 수 밖에...

html은 구조, css는 디자인!

아이콘과 글자가 겹친다는 것은 디자인이 망가졌다는 것이고 이는 css에 문제가 발생했다는 것이다.

그럼 html에서 css 어디 문제 있는지 어떻게 알 수 있는가?

html과 css의 연결점은 바로 class와 id이다.

html 태그 속성을 보면 class나 id가 있을건데, html에서 class 이름은 css에서 '.'으로 시작하고,

id는 css에서 '#'으로 시작한다.

우리는 이것을 근거로 css에서 또 컨트롤 + f를 이용 그 부분을 찾아서 수정하면 된다.

이번 과제에서 문제점은 '}'기호가 하나 더 들어 갔다는 것이다.

'{}'기호는 해단 태그의 속성을 넣는 부분으로 다른 속성과 구별 해 주기 때문에 하나 더 들어가고 덜 들어가고 해당 태그의 의미가 달라진다. 이제까지 소개 한 방법들은 오류 수정에 국한 된 것이 아니라, 티스토리에서 기본적으로 제공한 스킨에 자신이 원하는 곳에 원하는 기능을 넣을 수 있는 단서가 된다.