본문 바로가기

홈페이지만들기

 (72)
style css의 하이퍼 링크 활용하기 Style Css의 하이퍼 링크 활용하기 최근에 많은 사이트들이 페이지롤링을 통하여 화면의 첫페이지에서 모든것을 설명하는 이벤트페이지 형태가 많이 보인다. 하이퍼 링크를 이용해 간단하게 설명해 보겠습니다. 1 2 3 링크01 ---------------------------------------- #1 cs 간단한 하이퍼 링크를 활용하여 페이지에서 지정된 ID로 #네이밍을 이용하여 링크로 이동할수 있습니다. 이름 속성은 HTML5에서 지원되지 않는 점을 참고하시기 바랍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 cs 1 2 3 4 5 ..
css 그라데이션 표현과 응용 css background css 그라데이션 표현과 응용 홈페이지를 만들기 위해선 필수코딩중 하나인 그라데이션을 이용해 표현해 보겠습니다. 테마를 이용한 워드프레스와 부트스트렙을 보면 전면 이미지라든가 슬라이드및 배너를 많이 보게 되는데 이런 이미지에 많이 쓰이는 것이 css로 그라데이션을 구현한 테마들을 많이 볼 수있습니다. 그래서 css를 이용하여 그라데이션을 구현하는 방법에 대해 알아보겠습니다. CSS로 그라데이션 구현 방식은 background 속성에 linear-gradient 값을 이용해 색상을 지정 할 수 있습니다. 색상 설정은 두가지로 표현하면 됩니다. 1 2 3 body { background : linear-gradient ( # 05FBFF , # 1E00FF ); } 이렇게 구현 할 수 있습니다. 실제 예로 ..
워드프레스 무료테마 DW Timeline (타임라인 스타일 블로그형 테마) DW Timeline (타임라인 스타일 블로그형 테마) 블로그 및 포트폴리오 사이트 전용 무료 타임 라인 WordPress 테마 - DW Timeline. Facebook에서 WordPress에 이르기까지 인기있는 타임 라인 레이아웃을 테마에 적용하고 고유 한 Timeline WordPress 테마를 만듭니다. DW Timeline블로그 테마는 DW의 초기 버젼으로 많은 테스트를 거쳐 만들어진 안전한 버젼이지만 반응형을 적용함에 있어서는 다소 부족한 부분이 많습니다. 하지만 반응형의 어색함을 해결 할 수 있는 방법도 있으니 추천합니다. 블로그 및 포트폴리오 사이트에 적합하며 DW Timeline은 최대 6개의 게시형식 및 유용한 기능을 지원합니다. 반응형의 특성을 부담없이 즐기시려면 메인에 뿌려지는 내용..
CSS 배경(컬러) color 및 image(이미지) 기울이기 CSS 배경 color 및 image 기울이기 요즘 홈페이지 제작하면서 슬라이스 백그라운드가 많이 나오는데 지금 구현하려고 하는 페이지는 일반적인 HTML 및 CSS로 슬라이스 된 배경을 나타내는 방법을 보여주는 간단한 예입니다. 간단하게 만들어 보았으니 참고하시기 바랍니다. html 구조 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Background with CSS HTML & CSS. Background with CSS HTML & CSS. 컬러를 백그라운드에 적용하여 슬라이형태로 만든 기본 CSS정의 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4..
html icon 아이콘 적용하기 html icon 아이콘 적용하기 홈페이지를 제작하다보면 인포그라픽이나 포인트로 적용되는 아이콘들이 정말 많습니다. 일반적으로 워드프레스나 부트스트렙같이 유동적 반응형 홈페이지들은 이런 아이콘도 잘 만들어져 있어 쉽게 쉽게 적용할수 있지만 개발자로서는 한계가 있습니다. 그래서 퍼블리셔들이 설치하고 적용해가며 쓰는 실전 노하우를 알려 드릴까합니다. FTP에 접속하여 될수 있으면 가장 최상위폴더에 적용하는 것이 좋습니다. 왜냐하면 적용하려는 CSS나 Source code(zip) 경로가 정해져 있기 때문입니다. 참고예제 > http://axicon.axisj.com 다운로드링크 > https://github.com/axisj-com/axicon/releases 다운로드 하시고 나서 FTP에 설치가 끝나시면 ..
Garfunkel (블로그 테마) 무료 워드프레스 테마 Garfunkel (블로그 테마) 무료 워드프레스 테마 워드프레스를 조금밖에 모르더라도 Garfunkel 블로그 테마를 설치하면 쉽게 글쓰기와 셋팅을 할 수 있습니다. 무료 워드프레스 테마인 Garfunkel 테마는 블로그형식이기도 하지만 포트폴리오나 뉴스, 그리고 잡지 같은 사이트에 활용하기도 정말 편리합니다. 인터페이스가 너무 간단해 설치를 하고나면 약간 횡한감도 있지만 그속에 배경이미지도 손쉽게 바꿀수 있는 기능이 있어 편리합니다. 그리고 대표 플러그인 잿팩과 호환하여 여러기능을 유동적으로 활용하며 만들수 있습니다. Garfunkel테마에 대해 자세히 알아보자면 아래와 같습니다. 1. Mansonry 레이아웃Garfunkel은 Pinterest 스타일 그리드의 모든 게시물을 표시하기 위해 Mason..
워드프레스 무료테마 Virtue Theme 워드프레스 무료테마 Virtue Theme 워드프레스는 무료테마만 잘 사용 해도 사이트제작이 가능하며, 업데이트와 관리가 편합니다 물론 초보자가 사용하기에도 아무 문제가 없습니다 오늘 부터는 무료테마 설치에서 부터 간단한 사이트제작을 해보겠습니다. 앞에서 올린 페이지 빌더를 이용한 사이트 제작을 다시 보신다면 도움이 되실것 같습니다. 좋은 테마는 매우 다양한 옵션을 갖추고 있으며, 다양한 옵션을 사용할 수 있고, 사용자 지정하기도 쉽습니다. SEO대열에 한발 앞서 있는 Schemamicrodata를 통합하고 있다. 깨끗한 현대식 디자인은 html 5및 css3로 제작되었으며 부트 스트랩의 응답성이 뛰어나고 반응이 뛰어나며 모바일 친화적인 방식으로 사용할 수 있습니다. 완벽한 온라인 상점을 디자인하는 데 ..
html 주석(comment) html 주석(comment) 주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다. 이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않습니다. HTML에서 주석을 표현하는 방법은 다음과 같습니다. 1cs 이러한 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있습니다.또한, 여러 줄에 걸쳐 주석을 작성해도 정확히 인식할 것입니다. 12345678910 이 부분은 조금 어려운 코드입니다. 위의 예제처럼 HTML 주석은 절대 웹 페이지에 나타나지 않습니다.HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해서 확인할 수 있습니다. 중첩 주석 HTML 주석은 HTML 코드의 어느 부..

티스토리툴바