이전 글부터 테마 수정을 시작해서 헤더와 글박스 부분을 수정했습니다. 이번 글에서는 이미지의 모서리를 둥글게 하고 테두리를 넣는 방법과 검색 박스의 검색 버튼을 수정해보겠습니다.
1. 이미지의 수정
현재의 테마에는 이미지에 대해서 모서리를 둥글게 한다거나 테두리를 만들어 놓고 있지 않습니다. 좌측 상단의 아이콘은 약간 둥글게 돼있지만 이미 처음부터 포토샵으로 둥글게 만들어서 그런 것이죠. 이미지 테두리를 둥글게 만들려며 img 태그에 대해서 스타일을 정해주면 되는데 어떤 부분을 대상으로 하느냐가 문제입니다. 무작정 img 태그에 대해서만 명령을 내리면 테마 내의 모든 이미지가 둥글게 처리됩니다. 그래서 글 내용 중에 있는 이미지만 하려고 할 경우 해당 요소를 검사해서 선택자를 알아냅니다.
위처럼 요소검사를 하니 img 태그가 나오는데 이것을 대상으로 하면 안된다는 것이죠. 그래서 어떤 부분만 특정하려면 부모요소를 찾습니다. 큰 이미지의 부모요소는 entry 선택자로 돼 있습니다. 선택자가 class로 돼있으니 다음처럼 테마 편집기에서 입력합니다.
.entry img {
border-radius:5px;
border:1px solid red;
padding:5px;
background:white;
}
위처럼 입력하고 저장한 다음 블로그 화면에서 새로고침하면 아래처럼 나옵니다. 테두리 색상을 빨간색으로 했는데 이미지의 배경색이 어두워서 티가나지 않아 그랬습니다. 테두리와 이미지의 사이에 여백을 5픽셀 주고 여백의 색상은 흰색으로 했습니다. 여기서 의문점은 위에서 이미지 테두리를 둥글게 한다고 했는데 이미지 자체는 각이 져있죠. 이것은 이미지에 테두리를 동시에 설정하면 그렇고 테두리를 제외하고 위에서 border-radius 부분만 설정하면 이미지 자체가 둥글게 됩니다.
이제 모든 글박스의 이미지가 위와같이 나타날겁니다. CSS란 이처럼 한번의 명령으로 모든 이미지에 대해 설정을 변경할 수 있습니다.
2. 검색박스 수정
현재 검색박스를 보면 검색어를 입력하고 우측의 돋보기 아이콘을 클릭하도록 돼있습니다. 그런데 검색어를 입력한 다음 이 아이콘을 클릭해도 말을 듣지 않습니다. 엔터키를 치면 되지만 이런 검색박스를 해놓으면 방문자가 다시는 안올겁니다. 물론 처음 테마를 선택하고 이런 현상이 있다면 다른 것으로 교체했겠지만 작업도중에 이런 증상을 발견했다면 난감하죠. 어찌됐든 수정해서 사용해야합니다.
요소검사를 하니 이미지가 있으며 검색박스는 대부분 두개의 input 태그로 이루어집니다. 하나는 검색어를 입력하는 부분과 다른 하나는 제출(submit)입니다. 그래서 아래의 div 태그를 열어보니 둘다 있습니다. 두번째 input 태그를 클릭하면 블로그 화면에서 아무것도 인식되지 않고 div 태그를 클릭하면 검색박스의 하단을 가리키고 있습니다. 그러면 이것을 이동해서 돋보기 아이콘에 배치하면 됩니다. 요소의 이동은 포지션을 사용합니다. 이거 워밍업 과정이 어려운 과제를 만나서 포기하는분도 계시겠네요.
해당 input 태그를 클릭하고 CSS 창에서 보면 display:none;으로 기본적으로 나타나지 않게 해놨습니다. 우측의 체크박스를 클릭해서 해제하면 이미지가 나타납니다. 왜 이렇게 해놨는지는 모르겠네요.
.searchform .searchsubmit {
display:block;
position: absolute;
right: 0px;
top: 0px;
}
스타일시트 편집기에 해당 선택자를 대상으로 위처럼 입력합니다. display:block;은 display:none;의 반대 역할을 하는 것으로 이미지를 나타나게 합니다. 포지션을 절대위치로 지정하고 오른쪽을 기준으로 0, 상단을 기준으로 0픽셀에 위치하게 하면 아래처럼 나타납니다. 이 기준이란 것을 부모요소에 상대위치가 지정돼 있으면 부모요소를 기준으로 합니다.
사이드바를 클릭하니 포지션이 상대위치로 지정돼 있어서 사이드바를 기준으로 배치돼있죠. 이것을 input 태그의 직속 부모요소를 기준으로 재 배치하려면 아래처럼 form 태그에 상대위치를 지정합니다. 물론 위에서 top의 수치를 마이너스로 입력하면 아래로 내려오겠지만 만일 다른 위젯을 검색박스 위에 배치한다면 다시 위치가 바뀌겠죠.
.searchform .searchsubmit {
display:block;
position: absolute;
right: 0px;
top: 0px;
}
.searchform { position:relative; }
위와같이 하면 이제 이미지가 돋보기 위치로 오게됩니다.
돋보기 아이콘을 덮고 있으니 그대로 사용해도 되겠으나 위로 10픽셀 올려주고 이 이미지를 투명하게 하면 돋보기 아이콘이 나타나게 됩니다. 또한 테두리도 있으므로 나타나지 않게 합니다.
.searchform .searchsubmit {
display:block;
position: absolute;
right: 0px;
top: -10px;
background: transparent;
border: none;
}
.searchform { position:relative; }
이제 돋보기 아이콘에 마우스를 올리니 포인터 커서가 나타납니다.
정리하자면
1. 요소의 이동은 절대위치 포지션으로 한다.
2. 절대 위치 포지션은 부모요소에 상대위치 포지션이 설정돼있어야한다.
위 두가지만 이해해도 포지션의 개념을 확실히 아는 것입니다.
사실 CSS라는 것이 어려운 언어는 아닙니다. 레이아웃에 관한 언어이기 때문에 배치에 관련된 것만 잘 알아도 그 다음부터는 아주 쉽습니다. 예를 들어 폰트의 여러가지 속성에 대해 잘 알필요는 없습니다. 그냥 책이나 참고 사이트를 보고 나오는대로 입력만 하면 되죠. 하지만 레이아웃은 상황에 따라서 변화무쌍하기 때문에 자주 연습하고 체득해야 비로소 뭔가 혼자서 만들 수가 있습니다.
오늘은 여기까지 하고 다음 글에서는 404 템플릿 파일의 수정을 해보겠습니다. 이전 글의 하단에서 언급한 티스토리 스킨이 거의 완성돼가고 있습니다. 한 방문자님이 좋다고 예약까지 하시더군요. 내일까지는 완성하도록 하겠습니다.
테마 수정 코드-->
테마수정코드1120.txt
