홈페이지 제작할 때 유용하게 사용하는 파비콘 만드는 법

블러그머니/블로그 운영 Tips 2019. 3. 25. 17:18

홈페이지 제작할 때 유용하게 사용하는 파비콘 만드는 법

 

 

 

 

오늘은 홈페이지나 쇼핑몰에서 자주 보게 되는 파비콘에 대해서 포스팅합니다.

 

파비콘(favicon - Favorites와 Icon의 합성어)이란

인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

 

아주쉽게.. 네이버는 검색창 네이트는 빨간 다이야...그 즐겨찾기 등록하면 보이는 쪼만한 아이콘이요.

만드는건 어렵지 않으나.. 워낙 사이즈가 작다보니 원하는대로 만들기 쉽지 않네요.. ^^

 

간단한 이니셜 파비콘 쉽게 만들수 잇는 사이트

http://www.antifavicon.com/

 

투명바탕 파비콘, 바탕화면 즐겨찾기 아이콘 만들기 쉬운 사이트

http://tools.dynamicdrive.com/favicon/

 

위 이미지는 이곳 홈페이지에서 만드는 방법을 소개해 드렸으며

이곳 아이티 월드 코리아에서도 여기 홈페이지에서 만든것입니다.

 

16*16 Size 로 만드셔야 잘 적용 되고요...

 

cafe24는 상점관리>상점운영 관련 설정>검색태그/복사방지 설정

 

파비콘 적용 탭에 저장해 놓은 화일을 upload 만 해 주시면 되고요..

 

HTML 수정이 필요하신분은

index.html 또는 index.htm, index.php, index.asp 등과 같은 파일을 오픈하시고

 


<head></head>

사이에.

<link rel="shortcut icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />

 

위 같이 붙여넣은 다음 도메인주소와 경로에 맞게 설정해주면 되요

 

저작자표시

'블러그머니 > 블로그 운영 Tips' 카테고리의 다른 글

블로그 방문자 늘리는 카카오스토리 가입하는 방법  (0) 2018.06.24
상업적 사용 가능한 무료 동영상 및 사진 구하기  (0) 2018.02.21
해외 검색 사이트에 티스토리 등록하는 방법(2)  (0) 2018.02.20
해외검색사이트에 블러그 등록하여 방문자 늘리기  (0) 2018.02.20
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[CSS 기초강좌] 선택자 > 클래스 선택자(Class Selector)

홈페이지제작/CSS 2018. 1. 8. 09:18

[CSS  기초강좌] 선택자 > 클래스 선택자(Class Selector)

 

 

 

오늘은 CSS강좌 기초 클래스 선택자에대하여 학습해 봅니다.
CSS클래스는 요즈음 홈페이지 제작 할때 많이 적용되고 있음으로 잘 학습해 두시기 바랍니다.
기초를 잘 이해하셔야 나중에 쉽습니다. 따라서 코딩도 해보시고 실행시켜서 결과도 확인해 보세요


클래스 선택자

클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.

속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어
.abc

는 class 속성값으로 abc를 갖는 요소를 선택합니다.

클래스 선택자 앞에 아무 것도 없으면

클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다. 즉 .abc는 *.abc와 같은 의미로
<h1 class="abc">Lorem</h1>
<p class="abc">Lorem</p>

모두 선택합니다.

클래스 선택자 앞에 무언가 있으면

클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어
p.abc

는 class 값으로 abc를 갖는 p 요소를 선택합니다. 이렇게 하면
<h1 class="abc">Lorem</h1>

은 선택되지 않고,
<p class="abc">Lorem</p>

는 선택됩니다.

예제 1

class 값으로 abc를 갖는 요소는 파란색으로, class 값으로 xyz를 갖는 ul 요소는 빨간색으로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .abc {
        color: blue;
      }
      ul.xyz {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="abc">Lorem</h1>
    <p class="abc def">Phasellus lacinia tempus mauris eu laoreet.</p>
    <ul class="xyz">
      <li>Dolor</li>
      <li>Amet</li>
    </ul>
    <p class="xyz">Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
  </body>
</html>

 

클래스 속성의 값이 여러 개이면

class 속성은 여러 개의 값을 가질 수 있습니다.
<p class="abc xyz">Lorem</p>

이 경우 CSS 코드 순서대로 적용됩니다.

예제 2
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
      .abc {color: blue;}
      .xyz {color: red;}
    </style>
  </head>
  <body>
    <p class="abc xyz">Lorem Ipsum Dolor.</p>
    <p class="xyz abc">Lorem Ipsum Dolor.</p>
  </body>
</html>


클래스 속성의 값을 abc xyz로 하든 xyz abc로 하든, CSS에서 .abc를 먼저 .xyz를 나중에 정의했으므로 .xyz가 적용됩니다.

 


저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

[CSS 강좌] 표(table) 과 배경색 꾸미기  (0) 2018.01.10
[CSS 기초강좌 ] 아이디 선택자(ID Selector)  (0) 2018.01.09
[CSS 강좌 ]홈페이지의 글자 타입 선택자(Type Selector)  (0) 2018.01.05
[CSS강좌] 전체 선택자(Universal Selector)  (0) 2018.01.04
[기초CSS 강좌 ] 반응형 레이아웃 만들기(홈페이지만들기)  (0) 2018.01.02
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

공지사항



카테고리

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
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

티스토리툴바