본문 바로가기

홈페이지만들기/Html_css&css3

 (27)
인포그래픽 아이콘사용방법 인포그래픽 아이콘사용방법 현재도 계속 추가되고 있는 인포그래픽 아이콘 (익스 11 부터 사용 가능합니다)​웹서버에 다운로드에서 사용할 수도 있으나 다운로드 없이도 사용이 가능합니다.인포그래픽 아이콘을 사용하기 위해서는 해당 소스를 header.php 파일 내에 중락 안에 있는 내용을 입력해주시면 됩니다.그리고 인포그래픽 아이콘을 이용하기 위한 페이지에서 가셔서 아래와 같이 입력하면 편하게 사용 가능합니다.​ex) php 파일에 직접 사용시 (해당 사이트에 가시면 아래와 같이 사용 할 수 있는 소스가 있습니다) fa fa-cloud 아이콘 전체 참고 일반적인 아이콘 종류별 표현 형식 세련된 글꼴 멋진 아이콘 (크기, 색상, 그림자) 참고아이콘 : http://fontawesome.io/icons/ HTML..
CSS hover 스타일값을 다르게 보여주고 싶을때 CSS hover CSS의 style hover는 마우스를 해당 객체 위에 올려놓을때 스타일값을 다르게 보여주고 싶을때 쓰면 됩니다.사용하는 방법은 아래를 보면 알겠지만, [적용할 태그:hover]형식으로 작성후 {} 안에 원하는 스타일을 지정해 주면 됩니다. p:hover, h1:hover, a:hover { background-color: yellow; color: green;font-size: 150%; }​ 링크 마우스 오버 외에 다양한 상태 hover 기능은 링크와 밀접한 관련이 있기 때문에 링크의 상태와 관련해 다양한 스타일을 지정할 수 있는 다른 태그들도 알아두어야 합니다. /* 아직 방문하지 않은 링크 */a:link { color: green; } /* 이미 방문한 링크 */a:visit..
HTML/CSS 참고링크 HTML/CSS과 관련된 참고 리스트HTML/CSS와 관련된 튜토리얼을 정리해 보았습니다. 네비게이션,탭,이미지 슬라이드,배경꾸미기등 여러가지의 참고 URL입니다.미리보기를 누르면 완성된 화면을 확인 할 수 있으니 참고 하시기 바랍니다. 구분 내용 링크 1 CSS3 Linear Gradient 효과를 이용한 배경꾸미기. [미리보기] 2 CSS 3D transforms을 이용한 3D 메뉴 코딩. [미리보기] 3 CSS3를 이용한 버티컬 네비게이션 메뉴 만들기. [미리보기] 4 부드러운 슬라이드 느낌의 드롭박스 메뉴. [미리보기] 5 CSS3를 이용한 오목한 버튼 이미지 코딩하기. [미리보기] 6 테이블 코딩이 필요한 가격표 테이블 코딩하기. [미리보기] 7 웹폰트와 배경이미지를 이용한 별 코딩. [미리보기..
css 정의와 3가지 적용방식 및 사용법 CSS 정의는 Cascading Style Shees 의 약어로 마크업 언어가 실제 표현되는 방법을 정의한 언어입니다.html에서는 레이아웃, 스타일등을 정의할때 사용하며 기본정의는 css 파일로 모두 정의해 왼만한 기본 설정은 모든 페이지에 일괄로 스타일을 적용시켜 많이 사용합니다. 퍼블리싱할때 html문과 소스코드를 분리하는데 CSS는 html문안에 표현하는 데이터와 디자인 분리를 용이하게 해줍니다. 하지만 지금은 거의 스타일시트는 기능별 형식별로 분류하여 각각의 파일을 분류해서 쓰는게 정석입니다.그럼 css에서 가장기본적으로 본다면 어떤형식에 표현들이 있는지에 대해 알아보도록 하겠습니다. [css 3가지 적용방식 및 사용법] inline 방식 (inline style sheet) 1타이틀cs htm..
css경로 설정 및 스타일시트적용 css경로 스타일시트 설정에 있어 절대경로와 상대경로를 이용해 불러오려는 과정에서의 정의를 해보자면 상대경로라는 것은 말그대로 적용하고자 하는 파일이 있는 위치에서 적용해 줄 파일을 찾아가는 것입니다. 그림에서 처럼 index.html에서 css를 불러오고자 한다면 폴더 두개를 올라가서 css폴더 안에 있는 style_name.css를 찾아야하기 때문에 ../../를 두번 적어주는 겁니다. 오른쪽 그림처럼 css폴더와 적용해 줄 html이 같은 위치에 있다면 그냥 css/style_name.css로 해주면 적용이 됩니다. 상위폴더로 찾아갈 필요가 없기 때문에 ../가 붙지 않아도 되는 겁니다. CSS에서 internal style shhet 방식을 통한 내부 스타일시트 방식을 적용시킬때 1234567cs..
2017의 새로운 10종류의 무료 글꼴 / 무료폰트 2017년 웹디자인 무료폰트 새로운 10종류의 무료글꼴 / 무료폰트 홈페이지를 제작 할 때 디자이너들이 무료폰트를 많이 찾지만 최근 출시 된 새로운 무료 글꼴이 많이 있기 때문에 그들 모두를 찾기에는 너무 어렵습니다. 사용자의 도움을 위해 지금까지 2017 즐겨 찾는 새로운 무료 글꼴을 10개를 찾아봤습니다. 하단의 빨간링크를 찾아가면 여러분들이 찾고 있는 것을 찾을 수 있습니다. 01. Entra Font 2017의 새로운 무료 글꼴, Entra는 로고와 제목에 사용을 추천Entra는 로고나 아이 캐칭의 제목에 사용하기 위해 설계된 원래 특이한 외형의 글꼴입니다. 현대 캡 전용 글꼴 날카로운 코너와 둥근 형태의 조합은 매우 독특합니다. Gatis Vilaks과 Wild Ones Design이 설계 한이..
html 슬라이딩 소스 참고하세요. html 슬라이딩을 이곳 저곳 찾아보다 드디어 찾았습니다. 하단 네비가 thum 이미지로 되어있는 슬라이딩 찾다가 좋은 자료를 찾았습니다모바일용이구요, pc에선 마우스 터치가 안되는데 모바일에선 잘 적용 됩니다.demo 폴더 안에 html 파일들이 있습니다. 맞는 자료가 있으면 사용 하시면 됩니다. 여러가지 종류가 많이 있으니 참고 하셔도 괜찮을것 같습니다.^^ 참고사이트 : http://flexslider.woothemes.com/thumbnail-controlnav.html .js----1234567// Can also be used with $(document).ready()$(window).load(function() { $('.flexslider').flexslider({ animation: "..
스타일시트 CSS Style margin 스타일시트 CSS margin 을 주는 방법CSS style중에 가장 많이쓰는 것은 CSS style margin입니다. CSS margin속성은 요소 주위에 공간을 생성하는데 사용됩니다. margin속성은 경계 외부의 공백의 크기를 설정합니다.CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각면 (상단, 오른쪽, 하단, 왼쪽)의 여백을 설정하기위한 CSS 속성이 있습니다. Margin - Individual SidesCSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.margin-top / margin-right / margin-bottom / margin-left모든 margin 속성은 다음 값을 가질 수 있습니다.auto - 브라우저가 여백을 자동으로 계산합니다.length..

티스토리툴바