웹 퍼블리싱: 가운데 정렬 하는 방법 CSS를 하다보면 가운데 정렬 시키는 방법들이 정말 다양하다는 것을 알 수 있다. 그런데 종종 가운데 정렬이 생각한대로 적용이 잘 안될 때가 있어서 답답할 때가 있다. 헷갈리기도 하고... 내가 가운데 정렬 시킬 때 쓰는 방법은 총 3가지인데, 공부할 겸 어떤 상황에 어떤 방식을 사용해야 하는지 정리해보려고 한다! 가운데 정렬 하는 방법 3가지 text-align: center; margin: auto 0; transform: translate(X, Y); text-align: center; : text의 정렬을 뜻하고, 'center'는 텍스트를 가운데에 정렬을 시킨다는 뜻이다. 말 그래도 '텍스트'만 가운데 정렬 시키는 방법이다. text-align를 적용하면 자..

티스토리 블로그: 제목 영역 꾸미기 티스토리 블로그 Portfolio 스킨으로 변경하였다. Portfolio 스킨의 가장 큰 특징 중의 하나는 포스팅한 글의 상단 제목 영역이 배경이미지로 채워져 있다는 것이다. 이번 튜토리얼에서는 이 상단 제목 영역은 간단하게 3가지 방법으로 꾸며보는 것이다. (변경된 화면은 지금 이 포스팅의 PC, Mobile 화면으로 확인할 수 있다!) 변경할 부분 글 제목 영역 화면 전체를 꽉채우는 스타일로 키우기 글 제목 영역의 배경 이미지를 스크롤 상관없이 고정하기 글 제목 영역 '어둡기' 조정하기 CSS: 글 제목 영역 키우기 아래 이미지처럼 원래 스킨에서의 글 제목 영역을 디스플레이 화면 크기만큼 키우려고 한다. 이미지로 꽉 채웠을 때의 시각적인 느낌을 개인적으로 좋아한다...

티스토리 블로그 꾸미기: Header 고정하기 Poster 스킨으로 상단에 슬라이더와 벽돌형 리스트를 추가하면서 블로그 리스(liis)의 첫 화면을 조금 바꾸었다. 그러다보니 화면 전체길이가 길어지게 되었고, 스크롤을 하면 헤더(Header)에 있는 로고가 잘 보이지 않아 아쉬웠다. 그래서 화면에서 항상 로고가 보이도록 헤더를 고정하기로 하였다. 현재 블로그 리스(liis)의 화면을 보면 스크롤을 하면 헤더가 화면 상단에 고정이 되어서 계속 노출이 되는 것을 확인할 수 있다. 투명도를 주어서 뒤에 콘텐츠가 살짝 보이게도 하였다. (수정하는 과정에서 여러가지 요소들의 스타일을 같이 바꿔줘야 하기 때문에 아래 튜토리얼이 조금 복잡해보일 수 있지만 티스토리는 html 블로그 만들기가 가능하니까 차근차근 흐름을..

티스토리 블로그 꾸미기: Poster 스킨에 로고 넣는 방법 티스토리 블로그에서 세련되고 멋진 스킨들을 무료로 제공하고 있다. 심지어 반응형으로 제작되어서 디바이스에 맞춰 디자인이 구성되고, 커버 디자인도 쉽게, 마음대로 바꿀 수가 있다. 티스토리 블로그를 처음 만들 때, 어떤 스킨으로 예쁘게 꾸며볼까 고민을 많이하다가 나는 Poster 스킨을 선택했다. 여러커버 디자인 중에 슬라이더가 화면 전체를 꽉 채우는 스타일이 마음에 들었기 때문이다. 그런데 유일한(?) 단점이 블로그 이름이 나오는 화면 상단(헤더, header)에 '로고 이미지'를 넣을 수 없다는 것이다. 다른 스킨들은 사이즈에 맞춰서 로고 이미지를 업로드 하면 노출이 자동으로 되지만, Poster 스킨은 텍스트로만 블로그 이름을 보여준다는 점..

티스토리 블로그 꾸미기: Favicon 파비콘이란? 즐겨찾기 아이콘이라는 뜻으로 주소창 앞에 작은 아이콘으로 표시되는 것을 말한다. 티스토리 블로그 내에서도 파비콘을 등록할 수 있어서 더욱더 자신만의 블로그를 만들 수가 있다. 파비콘은 확장자가 'ico'라서 아이콘 형태로 바꿀 수 있는 변환 프로그램을 써야한다. 파비콘으로 변환하기 전, 포토샵 같은 디자인툴로 이미지를 먼저 만들면 가장 좋지만, 디자인 툴이 없더라도 내가 원하는 이미지가 있다면 쉽게 만들 수 있다. 이미지를 먼저 준비한 다음, 파비콘 변환 사이트(http://icoconvert.com)에 접속한다. 파비콘 변환 사이트는 많지만, 아래 사이트가 용량도 줄여주고 설정도 여러가지 할 수 있어서 가장 좋은 것 같다! 01. 이미지 업로드 파비콘..

티스토리 블로그 꾸미기: Top Button 만들기 사이트 화면 길이가 길 경우 다시 맨 상단 위로 올라가는 Top 버튼이 있으면 편리하다. 내가 필요해서 붙인 Top 버튼. liis 블로그에도 오른쪽 하단에 위로 올라가는 화살표 이미지가 보일 것이다. 다들 익숙하게 알고 있을 탑버튼이 바로 이거다. html과 CSS를 함께 사용하기 때문에 퍼블리싱 초보들은 헷갈릴 수도 있지만, 아래 소스들을 각 알맞은 위치에 차근차근 넣어주면 쉽게 만들 수 있다. (소스는 COFS님 블로그에서 관련 내용을 토대로 만들었다.) html: Top 버튼 추가 나는 '티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 'footer' 태그 위에 추가하였다. 01. id값 id="MOVE_TOP_BTN"은 버튼 ..

티스토리 블로그 꾸미기: Progress Bar 만들기 liis 블로그 현재 이 포스팅에서도 보다시피, 스크롤을 내릴 때마다 페이지 상단에 진행 바(Progress Bar)가 나타난다. 전체 글의 어느 정도를 읽어는지 알 수 있어서, 긴 글도 끝까지 읽을 수 있도록 유도하는 역할을 한다. 나름 스크롤 내리는 재미도 있다^^ 티스토리는 html 소스를 직접 수정할 수 있어서 Progress Bar도 쉽게 만들 수 있다. 아래에는 현재 내 블로그에 들어가 있는 소스이다. (소스는 두드림님 블로그에서 관련 내용을 토대로 만들었다.) 소스 입력하는 위치 나는 '티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 html 소스 화면의 가장 아래에 다음 소스를 추가하였다. ↓ 세부적인 스타일은 다음과..