홈페이지만들기/Html_css&css3 (27) 썸네일형 리스트형 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 ); } 이렇게 구현 할 수 있습니다. 실제 예로 .. 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에 설치가 끝나시면 .. html 주석(comment) html 주석(comment) 주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다. 이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않습니다. HTML에서 주석을 표현하는 방법은 다음과 같습니다. 1cs 이러한 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있습니다.또한, 여러 줄에 걸쳐 주석을 작성해도 정확히 인식할 것입니다. 12345678910 이 부분은 조금 어려운 코드입니다. 위의 예제처럼 HTML 주석은 절대 웹 페이지에 나타나지 않습니다.HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해서 확인할 수 있습니다. 중첩 주석 HTML 주석은 HTML 코드의 어느 부.. CSS 글꼴 Font 속성 CSS에서 사용할 수 있는 font 속성 CSS를 사용하면 웹 페이지에 나타나는 글꼴(Font)을 다양하게 설정할 수 있습니다. 1. font-family 2. font-style 3. font-variant 4. font-weight 5. font-size CSS 글꼴 집합(font-family) CSS에는 두 가지의 글꼴 집합(font family)이 있습니다.- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("Times", "Courier" 등) font-family 속성font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다. font-fa.. Html5 표현태그 텍스트서식태그 Html5 표현태그 텍스트서식태그 Html5의 텍스트서식태그에는 ,,,,,,,,,가 있습니다. 이런 Html5텍스트 태그의 정의를 정확히 알아보고 활용하여 코딩과 디자인하는 방식을 알아보도록 하겠습니다. 그러면 초급용으로 Html5태그의 정의를 간단하게 설명해보겠습니다.(최대한 간단하게...) 12345678910cs 태그는 굵게 표시된 텍스트를 정의합니다.예를 들어본다면 아래와 같이 표현됩니다.1태그는 굵게 표시된 텍스트를 정의합니다.cs 태그는 굵게 표시된 텍스트를 정의합니다. 태그는 삭제된 텍스트를 정의합니다. 글자의 취소선이 표현되는 태그입니다.1글자의 취소선이 표현되는 태그입니다.cs 글자의 취소선이 표현되는 태그입니다. 태그는 일반적인 글자형태의 변형으로 강조 텍스트를 정의합니다.1일반적인 글.. CSS a href 링크 / div 링크 100% 버튼 CSS a href 링크 / div 링크 100% 버튼 사람들이 가장 많이 사용하고 있는 CSS a href 링크와 div 링크는 쉬우면서도 어려워 합니다. 그 이유가 버튼형으로 만들때 가장 많이 그렇습니다. 어려워 하시는 분들을 위해 간단해게 수정해서 사용할수 있는 소스를 만들어 보았습니다. 활용하여 막힘없는 코딩하시기 바랍니다. 기본체크----------• a:link - 체크하기전 링크• a:visited - 체크한 링크• a:hover - 사용자 버튼오버링크• a:active - 사용자 클릭링크 링크의 정렬과 target설정하는 방법을 아래에 정리해 놓았으니 참고 하시기 바랍니다. 이 예제는 몇 가지 CSS 속성을 결합하여 링크를 버튼으로 표시하는 고급단계 예제를 보여주었습니다. a href --.. 이전 1 2 3 4 다음
