<![CDATA[프리21교육센타:css3기초]]> http://www.free21.net/xe/css3_basic ko Wed, 27 May 2026 00:06:46 +0900 Wed, 27 May 2026 00:06:46 +0900 XpressEngine <![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[배경 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[clear:both]]> http://www.free21.net/xe/1560 http://www.free21.net/xe/1560 http://www.free21.net/xe/1560#comment

clear:both

위 속성은 float속성이 지정된 마크업태그뒤에 오는 대상에게 지정하는데..

float된 대상 뒤에 오는 것은 위치가 뒤틀려지게 된다.끌려올라가서

제 위치를 유지못하게 된다...

보통의 경우 하단영역에 clear속성을 적용한다

]]> Fri, 28 Apr 2017 13:46:06 +0900 <![CDATA[외부스타일시트]]> http://www.free21.net/xe/1533 http://www.free21.net/xe/1533 http://www.free21.net/xe/1533#comment / 외부스타일시트(*.css)
 스타일태그를 별도의 외부파일(*.css)에 저장
 여러(다량의)문서 스타일을 일괄조정,통일성있게 설정해줄수 있다

 

1css화일 생성및 설정
   css화일생성 : file > new > blank page > css 
   화일명.css로 저장


2 외부링크 설정(외부스타일화일 연결)

   html문서와 css파일을 연결하여 html문서요소의 스타일을 지정한다.
력 -
  <head>
       <link rel="stylesheet" type="text/css" href="화일명.css">
  </head>

  * rel :relative 연관의

     type: 형식

      href : hyper reference (참조)

]]> Thu, 20 Apr 2017 15:09:53 +0900 <![CDATA[position]]> http://www.free21.net/xe/1552 http://www.free21.net/xe/1552 http://www.free21.net/xe/1552#comment

position : 위치

 

position은 컨텐츠의 위치를 지정하기 위해서 사용을 함.

 

margin으로도 컨텐츠의 위치를 지정할 수가 있다.

그런데 position을 사용하는 경우가 있는데 그것은 바로....

일정방향으로 배치(열)되지 않고 이탈되어 특정위치에

배치될 때는 position을 사용한다

 

이때 특정기준점에서 거리를 재서 left값과 top값을 지정하게 된다

position:absolute;(절대위치.특정기준점에서 측정된)

left:값;

top:값;

 

그리고 특정기준점역활을 할 대상(바로 위)에는

position:relative; 선언해주면 된다.

 

또한 position으로 위치지정한 대상은 다른 대상에게 영향을 안주고 안받는다.

margin으로 처리한 대상들은 서로의 간격을 밀어서 위치가 변동이

되는데 반해서...

]]> Thu, 27 Apr 2017 11:31:34 +0900 1