워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠. 

 
현재까지 작업한 화면입니다. 헤더부분의 배경이미지가 가로로 repeat되고 있어서 지저분합니다. 워드프레스 테마스킨에는 이곳에 아무것도 없으니 이미지를 제거합니다. 이부분은 스킨위자드를 사용하고 있기 때문에 스킨위자드 설정창에서 제거합니다. 사이드바의 모듈박스는 제목과 상단부분이 많이 떨어져 있어서 세로 폭을 줄여야하고 박스와 박스 사이의 간격이 좁아서 늘려줘야합니다.

구글광고는 컨텐트영역 상단에 728X90 사이즈의 리더보드를 달것이고 사이드바 상단에 250X250 사이즈의 정사각형 광고를 달 것입니다. 사이드바 박스가 264픽셀이라고 좀 작은 느낌이 드는데 포토샵으로 수정한 이미지를 추가해서 늘리는 것도 좋겠습니다.

1. 헤더부분의 정리



헤더의 배경이미지는 스킨위자드에서 추가한 것이므로 스킨위자드 설정화면으로 들어갑니다. 1의 타이틀탭을 선택하고 2의 이미지 사용에 체크해제하면 바로 사라집니다. 그다음으로 3의 블로그 타이틀이 사이즈가 작습니다. 4의 텍스트를 클릭하면 우측하단에 글자의 크기를 조절할 수 있는 곳이 있는데 크기가 32픽셀이 최대입니다. 이를 두배로 늘리겠습니다. 우선 적용버튼을 클릭하고 나와서 CSS 편집창으로 갑니다.

 
블로그 타이틀 글자를 요소검사하면 하단의 CSS창에 #header h1 a 가 나옵니다. 이를 클릭드래그해서 CSS펀집창으로 옵니다. 이를 검색어로 넣고 검색하면 1부분이 나옵니다. 우측에서 2부분을 수정합니다. size 다음에 :32 를 넣고 저장한 다음 스킨위자드화면으로 가서 타이틀탭을 선택하고 텍스트를 32로 설정하고 적용버튼을 클릭하고 나옵니다. 이미 같은 숫자가 입력이 되어있더라도 스킨위자드에 들어가서 적용버튼을 클릭해야 위 CSS에서 입력한 값이 적용됩니다. 다시 CSS 편집화면에서 위 부분을 찾아보면 font-size:/*@title-font-size:32=*/64px/*@*/; 로 수정되어있습니다. 이제부터는 스킨위자드 창에서 8픽셀을 선택하면 40픽셀의 크기로 폰트가 나오게 됩니다. 


글자의 크기가 커졌습니다. 그런데 아래로 내여와있죠. 위로 올려줘야합니다. 요소검사를 해보면 html창에서 2에 마우스를 올리면 1처럼 글자부분에만 하이라이트됩니다. 이것은 하단의 3에 마우스를 올려도 마찬가지 입니다. 그러면 4의 <h1> 태그에 올리면 아래처럼 다른부분이 하이라이트 됩니다. 이것은 html 창에서 트리구조로 상위로 갈수록 부모요소가 선택되는 것입니다. 하단의 화살표방향으로 갈수록 부모요소가 선택되는 것도 마찬가지입니다. 


<h1>태그에 마우스를 올리니 2처럼 하이라이트됩니다. 색상이 바뀌었는데 이것의 의미는 무엇일까요. 파란색은 h1 글자가 블럭요소라서 좌우로 차지하는 영역이고 연두색은 패딩입니다. 즉 상, 좌로 패딩이 있다는 의미죠. 그래서 h1 태그를 클릭했더니 우측의 CSS창에 패딩 속성과 값이 나옵니다. 상단 패딩은 스킨위자드를 사용하고 있군요. 레이아웃에서는 게시글의 넓이를 기준으로 모든 영역이 같이 변동되지만 헤더부분은 타이틀 높이를 기준으로 변동됩니다. 그러니 title-height는 헤더의 높이를 말합니다. 이번에는 4의 블로그 타이틀을 클릭하여 5처럼 나옵니다. 여기서도 title-height를 사용하고 있군요. 이 스킨에서 title-height를 사용하고 있는 것은 이 두곳밖에 없습니다. 그러면 이 높이는 그대로 두고 CSS에서 3의 -65부분만 수정해주면 됩니다.


CSS 편집창에서 @title-height로 검색을 하니 두곳이 나옵니다. 2는 스킨위자드에서 설정된 타이틀 높이입니다. 3부분을 수정해줘야합니다. 수정할때는 항상 이퀄싸인을 제거해줘야합니다. 워드프레스의 패딩이 15필셀이므로 15로 만들려면 2의 수치인 109에서 94를 빼줘야합니다. 그래서 3을 아래의 빨간색 숫자로 수정해준다음, 4의 좌측 패딩은 0으로 수정합니다. 저장하고 스킨위자드로 갑니다. CSS에서 스킨위자드 부분을 수정하면 항상 스킨위자드에 들어가서 적용버튼을 클릭하고 나와야합니다.


스킨위자드에 들어오니 좌측패딩 수정한 것은 적용이 됐는데 상단패딩은 그대로 입니다. 타이틀탭을 선택하고 텍스트를 클릭하면 우측에 높이가 있습니다. 109죠. 그대로 놔두고 그 옆의 적용버튼을 클릭하고 아래에서 적용을 클릭하고 나간다음 다시 들어오면 정상적으로 나옵니다. 블로그 화면에서 새로고침해도 됩니다. 위 화면에서 글자의 크기가 좀 크니까 크기를 8픽셀로 선택하고 색상은 787878을 입력하고 입력버튼을 클릭해줍니다.

사실 타이틀을 폰트로 사용하는 경우는 드물지만 워드프레스와 똑같이 만드는데 의미가 있는 것이고 이런 과정을 거치고 난 다음에는 하나의 티스토리 스킨이 완성되는 것입니다. 

2. 메뉴부분의 정리



메뉴의 배경색을 요소검사하니 배경이미지를 사용하고 있습니다. 3과 4도 배경이미지를 사용하죠 필요없으니 모두 제거합니다. 3을 보면 하위 요소로 <ul> 태그가 있고 트리를 펼치면 하위요소로 메뉴 항목이 있습니다. 이곳은 배경이미지만 지울 것입니다. 선택자인  #header .blogMenu .topWrapBlogMenu 를 클릭드래그하여 복사하고 CSS편집창으로 가서 검색어로 입력합니다.


1과 2는 배경이미지만 담당하는 곳이므로 블럭설정해서 제거합니다. 3은 background속성 부분만 전부 지워줍니다. 대신에 메뉴아래에 점선을 삽입할 것이므로 border-bottom: 1px dotted #000; 을 삽입합니다.

아래 댓글의 자석씌님 질문에 대한 답변입니다. <!--블럭 설정이란 글자가 있는 부분을 클릭드래그하여 배경색이 파란색으로 나오게 하는 것을 말합니다. 블럭설정을 하는 이유는 한번에 여러개의 글자들을 선택하기 위해서이고 제거하거나 다른 곳으로 이동하기 위해 복사를 하게 됩니다. 여기서는 제거를 위해서 블럭 설정합니다. 속성이란 중괄호 안 { } 의 내용중 콜론( : ) 앞의 것을 말하고 콜론 다음은 값이라고 합니다. 그러니 background부터~~~top;까지 블럭 설정해서 Delete키를 눌러 제거하면 됩니다. 그자리에   border-bottom: 1px dotted #000; 라고 입력하면 됩니다.-->


html 편집창에서 스크롤바를 조금 내리면 1의 blogMenu가 보입니다. 빨간 네모친 두곳을 제거합니다. 저장하고 블로그화면에서 새로고침하면 글자의 색상이 흰색이라서 희미하게 보입니다.


글자부분을 우클릭하여 요소검사를하면 white로 나옵니다. 선택자인  #header .blogMenu li a 를 복사하고 CSS편집창으로 갑니다.


검색어로 입력하면 위처럼 나옵니다. 1의 색상 fff(흰색)를 000(검정)으로 바꿔줍니다. 저장하면 제대로 나오게 됩니다. 메뉴부분은 나중에 제이쿼리를 이용하여 예쁘게 꾸밀 것입니다.

3. 사이드바 수정



사이드바의 모듈박스 하나를 선택해서 요소검사를 하면 padding-top이 30픽셀입니다. 이것은 제거합니다. 그리고 4의 bottom-box div 태그를 클릭하면 마진이 없어서 모듈간의 간격이 좁습니다. 우선 선택자인 #sidebar h3를 복사해서 CSS창으로 갑니다.


#sidebar h3 로 검색해서 padding-top부분을 제거합니다. 5를 보면 모듈제목의 아래에 2픽셀의 실선으로 테두리가 있습니다. 이것을 1픽셀의 점선으로 바꿉니다. border-bottom: 1px dotted #d3d3d3; 로 수정합니다. .bottom-box로 검색해서 margin-bottom을 10픽셀 추가해주면 모든 모듈의 배경이미지 박스에 하단 마진이 만들어지므로 모듈간의 간격이 넓어집니다.


현재까지 수정한 것은 위처럼 나옵니다.


사이드바의 추가 수정은 다음글로 이어집니다. 이미지가 많아지다보니 글이 자꾸 길어지네요. 글이 길면 지루하죠.
 

댓글 (8)

댓글 목록

이츠하크 access_time

처음부터 다시하고 있습니다. 그것도 공부니까요.
그러면서 배우고 익히는 거죠. 오늘은 요기까지 문제없이 한번 해 보렵니다.^^

베누시안 access_time

그럼요. 많이 반복할수록 내것이 된답니다. 하시다가 나름대로 변경도 해보세요. 그러면 같은 것을 하는 것과 백배차이 날 정도로 실력이 늘어납니다. 뭔가 따라만 하다가 내 나름대로 만들어 보는 것이죠. 실수해서 망치고 망친 것을 찾아내면 이백배 효과가 있습니다. 틀린 것 찾는 것이 가장 효과있는 학습입니다.

이지연 access_time

보기에는 복잡해 보여도 설명해 주신 대로 따라하니까 쉽네요~ ㅎㅎ 잘 보고 갑니다~^^

베누시안 access_time

안녕하세요. 쉽다고 하시니 다행입니다. 댓글 감사드립니다.

자석씌 access_time

안녕하세요. 천천히 따라하고 있는데.. 중간에 막혀서요.

1과 2는 배경이미지만 담당하는 곳이므로 블럭설정해서 제거합니다. 3은 background속성 부분만 전부 지워줍니다. 대신에 메뉴아래에 점선을 삽입할 것이므로 border-bottom: 1px dotted #000; 을 삽입합니다.


블럭 설정이라는게 뭐죠? / background 속성 부분이라는게 정확히 어디서부터 어디죠? / 그리고 border-bottom: 1px dotted #000; 는 정확히 어디 부분에 어디 사이에 넣어야 하는거죠?

^^; 초보라 질문이 많네요.

베누시안 access_time

안녕하세요. 반갑습니다. 질문은 언제나 환영입니다. 위 해당부분에 답변을 넣었으니 참고하세요. 댓글 감사드립니다.

자석씌 access_time

감사합니다. ^^ 덕분에 도움 많이 되었습니다.

베누시안 access_time

안녕하세요. 도움이 되신다니 다행입니다. 글 보시다가 의문사항 있으시면 언제든 질문 던져주세요. 댓글 감사합니다.