'css속성'에 해당되는 글 1건

배경에 관한 CSS 속성들을 학습합니다.

요즘 많이 사용하는 div태그를 사용하지요

그럼 div태그를 생성 해서 그 안에 텍스트를 집어 넣고 배경 색 부터 지정하는것부터 공부합시다.

div 태그를 생성 하구요. div태그 안에 p태그로 텍스트를 넣습니다

 div태그에 하늘색의 배경을지정할경우  속성은 background-color:

 CSS를 보면 색값을 skyblue라고 했습니다만, 16진수로도 값을 줄수 있고 rgb값도 줄수 있습니다

외곽선 설정

이번에는 위의 div태그에 외곽선을 줘보도록 합시다.

외곽선을 주기 위해서는 border속성을 사용합니다. 그리고 값은 3개가 쓰입니다.

구분은 띄어쓰기로 하구요 아래와 같이 사용하시면 됩니다.
div{border:굵기 선스타일 색값}

굵기는 외곽선을 굵기를 말합니다. 1px 2px 3px등으로 설정 하구요.

두번째 값인 선 스타일은 그냥 선으로 할지 점선으로 할지 등을 말합니다.

세번째 값인 색값은 외곽선을 색을 말하구요 16진수 rgb 영문이름 무엇을 줘도 무방합니다만 16진수를 대체로 쓰죠.^^

그리고 div의 크기를 길이를 300px로 했을때 border:1px를 적용하면 div는 그대로 300px의 크기를 갖고 div의 1px은 덧 씌워집니다.

즉 border를 포함한 길이를 재보면 302px이 됩니다.

그럼 두번째 값이 선 스타일은 어떤 종류가 있는지 보도록 합시다.

solid : 그냥 한줄

dotted : 점으로 표현.

dashed : 점선으로 표현.

double : 두 줄로 표현.

groove : 입체감 있게 표현.

ridge : 볼록하게 표현.

inset : 들어가 보이게 표현

outset : 튀어나오게 표현

그럼 선의 굵기를 2px로 하고 선 스타일은 groove로 하고 색값은 #ff0000 으로 해봅시다.

div{border:2px groove #ff0000}

div 모서리를 둥굴게 하기

모서리를 둥굴게 하기 위해서는 border-radius 를 사용합니다.
 div{border-radius:값}

값은 1px,2px등 자신이 원하는 값을 주시면 됩니다. 값이 클수록 더욱더 둥근모양으로 변합니다

이미지를 배경으로 넣기
div{background-image:url('주소');}
사용할 이미지 주소는 : /material/image-ITworld.jpg

 배경에 여러이미지 넣기
하나의 이미지가 가로로 세로로 계속 반복이 됩니다.

background 이미지가 반복되고 있는데요. 그것도 제어가 가능 합니다.
div{background-repeat:값}

background-repeat의 값은 4가지가 있으며 위에 소스를 테스트 할때는 우리가 아무것도 적지 않았는데요
default로 repeat가 적용되어서 그렇습니다. 그럼 알아 봅시다.

repeat : 배경 이미지가 가로와 세로로 계속 반복

no-repeat : 한번만 나타납니다.

repeat-x : 가로 방향으로 반복합니다.

repeat-y : 세로 방향으로 반복합니다.

그럼 repeat 를 제외하고 하나씩 테스트 해봅시다.

no-repeat
백그라운드 위치 설정하기

위의 백그라운드이미지의 위치설정도 가능 합니다.

div{background-position:가로값 세로값}

가로값에는 left,center,right,%가 있으며,
세로값에는 top,center,bottom,%가 있습니다.

왼쪽 상단에 위치 시키려면
div{background-position:left top}

가운데 위치 시키려면
div{background-position:center center}

하단의 가운데 위치 시키려면
div{background-position:center bottom}

왼쪽 상단에 %로위치 시키려면
div{background-position:0% 0%}
가운데에서 조금더 오른쪽으로 세로방향 가운데 위치 시키려면
div{background-position:70% 50%}
스크롤바 생성 시키기

우리가 div의 height:값을 300px이라고 하고 그 안에 들어간 text가 엄청 길다고 합시다.

그럴때 스크롤바가 생기게 하려면 ..
div{overflow:scroll}

위의 뜻은 div를 넘어서는 내용이 나오면 어떻게 할것인가 인데요 값으로는 hidden을 하면

넘어가는 부분은 표현이 되지 않고 숨김으로 변합니다. 또 scroll 을 사용하면 스크롤바가 생깁니다.

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)