티스토리로 만든 서울IR네트워크 블로그입니다. 최대한 심플하게 작업된 사이트이며, 콘텐츠 내용을 알차게 보일 수 있도록 꾸민 블로그 사이트입니다. 콘텐츠는 간단하게 6개 정도만 보이도록 설정하였고요. 반응형으로 제작된 티스토리형 블로그 사이트입니다 아래의 버튼을 클릭하면 현재 운영하고 있는 서울IR네트워크 블로그를 볼 수 있습니다. 사이트 바로가기 이 사이트는 주문 제작에 의해서 제작이 되었으며, 기획안을 주시면 디자인 작업 > 디자인 수정 및 확정 > 코딩 작업 > 최종 수정 및 확정 작업을 통해 완성됩니다. 보통 디자인 1주, 코딩 1주, 수정 1주 정도 작업 시간이 소요됩니다. 자세한 문의는 카톡 webstupids로 추가후 문의주셔도 되구요~ 오른쪽에 메세지 아이콘을 클릭해서 물어보셔도 됩니다.^^
CSS에서 수정 된 곳 /* mediaquery */ @media (max-width:1110px){ .container {width: 100%;} .header .nav {display:none;} .header h1 {float: none; text-align:center; padding-top: 11px; font-size: 26px;} .m_nav {display:block; } /* #tt-body-index */ #tt-body-index .cont_skin {margin-top:0;} #tt-body-index #intro {display:none;} #tt-body-index #cMain {width: 100%;} #tt-body-index .article_skin .list_content..
티스토리 블로그에 채팅창 만들기 이 기능은 쇼핑몰을 운영하고 있거나 상품을 판매하는 사이트에 정말 유용하게 쓸 수 있는 기능입니다. 저도 오른쪽 하단에 메세지 창을 설치하였습니다. 아직 사용한 지 몇 시간 밖에 안되서 그 효율성에 대해서는 정확히 말 할 수 없지만, 개인적으로 매우 좋은 시스템 같습니다. 이 기능을 실제로 개발을 한다고 하면 어마어마한 시간과 돈이 들어 갈 것입니다. 저희는 간단하게 회원가입을 하여, 우리가 사용하고 있는 블로그에 설치해보도록 하겠습니다. 이 기능은 블로그 뿐만 아니라 쇼핑몰이나 홈페이지에 사용하여도 무관합니다. 사이트 바로가기 고객과 팀을 위한 채팅 기능으로서 여러가지 기능을 제공합니다. 서비스, 분석, 이메일, 앱, 마케팅등 활용성이 다양하고 여러가지 플랫폼을 지원합니..
HTML에서 수정 된 곳 what We Do The World Bank Group works in every major area of development. We provide a wide array of financial products and technical assistance, and we help countries share and apply innovative knowledge and solutions to the challenges they face. Three priorities guide our work with countries to end poverty View Our Work Next Contant US Tistory Blog Branding through experience bui..
CSS에서 수정 된 곳 /* cate */ .cate {} .cate .tt_category {} .cate .tt_category .link_tit {display: none} /* 분류 전체 보기 */ .cate .tt_category .category_list {overflow: hidden;} .cate .tt_category .category_list li { position:relative; float: left; width: 25%; height: 500px; background:#ccc; cursor:pointer; } .cate .tt_category .category_list li:before { content:''; width: 100%; height: 100%; background:..
CSS에서 수정 된 곳 /* what */ .what { padding: 10% 0; } .what h3 { position:relative; font-size: 12px; font-weight: 700; text-transform: uppercase; padding-left: 6%; } .what h3:before { content:''; width: 50px; height: 2px; background:#000; position: absolute; left:0; top:6px; } .what p { padding: 4% 6%; font-size: 27px; } .what a { margin-left: 6%; display:inline-block; padding: 10px 20px; background..
백그라운 색 변경 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 레드로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때 사용합니다. 배경색을 핑크로 표현할 때..
버튼 표시 방법 button button button button button button button button button button button button button button button button button button button button button button 큰 버튼 표시 방법 button button button button button button button button button button button button button button button button button button button button button button 작은 버튼 표시 방법 button button button button button button button button bu..
알림 뱃지 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 글씨 옆에 작은 라벨을 표현할 때 사용합니다. New 문장 속에서 쓰는 뱃지 문장 속에서 표현할 때 사용합니다...
주의 표시 방법 alert blue1 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue2 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue3 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue4 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue5 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue6 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue7 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue1 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue2 : 이것은 주의 및 주목을 위한 표시 방법입니다. alert blue3 : 이것은 주의 및 주목을 위한..
리스트 표현 방법 리스트는 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트는 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트가 2단 구조인 경우는 이렇게 표현됩니다. 리스트 스티일은 이런식으로 표현됩니다. 여기는 리스트 2단 구조입니다. 여기는 리스트 2단 구조입니다. 여기는 리스트 2단 구조입니다. 리스트 스티일은 이런식으로 표현됩니다. 리스트 스티일..
제목 표현 방법 h1 : 제목의 크기를 설정합니다. h2 : 제목의 크기를 설정합니다. h3 : 제목의 크기를 설정합니다. h4 : 제목의 크기를 설정합니다. h5 : 제목의 크기를 설정합니다. h6 : 제목의 크기를 설정합니다. 제목 h1 제목 h2 제목 h3 제목 h4 제목 h5 제목 h6 텍스트표현 방법 mark : 글씨를 강조할 때 표시합니다. bold : 글씨를 볼드체로 나타내고 싶을 때 사용합니다. italic : 글씨를 기울이고 싶을 때 사용합니다. dot : 글씨에 점선으로 표현하고 싶을 때 사용합니다. mark : 글씨를 강조할 때 표시합니다. bold : 글씨를 볼드체로 나타내고 싶을 때 사용합니다. italic : 글씨를 기울이고 싶을 때 사용합니다. dot : 글씨에 점선으로 표현하..
CSS에서 수정 된 곳 /* container */ .container {width: 1100px; margin: 0 auto; /* background:rgba(0,0,0,0.5); */ } /* header */ .header {overflow: hidden; position:relative;} .header h1 {float: left; padding-top:25px; padding-bottom:10px; color: #000; letter-spacing:6px;} .header .nav {float: right;} .header .nav .contact {position: absolute; right: 0; top:25px; border: 1px solid #000; padding: 10px 40..
안녕하세요! 부트스트랩이라는 기능을 이용하면 다음과 같은 디자인을 누구나 쉽게 만들 수 있습니다. 티스토리에서 글쓰기 작성시 좀 더 쉽고, 깔끔하고, CSS를 몰라도 쉽게 사용할 수 있도록 만든 티스토리용 부트스트랩입니다. 원래 부트스트랩은 트위터에서 만든 CSS 프레임웍입니다. 티스토리에도 이런 기능이 있었으면 하는 마음에서 만들어 보게 됐습니다. 아직 만들고 있는 단계이고 실험적인 단계이므로 버그가 있을 수 있습니다. 아무쪼록 많은 도움이 됐으면 좋겠습니다. 사용방법 사용방법은 다음과 같습니다. 우선 소스를 다운 받고 연동 작업이 필요합니다. 한번만 연동하면 다양한 디자인의 구성을 표현 할 수 있습니다. 이 방법을 사용하기 위해서는 html에 모드에서 작업을 해야 하며 p태그는 사용하지 않습니다. H..
요즘 들어 티스토리를 블로그를 만드는 블러거들이 많습니다. 딱딱하고 틀이 정해져 있는 네이버블러그 보다는 자유롭고 소스수정이까지 가능한 티스토리의 인기는 조만간 타 블러그의 순위를 무찌르고 1위에 올라가지 않을까~ 생각합니다. 저도 몇 개의 티스토리 블러그를 운영하고 있지만 티스토리 블러그는 장점이 많습니다. 그럼 지금부터 티스토리 블러그를 왜 써야하는지 대하여 알아보겠습니다. 우선 티스토리 블러그는 2017년 되면서 디자인도 깔끔하게 많이 변했습니다. 티스토리의 관리자 페이지는 사용자 중심의 UI가 정말 훌륭합니다. 누구나 쉽게 컨트롤 할 수 있고 디자인도 무척 깔끔합니다. 이번에 10년만에 개편한 관리자 페이지는 어떤 사이트의 관리자 페이지보다도 훌륭합니다. 티스토리 관리자 분들의 정성이 돋 보이는 ..
- Total
- Today
- Yesterday