본문 바로가기

홈페이지만들기

 (72)
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 웹폰트와 배경이미지를 이용한 별 코딩. [미리보기..
워드프레스 Avada무료테마 워드프레스 Avada무료테마 Avada는 테마 이상이며 강력한 디자인 도구입니다. 워드프레스 Avada테마는 무료이며, 워드프레스 디자인을 많이 해봤다 하는 사람들은 다 아는 테마입니다. Avada는 사실상 모든 디자인 스타일을 만들 수 있습니다. 전문적으로 디자인된 데모는 Avada 옵션에서 완벽하게 구축되어 커스텀 코딩이 필요하지 않습니다. 모든 데모는 무료로 제공되며, 한 번의 클릭으로 쉽게 가져올 수 있습니다. 이 아름다운 템플릿 중 하나를 선택하여 사이트를 구축합니다. 각각의 템플릿은 필요에 맞게 사용자 정의 할 수 있습니다. 또는 시장에서 가장 고급 옵션 시스템을 사용하여 자신 만의 독특한 디자인을 쉽게 만들 수 있습니다. ▶ 드래그 앤 드롭 창의성, 확장 성 및 성능을 갖춘 Fusion Bu..
SiteOrigin의 테마 알아보기 SiteOrigin의 7가지 테마 알아보기 SiteOrigin의 워드프레스 홈페이지는 모든테마가 무료이며 반응형을 통해 유연하고 상호 플러그인에 아주 유용한 테마입니다. SiteOrigin의 테마 종류에는 Unwind, Vantage, North, Influence, Focus, Origami, Snapshot가 있습니다. SiteOrigin의 가장 큰 장점은 무료테마인데다 디자이너와 페이지 빌더 호환으로 상호간에 독립적이지 않아 어떠한 홈페이지를 만드는데 있어 탁월합니다. 01. Unwind 테마SiteOrigin Unwind는 최신의 유연한 다목적 테마입니다. 그것은 완전히 반응 망막 준비가되어 있습니다. 몇 가지 중요한 기능은 응답 성이 높은 메뉴, 화려한 애니메이션, 다양한 플러그인과의 긴밀한 통..
포토샵 소스열때 폰트가 없다는 느낌표가 나올때 Font수정 포토샵 소스열때 폰트가 없다는 느낌표 포토샵을 할때 가끔 만들어 놓은 소스를 다시 열어볼때 폰트가 없다는 표시가 나오는데 당황하게 됩니다. 포토샵 소스열때 폰트가 없다는 느낌표를 클릭하고 조치를 취해봐도 font style만 기본으로 변경된다. 이럴때 기존에 있던 폰트를 다시 설치하고 원상태로 복구하는 법을 배워보도록 하겠습니다. Font수정을 위해서 photoshop CS6버젼을 가지고 설명하겠습니다. 포토샵을 실행한 다음 본인이 만들어 놓은 소스나 무료로 받은 소스를 열어봅니다. 열었을때 바로 업그레이드가 뜨는데 우선 원본을 해치지 않으려면 업그레이드를 누르지 말아야합니다. 켄슬을 한다음 소스의 레이어를 보시면 아래와 같이 표지판처럼 삼각형으로 된 노란색 느낌표가 나옵니다. 노란색 느낌표를 더블클릭하..
포토샵 무료소스사이트 / 포토샵 단축키 포토샵 무료소스사이트 / 포토샵 단축키 포토샵을 배우기 위해서는 많은 사이트를 보고 이쁘게 만들고 싶다는 충동에 시작하곤 합니다. 그런데 포토샵을 처음 하실때 간단한 이미지 보정이나 귀여운 캐릭터를 만들고 싶어 접하는 사람들은 어떻게 해야하는지 난감해 합니다. 하지만 쉽게 하는 방법들은 많습니다. 우선 무료소스사이트를 찾아 다운로드 한 다음에 열어서 많이 보고 연습하시면 됩니다. 그리고 포토샵단축키를 외우시면 더욱 빠르고 편리하게 디자인 하실수 있습니다. 포토샵 무료소스사이트를 찾아봤습니다. 가각의 소스의 퀄리티는 다르지만 포토샵을 배우실때 유용하게 쓰실수 있을 것 같습니다. 참고하시기 바랍니다. https://pixabay.comhttp://www.freepik.comhttp://www.vecteezy..
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..

티스토리툴바