<![CDATA[프리21제작센타]]> http://www.free21.net/xe/ ko Sat, 24 Oct 2026 07:12:48 +0900 Sat, 24 Oct 2026 07:12:48 +0900 XpressEngine <![CDATA[사이트 로딩속도 - 웹폰트 나눔고딕]]> http://www.free21.net/xe/1900 http://www.free21.net/xe/1900 http://www.free21.net/xe/1900#comment

https://happist.com/523999/xe-tips%EB%82%98%EB%88%94%EA%B3%A0%EB%94%95%EC%9D%84-%EA%B0%80%EC%9E%A5-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

2위@font-face를 이용하는 대신에  import 방식을 이용해 css 파일에 한줄 추가하기( 더 빠름)

/ 서버에 직접 웹폰트 업로드해서 사용하기

 주의사항 ; 맑은 고딕체를 웹폰트로 사용해서는 안됨(저작권있음)

 기본지식:네이버의 나눔고딕, 나눔바른고딕 / 구글+아도비의 본고딕

             브라우저별 지원폰트파일 유형 : eot파일은 ie만 적용가능 / woff는 모든 브라우저에서 가능(ie6~ie8에서는 적용안됨) / woff2(용량30%줌)는 크롬과 파이어폭스에서만 적용됨

                                             

]]> Thu, 21 Dec 2017 17:12:43 +0900 <![CDATA[Unused CSS Check Tool : html 마크업에서 사용중인 css 선택자와 미사용중인 선택자를 선별해주는 도구입니다.]]> http://www.free21.net/xe/1889 http://www.free21.net/xe/1889 http://www.free21.net/xe/1889#comment

http://nuli.navercorp.com/sharing/fe/uc

]]> Wed, 13 Dec 2017 11:25:17 +0900 3 <![CDATA[웹폰트 사용하고 페이지 접속시 글자가 변하는 현상 문제..]]> http://www.free21.net/xe/1787 http://www.free21.net/xe/1787 http://www.free21.net/xe/1787#comment

웹폰트를 제일위에 두기

]]> Tue, 29 Aug 2017 15:26:27 +0900 <![CDATA[margin:0 auto와 text-align:center]]> http://www.free21.net/xe/1782 http://www.free21.net/xe/1782 http://www.free21.net/xe/1782#comment 틀자체를 중앙정렬시에는 margin:0 auto ;
틀안의 내용물을 중앙정렬시에는 틀에 text-align:center;

]]> Mon, 26 Jun 2017 21:02:38 +0900 <![CDATA[position:relative]]> http://www.free21.net/xe/1781 http://www.free21.net/xe/1781 http://www.free21.net/xe/1781#comment position:relative;
position은 위치를 뜻하고 relative는 상대적인 뜻...
자기자신을 기준(윗부분과 좌측부분을)으로 위치값이 설정된다..
원래 자기위치영역에는 다른 요소들이 오지 못하며..자유로이
위치이동을 할 수 있다...

]]> Mon, 26 Jun 2017 20:06:20 +0900 <![CDATA[파비콘넣기]]> http://www.free21.net/xe/1764 http://www.free21.net/xe/1764 http://www.free21.net/xe/1764#comment http://esajin.kr/28
]]> Fri, 16 Jun 2017 13:34:20 +0900 <![CDATA[!important]]> http://www.free21.net/xe/1702 http://www.free21.net/xe/1702 http://www.free21.net/xe/1702#comment

/*1번*/

li{
  color:#3333FF !important;
  }

 

 /*2번*/


 li.etc{/*클래스명이 etc인 li에게만*/
  text-transform:uppercase;
  color:#999999;
  }

 

1번과 2번중에 스타일이 우선적으로 적용되는 대상은 1번보다 더 구체적인 2번마크업대상에 스타일값이 적용된다.

 

여기서 내가 강제적으로 최우선적으로 적용되게 하는 값이

 !important;

이다..

]]> Mon, 15 May 2017 13:15:22 +0900 <![CDATA[스타일 적용 우선순위]]> http://www.free21.net/xe/1701 http://www.free21.net/xe/1701 http://www.free21.net/xe/1701#comment ...
]]> Mon, 15 May 2017 13:15:01 +0900 <![CDATA[배경 background]]> http://www.free21.net/xe/1616 http://www.free21.net/xe/1616 http://www.free21.net/xe/1616#comment

배경색,배경이미지설정하기

 

background:#444 url(lamp.jpg) no-repeat 10px 10px;

                       색        이미지          반복여부      위치(x.y)

 

x위치값에 : left,center,right 배치

y위치값에 : top, center, bottom 배치        

 

no-repeat 반복안하고 한번만 보여줌

repeat-x 수평으로 반복

repeat-y 수직으로 반복         

]]> Fri, 12 May 2017 14:45:02 +0900 <![CDATA[line-height]]> http://www.free21.net/xe/1608 http://www.free21.net/xe/1608 http://www.free21.net/xe/1608#comment

line-height : 라인높이 .줄높이,텍스트입력칸의 높이

line-height속성은 블럭태그에만 적용된다

a태그에 위 속성을 적용하려면 display:block; 해야 한다

단위 : em ~배

영역안에 배치된 텍스트를 수직중앙위치하려면

영역의 높이값과 동일하게 line-height값을 설정하면 된다

 

<style type="text/css">
div{
 width:100px;
 height:100px;
 border:#666 1px solid;
 text-align:center;
 line-height:100px;
 }
</style>
</head>

<body>
<div>주제</div>
</body>

]]> Fri, 12 May 2017 12:06:55 +0900 <![CDATA[div태그(그룹태그,묶음태그)]]> http://www.free21.net/xe/1599 http://www.free21.net/xe/1599 http://www.free21.net/xe/1599#comment
div태그(그룹태그,묶음태그) : 블럭태그(쌓여지는 성질)
 
비슷한 종류,역활,위치의 컨텐츠를 묶어주는 경우에 필요
 
. div의미:division(분할)
. 기본형식 <div></div>
 
. div에 고유이름을 부여 id
. 기본틀만들기(float):상단,좌측,우측,하단 - 배치(css)
 
  css설정하기 : 이름{속성:값;}
 
 
 
/ div의 기본스타일
 
    투명
 
    옆으로 꽉참
]]> Thu, 11 May 2017 12:28:56 +0900 <![CDATA[마크업]]> http://www.free21.net/xe/1595 http://www.free21.net/xe/1595 http://www.free21.net/xe/1595#comment

마크업이란 컨텐츠의 의미,역활을 표시하는 것을 말하며

마크업하는데 쓰이는 언어가 마크업언어인 html이다

hyper

text

markup

language

]]> Wed, 10 May 2017 21:13:13 +0900 <![CDATA[ul,ol태그]]> http://www.free21.net/xe/1594 http://www.free21.net/xe/1594 http://www.free21.net/xe/1594#comment

ul(unordered list - 순서없는 목록)

 .표시

 

ul은 li들의 묶음

여러개의 li들이 있는 경우 ul로 묶어준다..단순히 묶음을 의미

컨텐츠를 포함하고 있는 것은 li이고 ul보다 더 중요하다.

 

li는 하나만 있을 수 없으며, ul은 하나의  li만 포함하는 경우는 없다.

 

ol(ordered list - 순서있는 목록)

1,2,3 표시

 

    <h2>실시간 인기검색어</h2>
    <ol>
        <li>이선희</li>
        <li>아이유</li>
        <li>겨울왕국</li>
        <li>에이핑크</li>
    </ol>

]]> Wed, 10 May 2017 21:11:13 +0900 <![CDATA[목록태그 li]]> http://www.free21.net/xe/1593 http://www.free21.net/xe/1593 http://www.free21.net/xe/1593#comment

li는 list,목록,항목

동급의 비교대상들을 li로 처리한다...

단일항목을 li로 처리할 수 있다,예를 들어 메뉴의 각 항목(회사소개,제품소개,고객센타)같은 경우는

단일컨텐츠이다

 

다중항목인 경우에도 li로 처리할 수 있다.

예를 들자면 인덱스의 news항목 갤러리항목등의 경우는

제목과 게시물항목등 여러개의 마크업된 컨텐츠가 들어있다 .

이 경우 전체를 하나의 항목을 보고 li로 마크업할 수 있는 것이다

]]> Wed, 10 May 2017 20:59:08 +0900 <![CDATA[링크 태그 a]]> http://www.free21.net/xe/1592 http://www.free21.net/xe/1592 http://www.free21.net/xe/1592#comment

문서연결태그 <a> anchor 닻

외부링크:다른html문서 연결.이동

<a href="ooo.html" target="_self">텍스트</a>

href="불러올 문서"

target="보여줄 창지정" : _self:현재 문서가 열린창에 ,_blank : 새창에

내부링크:현 문서내의 특정위치로 연결.이동

<a href="#top">ooo</a>

 #top : id가 top인 요소(마크업태그)

 내부링크사용시 id를 이용한다

]]> Wed, 10 May 2017 20:57:48 +0900