[css/less] css 속성관련

css속성에 관해 알아봅시다.

돌아다니다가 마이피꾸미기관련 게시물들을 보면 어느정도 공통적인 질문들이있는데요.

그런것들은 전부 css로 해결할수있습니다.

속성에대해 알아봅시다.

-해당게시물은 출근을 너무 일찍해서 심심해서 작성하는것이므로 허접할 수 있습니다. 출처는 내머리속-

1.p-osition : 박스의 포지션을 결정하는 속성으로 3가지가 있습니다.
-relative, absolute, fixed-
relative는 display가 block인 박스들의 위치를 상대적으로 배치하는 속성으로 제일많이 쓰이고 중요한 속성값입니다.
absolute는 마찬가지로 display가 block인 박스를 절대적인 위치값을 줘서 마치 다른박스위에 떠있는 듯한효과를 주는 속성값입니다.
fixed는 절대 고정입니다. 위치값을 지정하면 그위치에서 페이지에 어떤움직임을 주더라도 해당 박스는 움직이지 않습니다. 이 역시 display는 block인 박스들에게 적용됩니다.

2.width : 박스의 가로값입니다.

3.height : 박스의 세로값입니다.

4.overflow : 이 속성은 마법의 속성이라고도 할수있습니다. hidden속성값을 줬을경우 가로세로가 다 지정되있다면 그안의 컨텐츠가 넘쳤을때 가려주고 가로만 지정이되어있다면 세로크기는 박스안쪽 컨텐츠의 크기에따라 자동으로 설정됩니다. 거진 필수에 가까운 속성이라고 할수있습니다. -y, -x 를 붙여줌으로써 스크롤 제어도 할수 있게 해줍니다.

5.display : 이속성은 박스모델의 성격을 제어하는 속성입니다. inline, block, inline-block 세가지가 있는데 애초에 각태그별로 부여된 디폴트 display속성이 있습니다. 하지만 이 속성을 따로 부여해줌으로써 그 값을 바꿀 수 있습니다.
대표적인 inline요소에는 img,span,a 등이 있고 block은 div,p 등이 있습니다. 그리고 inline-block인 요소들은 리스트 요소들이 되겠습니다. 매우 중요한 속성이 되겠습니다.

6.flaot : block속성의 박스들을 좌우로 정렬해줄때 쓰는 속성입니다. 좀 어려운 속성이죠. 박스들을 float시켜주게되면 float이 없는박스들과는 다른층을 가지게 됩니다.

7.clear : float을 해제해줍니다.

8.margin : 박스영역의 바깥쪽에 지정된 영역만큼 띄우게 됩니다.

9.padding : 박스영역의 안쪽으로 지정된 영역만큼 밀고 들어옵니다.

10.text-align : 해당박스안의 텍스트, 즉 inline요소들의 좌우 정렬을 맞춰줍니다. 속성값으로는 left,right,center가있습니다.

11.vertical-align : 박스들의 상하정렬을 맞춰줍니다. 속성값으로는 top,middle,bottom이 있습니다.

12.line-height : 텍스트를 기준으로 줄의 높이를 설정해줍니다.

13.background : 백그라운드에 이미지, 컬러 등을 설정합니다. 이속성은 여러파생이있지만 한줄로 쓸수있습니다.
예들들면 'background:url('ruliweb.daum.net/~~@$#@') no-repeat 50% 20%; 이런식으로 말이죠.
파생으로는 -p-osition, -image, -color, -size 가 있습니다.

14.opacity : 박스의 투명도를 설정합니다. 설정값은 0부터1까지.

15.font-weight : 폰트의 두께를 지정해줍니다. 속성값은 normal, bold 등이 있습니다.

16.font-size : 폰트크기를 지정해줍니다.

17.font-family : 폰트의 종류를 지정해줍니다.

18.여기까지만 할까봐여 다들 출근했네요 ㅋㅋㅋ
다음에 또 일찍 출근하면 다른것도 써볼게용 도움이 될런지는 모르겟네요 낄낄낄

[비타777]

이것은 좋은 자료 스크랩!

[투박안면]

이것은 좋은 자료 스크랩!(2)

[空我]

...외워서 쓰고 있는 내가 싫다 ㅠㅠ 직업병....

[빠라]

춫천

[I2U]

아주 좋소

[갸랑갸랑]

엉엉 배우고 갑니다