CSS 마진,배경,링크,테이블

마진속성을 이용한 수평 정렬

인라인 요소

텍스트나 <em>과 같은 인라인 요소를 중앙에 놓으려면 <text-align>속성을 이용

예)< p style ="text-align:center">

             <em>My Text</em>

     </p>

블록요소

h1,h2,p,table,div등과 같은 블록 요소를 중앙에 놓으려면 왼쪽 마진과 오른쪽 마진을 auto 로 설정하면 된다.

예)<p style="margin-left:auto; margin-right: auto; width: 50%>

    My Text

     </p>

width 를 지정하지 않으며 블럭요소가 전체 너비를 다 차지해서 효과가 없슴 무조건 지정할것.

배경색 설정

배경과 관련된 속성

background 한 줄에서 모든 배경 속성을 정의

background-attachment 배경 이미지가 고정되어 있는지 스크롤 되어 있는지 지정

background-color 배경색을 정의

background-image 배경 이미지를 정의

background-position 배경 이미지 시작 위치를 지정

background-repeat 배경 이미지 반복 여부를 지정

 

각 예제)

배경색

body { background-color: red; }

body { background-color: rgb(255,0,0); }

body {background-color: #ff0000; }

 

배경 이미지

body { background-image: url('back.gif'); } (수평이나 수직으로 반복되어짐)

background

• repeat : 가로 방향, 세로 방향으로 반복합니다.
• repeat-x : 가로 방향으로 반복합니다.
• repeat-y : 세로 방향으로 반복합니다.
• no-repeat : 반복하지 않습니다

배경이미지 부착

background-attachment

scroll : 배경이 요소와 같이 스크롤 된다. 디폴트값

fixed:배경이 뷰포트에 대하여 고정된다.

local: 요소의 콘텐츠와 같이 스크롤 된다.

 

배경 이미지 위치 설정

background-position 픽셀이나 퍼센트 단위로 지정

left top, left center, left bottom

right top, right center, right bottom

center top, center center center bottom

 

배경 속성 한 줄로 설정

예)

body { background:#ffffff url('back.gif') no-repeat right top)

           배경색                   배경이미지   no 반복    오른쪽상단

 

배경 이미지의 크기 설정

background-size 픽셀(px)나 퍼센트(%)단위로 지정가능

예)

div {

        width: 500px;

        height:100px;

        background: url(back.png);

        background-repeat: no-repeat;

        background-size: 100px 100px;

}

링크스타일

링크의 색상,폰트,배경도 설정가능4가지 스타일a:link : 방문되지 않은 링크의 스타일a:visited : 방문된 링크의 스타일a:hover :  마우스가 위에 있을 때의 스타일a:active : 마우스로 클릭되는 때의 스타일

*지켜야 할 규칙 : a:hover는 a:link 와 a:visited 다음에 위치해야 한다 a:active는 a:hover다음에 위치해야 한다.

예)<style>a:link { color:red; }a:visited { color:green; }a:hover { color:blue; }a:avtive { color:yellow: }</style>

리스트 스타일

리스트 속성list-style 리스트에 대한 속성을 한 줄로 설정한다.list-style-image 리스트 항목 마커를 이미지로 지정한다.list-style-position 리스트 마커의 위치를 안쪽인지 바깥쪽인지 지정한다.list-style-type 리스트 마커의 타입을 지정한다.

테이블 스타일

많이 사용되는 속성border 테이블의 경계선border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부width 테이블의 가로길이height 테이블의 세로길이border-spacing 테이블 셀 사이의 거리empty-cells 공백 셀을 그릴 것인지 여부table-align 테이블 셀의 정렬 설정

 

테이블의 경계

테이블의 경계를 css 로 설정하려면 border속성을 사용한다. 한 줄로 설정하면 다음과 같다.border : 5px  solid  red;              두께   스타일  색상꼭 순서를 지켜서 적도록 하자.

경계 통합하기

border-collapse는 테이블이나 셀의 경계선 표시 방법을 지정 하는 속성collapse 이웃하는 셀의 경계선을 합쳐서 단일선으로 표시한다.separate 이웃하는 셀의 경계선을 합치지 않고 분리하여 표시

테이블의 배경색

color,background-color 사용하면 됨

테이블 정렬

예)

td { table-align:center; }

테이블 캡션

테이블에 캡션을 추가할때 위치는 css 로 지정가능

caption-side 캡션의 위치지정(top/bottom/inherit)

공백 셀 표시 여부

emppty-cells 공백셀의표시여부 (show/hide/inherit)

마진속성을 이용한 수평 정렬
인라인 요소
텍스트나 <em>과 같은 인라인 요소를 중앙에 놓으려면 <text-align>속성을 이용

예)< p style ="text-align:center">

             <em>My Text</em>

     </p>

블록요소
h1,h2,p,table,div등과 같은 블록 요소를 중앙에 놓으려면 왼쪽 마진과 오른쪽 마진을 auto 로 설정하면 된다.

예)<p style="margin-left:auto; margin-right: auto; width: 50%>

    My Text

     </p>

width 를 지정하지 않으며 블럭요소가 전체 너비를 다 차지해서 효과가 없슴 무조건 지정할것.

배경색 설정
배경과 관련된 속성

background 한 줄에서 모든 배경 속성을 정의

background-attachment 배경 이미지가 고정되어 있는지 스크롤 되어 있는지 지정

background-color 배경색을 정의

background-image 배경 이미지를 정의

background-position 배경 이미지 시작 위치를 지정

background-repeat 배경 이미지 반복 여부를 지정



각 예제)

배경색
body { background-color: red; }

body { background-color: rgb(255,0,0); }

body {background-color: #ff0000; }



배경 이미지
body { background-image: url('back.gif'); } (수평이나 수직으로 반복되어짐)

background

repeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다
배경이미지 부착
background-attachment

scroll : 배경이 요소와 같이 스크롤 된다. 디폴트값

fixed:배경이 뷰포트에 대하여 고정된다.

local: 요소의 콘텐츠와 같이 스크롤 된다.



배경 이미지 위치 설정
background-position 픽셀이나 퍼센트 단위로 지정

left top, left center, left bottom

right top, right center, right bottom

center top, center center center bottom



배경 속성 한 줄로 설정
예)

body { background:#ffffff url('back.gif') no-repeat right top)

           배경색                   배경이미지   no 반복    오른쪽상단


배경 이미지의 크기 설정
background-size 픽셀(px)나 퍼센트(%)단위로 지정가능

예)

div {

        width: 500px;

        height:100px;

        background: url(back.png);

        background-repeat: no-repeat;

        background-size: 100px 100px;

}

링크스타일
링크의 색상,폰트,배경도 설정가능

4가지 스타일

a:link : 방문되지 않은 링크의 스타일

a:visited : 방문된 링크의 스타일

a:hover :  마우스가 위에 있을 때의 스타일

a:active : 마우스로 클릭되는 때의 스타일

*지켜야 할 규칙 : a:hover는 a:link 와 a:visited 다음에 위치해야 한다 a:active는 a:hover다음에 위치해야 한다.

예)

<style>

a:link { color:red; }

a:visited { color:green; }

a:hover { color:blue; }

a:avtive { color:yellow: }

</style>

리스트 스타일
리스트 속성

list-style 리스트에 대한 속성을 한 줄로 설정한다.

list-style-image 리스트 항목 마커를 이미지로 지정한다.

list-style-position 리스트 마커의 위치를 안쪽인지 바깥쪽인지 지정한다.

list-style-type 리스트 마커의 타입을 지정한다.

테이블 스타일
많이 사용되는 속성

border 테이블의 경계선

border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부

width 테이블의 가로길이

height 테이블의 세로길이

border-spacing 테이블 셀 사이의 거리

empty-cells 공백 셀을 그릴 것인지 여부

table-align 테이블 셀의 정렬 설정



테이블의 경계
테이블의 경계를 css 로 설정하려면 border속성을 사용한다. 

한 줄로 설정하면 다음과 같다.

border : 5px  solid  red;

              두께   스타일  색상

꼭 순서를 지켜서 적도록 하자.

경계 통합하기
border-collapse는 테이블이나 셀의 경계선 표시 방법을 지정 하는 속성

collapse 이웃하는 셀의 경계선을 합쳐서 단일선으로 표시한다.

separate 이웃하는 셀의 경계선을 합치지 않고 분리하여 표시

테이블의 배경색
color,background-color 사용하면 됨

테이블 정렬 
예)

td { table-align:center; }

테이블 캡션
테이블에 캡션을 추가할때 위치는 css 로 지정가능

caption-side 캡션의 위치지정(top/bottom/inherit)

공백 셀 표시 여부
emppty-cells 공백셀의표시여부 (show/hide/inherit)