속성

 

 

• width, height: 가로 길이, 세로 길이를 의미

#box{ width: 100px; height: 60px }

 

 

• margin, padding:속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다.

+margin과 padding는 border 을 경계로 나뉩니다.

*{margin: 0; padding: 0;}
//설정하다보면나도모르는 공백이 나올 수 있는데 대부분 padding 값과 margin값을 없애주면 해결할수있다.


{margin: 0 auto;}
//양쪽 공백을 자동으로 맞춰 가운데 정렬

 

 

 

• color:색상, 정확히는 글자의 색상을 의미합니다.

#text1 { color: red; }
#text2 { color: #0A0; }
#text3 { color: rgb(0, 0, 150); }
#text4 { color: rgba(30, 150, 100, 0.5); }

 

 

• font:글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다.
  정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 쓸 수 있다는 소리입니다.

font-style	이탤릭체 등의 글꼴의 스타일 지정
font-weight	글자 두께
font-size	글자 크기
line-height	줄 간격
font-family	글꼴 (굴림, 돋움

 

#text1 { font-style: italic }	이탤릭체 등의 글꼴의 스타일 지정

#text1 {font-weight: bold;}	글자 두께

#text1 { font-size: 37px }	글자 크기

#text1 { line-height: 1.3;}	줄 간격

#text1 { font-family: "궁서" }	글꼴 (굴림, 돋움, …)

 

• text-align:속성은 텍스트의 정렬 방향을 의미합니다.

 

left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬

justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

 

#box1 { text-align: right; }
#box2 { text-align: left; }
#box3 { text-align: center; }

 

• background:태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다.

 

background-color :배경 색 
background-image :배경 이미지 
background-repeat :배경 이미지 반복 여부 
background-position :배경 이미지 위치

 

#box1-1{ background-color: green; }

#box2-1 { background-image: url("/images/attach/earth.jpg") no-repeat center center;}
//no-repeat center center->이 특성을 넣지 않는다면 그림이 반복되서 보인다

#box4-1{ background-position:center center;}
#box4-2{ background-position:30px right;}

 

• border:속성은 태그의 테두리를 설정하는 속성

 

border:1px solid: 1px의 크기로 테두리 설정

 

<style>
	.border-styles > p{
		margin: 2px 0;
		padding: 1px 3px;
		border-width: 2px;
		border-color: #aaa;
	}
</style>
<div class="border-styles">
	<p style="border-style: solid">solid</p>
	<p style="border-style: dotted">dotted</p>
	<p style="border-style: dashed">dashed</p>
	<p style="border-style: double">double</p>
	<p style="border-style: groove">groove</p>
	<p style="border-style: ridge">ridge</p>
	<p style="border-style: inset">inset</p>
	<p style="border-style: outset">outset</p>
</div>

 

border-radius 속성은 요소의 테두리를 둥글게 만들어줍니다.

 

#box{
	border-radius: 5px;
	border-radius: 1px 2px 3px 4px;
}

 

• visibility:속성은 태그의 가시성을 결정합니다.

 

기본 값은 inherit 입니다.

 

visible: 보임

hidden: 숨김 (자신의 영역은 계속 차지)

collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)

inherit: 부모 요소의 값을 상속

 

기본 값은 inherit 입니다.

 

#box1 { visibility: hidden; }

 

• display:속성은 요소를 어떻게 보여줄지를 결정합니다.

 

none : 보이지 않음

block : 블록 박스

inline : 인라인 박스

inline-block : block과 inline의 중간 형태

 

 

• float:라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

.content > img{ float: left }

 

• clear :float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다.

left:좌측 부유제거

right:우측 부유제거

both:양쪽 모두 제거

 

 

 

겹칠때 그공간을 비운다(안했을시 글자가 가려서 안보일수 있다.)

<p style="clear: both">This is second line with cleared property.</p>

 

clear 해주기 위해서는 float된 요소 다음에 clear하는 태그를 따로 삽입해야 하는 불편함이 있습니다.

 

• position:태그를 어떻게 위치시킬지를 정의

 

static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.

absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.

relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.

fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.

inherit: 부모 태그의 속성값을 상속받습니다.

 

 

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.

 

 

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.

 

 

#box1 { position:static }
#box2 { position:absolute }
#box3 { position:relative }
#box4 { position:fixed }
#box5 { position:inherit }

 

• cursor:해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

 

auto: 자동

default: 기본값 (화살표)

pointer: 손가락 모양 (클릭 가능한 버튼)

wait: 로딩

 

.btn-wait { cursor: wait }

 

 

 

 

 

 

 

출처:ofcourse.kr/css-course/CSS-입문

CSS 입문 - ofcourse