[티스토리] 홈(카테고리) 화면 만들기로 배우는 CSS 태그

티스토리 홈(카테고리) 화면 만들기

 

 

티스토리 스킨만들기로 통해 웹 디자인 코딩법에 대하여 알아가고 있습니다.

지금까지 진행 된 것들을 잠시 돌아보고 시작하도록 하겠습니다.

티스토리 스킨을 제작하기 위해, 3개의 파일이 필요 했습니다 index.xml, skin.html, style.css 파일 입니다

index.xml 파일은 자신의 티스토리 블로그에 대한 여러가지 정보들이 입력되는 파일이였습니다

그리고 skin.html, style.css 파일은 지금 계속 수정 및 입력을 해 가는 HTML/CSS 파일이 입니다.

 

 

지금까지 상단 메뉴 만들기에 대하여 진행하였고, 바로 이전 포스팅에서는 상단 가로 메뉴 만들기에 대하여 알아 보았습니다.

※ 아직 블로그 초보라, 이전 포스팅 글을 읽어 보면 아쉬운 부분들, 어설픈 부분들이 많이 보입니다. 나중에 글을 다듬고 내용을 보완하는 작업이 조금은 필요 할 것 같습니다. 더욱 알찬 포스팅 기대해 주세요

잠시 이야기가 다른곳으로 빠졌습니다

 

이번 시간에는 티스토리 홈(카테고리) 화면을 만들어 보도록 하겠습니다.

홈 화면을 메뉴 눌렀을때와 동일하게 카테고리 형식으로 보여 주도록 할 것입니다.

제목, 내용, 대표이미지, 경로및날짜가 보여지는 목록 화면이 입니다.

 

먼저 HTML 태그 부분들을 보도록 하겠습니다.

 

<s_article_rep>  --블로그 글이 출력되는 영역

<s_index_article_rep>  --index 페이지 일 경우만 표시 되는 부분, 즉 이 태그 내에 구현 되는 내용은                                   인텍스페이지에서만 나타납니다

<div class="list_content"> --디자인을 위해 추가 되었습니다

<s_article_rep_thumbnail>  --대표 이미지 썸네일이 표시되는 영역입니다

<a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%ED%99%88%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC-%ED%99%94%EB%A9%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0%EB%A1%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-CSS-%ED%83%9C%EA%B7%B8" class="thumbnail_post">  --이미지 링크(보호글의 고유 주소 )

<img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/99181B3359C7C0A013">           --https://t1.daumcdn.net/cfile/tistory/99181B3359C7C0A013 대표이미지 원본주소입니다           --대표이미지를 그대로 보여주면 너무 클 수 있으니 섬네일 형태로 보여 주기 위한 부분입니다           --C150x150 이미지 사이즈           --<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99181B3359C7C0A013" style="width:150px;height:150px;">           --이런 방법으로 해도 동일하게 나타나겠습니다

</a>

</s_article_rep_thumbnail>

<a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%ED%99%88%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC-%ED%99%94%EB%A9%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0%EB%A1%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-CSS-%ED%83%9C%EA%B7%B8" class="link_post">

<strong class="tit_post">[티스토리] 홈(카테고리) 화면 만들기로 배우는 CSS 태그</strong> --글 제목입니다

<p class="txt_post">티스토리 홈(카테고리) 화면 만들기 티스토리 스킨만들기로 통해 웹 디자인 코딩법에 대하여 알아가고 있습니다. 지금까지 진행 된 것들을 잠시 돌아보고 시작하도록 하겠습니다. 티스토리 스킨을 제작하기 위해, 3개의 파일이 필요 했습니다 index.xml, skin.html, style.css 파일 입니다 index.xml 파일은 자신의 티스토리 블로그에 대한 여러가지 정보들이 입력되는 파일이였습니다 그리고 skin.html, style.css 파일은 지금 계속 수정 및 입력을 해 가는 HTML/CSS 파일이 입니다. 지금까지 상단 메뉴 만들기에 대하여 진행하였고, 바로 이전 포스팅에서는 상단 가로 메뉴 만들기에 대하여 알아 보았습니다. ※ 아직 블로그 초보라, 이전 포스팅 글을 읽어 보면 아쉬운 부분들, 어..</p>  --글내용 일부 입니다

</a>

<div class="detail_info">

<a href="/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/HTML%2C%20CSS%2C%20JavaScript" class="link_cate">프로그래밍/HTML, CSS, JavaScript</a>      --카테고리 링크 및 카테고리 명을 가지고, 카테고리 켱을 클릭 했을 경우 이동되도록 링크를 걸었습니다

<span class="txt_bar"></span>

<span class="txt_date">2017. 9. 24. 23:45</span>  --글쓴 날짜입니다

</div>

</div>

</s_index_article_rep>

</s_article_rep>

 

이렇게 하여 HTML 태그 코딩 부분이 완료 되었습니다.

블로그 글이 출력 되는 부분 안에, 인텍스일 경우 표시되는 영역을 선언하고, 그 안에 글 대표 이미지

글제목, 글 내용 일부, 카테고리 명, 글쓴 날짜를 입력하는 부분이였습니다.

이 부분이 표시 될 설정 수 만큼 반복해서 나타나게 될 것입니다.

 

---------------------------------------------------------------

글제목 글내용 이미지 카테고리명 작성

---------------------------------------------------------------

글제목 글내용 이미지 카테고리명 작성

---------------------------------------------------------------

글제목 글내용 이미지 카테고리명 작성

---------------------------------------------------------------

 

이런 식으로 말이죠 그럼 이 것을 어떻게 보기좋게 꾸미는가가 문제입니다.

CSS태그를 이용하여 꾸미게 됩니다.

 

1	#content {position:relative; top:50px;}
2	#content #container {padding-top:20px; margin:auto; max-width:900px; height:100%;}
3	.list_content{padding:10px; border-bottom:1px solid #efefef; min-height:150px;}
4	.list_content a {text-decoration:none;}
5	.tit_post {color:#666; font-size:20px; font-weight:800; font-family:"Noto Sans KR", sans-serif;}
6	.txt_post {padding:10px 0px 0px 0px; color:#666; font-size:15px; font-weight:100; }
7	.list_content .link_post{display:block;}
8	.list_content .thumbnail_post{float:right; max-width:130px; max-height:130px;                                        padding:0px 0px 15px 10px;}
9	.detail_info {padding:10px 0px 10px 0px;}

CSS 코딩 부분을 보도록 하겠습니다

 

8번 라인을 보도록 하겠습니다 대표이미지 섬네일로 표시 되는 부분입니다

대표이미지는 오른편에 표시되도록 하기 위해 float를 이용하여 위치를 오른쪾으로 설정하였습니다 그리고 가장 큰 크기를 130px로 설정하였습니다. 원하는대로 크기를 설정하면 되겠습니다. 

그리고 글자들과 조금 틈을 위해 padding로 간격을 주었습니다

 

5번 라인을 보도록 하겠습니다 제목 부분으로 폰트 설정을 합니다

color로 글자색을 설정하고, font-size로 글자 사이즈 ,font-weight로 굵기를 설정합니다 그리고 글꼴을 설정합니다 

글꼴의 경우, 설정한 글꼴이 없다면 다음 설정 된 것이 적용되고 모두 없다면 기본 설정 값이 적용됩니다.

또한 한가지, 만약 한글과 영어 글꼴을 다르게 하고 싶다면, 한글이 없는 글꼴을 앞에 두고, 뒤에 한글 글꼴을 두면한글과 영어 글꼴이 다르게 적용되어 나타나게 되겠습니다.

굵기와 사이즈를 표현하는 방법도 다양하게 있습니다. 수치로 표현할수도 있고 상대적으로 설정할 수도 있습니다.

더 자세하게는 다음에 한번 포스팅 하도록 하겠습니다.

 

6번 라인은 글 내용을 디자인 하는 부분입니다

 

4번 라인은 text-decoration:none 부분이 들어 있는데, 글 내용의 링크 속성 글들의 밑줄을 없애는 부분입니다

 

1번 2번 라인의 position 은 위치를 지정하는 태그 입니다 2번 라인의 margin:auto 값과 함께 적용되어, 중앙에 내용을 보여 주기 위하여 사용 되었습니다. 

 

 

디자인 된 화면을 확인 해 보도록 하겠습니다

 

 

 

여기까지 티스토리 홈 카테고리 화면을 만들어 보았습니다