CSS 꾸미기 기술들

< 크기 >

[ 개발 방법 ]
웹페이지 => 개발자도구 => Elements => 각 태그별 픽셀 확인

[크기지정 단위]
px : 16px 기본 

- 직접 고정값으로 크기를 준다. 

 

% : 100% 기본

- 상대값이다

=> 이걸 이용하면 창 크기에 상관없이 %로 주어지므로, 형식을 유지하며 적용 가능 

 
em : 1em 기본 (배수) 

 

[크기지정 요소들]

font-size : 16px; 
width / height  : 200px; 
border 

margin 

padding

 

 

---

 

 

 

[ Box모델 ]
: 태그는 기본적으로 다 Box 형태로 이루어져 있다. 

=> 이 Box 의 속성을 이용해서 위치조정 / 꾸미기 가능 

 

< 1. border  : 외곽선 >

border-width:20px;  두께
border-style:solid;  선 종류 / dashed 점선 
border-color:lime; 

=> 한방에 편하게 표현
h1{border:10px  solid  lime;}


< border-radius > 

- 둥근 border 
h1 {border:10px solid lime; border-radius:30px;}



< 2. margin :  외부 여백 ( border - border 간격 ) >  

 

- margin 쓸거면 먼저 width 속성을 줘야 한다.
그래야 그 너비를 기준으로 margin을 설정
=> width-margin 은 세트! 

 

margin : 50px; 

- 상하좌우 전체 적용

margin-top : 50px; 

margin-left : 20px; 

- 이런식으로 각각 조정 가능 

- 4개 한번에도 가능 (시계방향)
margin : 0 30px 0 30px  (위 오른 아래 왼 ) 

 

*margin : auto; 

- 가로 중앙정렬 (자동) 많이 사용한다

margin 0 auto;

- 위아래 여백0  + 가로 중앙 
(이렇게도 많이 사용) 



< 3. padding : 내부 여백 ( 내용물 - border 간격 )  >

 

- margin 과 동일하게 작동 

padding : 50px; 전체적용 

padding-left:20px; 부분적용 

 

 

< 4. width / height >

width : 500px;

- 태그 가로길이 
height : 200px;

- 태그 세로길이 

 

박스모델 ( border margin padding height weight )
=> 다 기본값이 주어져 있다. 계산해서 해야 레이아웃 구성 잘 됨

( 개발자 도구 사용 - 웹 ctrl+shift+i )

=> 태그(내용물) 길이 / 너비 
= height + 2*(margin + padding + border);
= wieght + 2*(margin + padding + border);

ex) 
h1, p, img {

border:10px solid lime;
margin:50px;
padding:5px;
width : 300px; } 

 

 

 

---------


< 글꼴 >
기본제공 
serif  /sans-serif  / mono-serif 

font-size : 16px; 

font-weight : 10px; (굵기)
font-style : italic; 

 

font : italic bold 32px; 

 

* text-align : center;  

- 정렬 위치 center / left  / right 

 

text-decoration : underline; / none;   

- 밑줄 / 없음 

< 색상 >

적용대상 
color: 텍스트   
border-color: 외곽선
background-color :  배경 

 

키워드 사용 

color : red; blue; green; yellow; pink; black; white; ... 

rgb 0~255 
빨강 + 초록 +  파랑 
color:rgb(255,0,0); 빨강 
color:rgba (255,0,0, 0.5); 
rgba => 투명도주기 (0~1) 

16진수 (2개씩. 붙여서씀 / 0~99~ff)
color:#ff 00 00 빨강 
color:#00 ff 00 초록 
color:#00 00 ff  파랑
color:#00 00 00 검정
color:#ff ff ff 흰색 

 

 

< shadow > 음영

shadow : 좌우, 위아래, 흐림도, 색상;  

text-shadow : -10px -10px  5px  lime; 

box-shadow : 10px  10px  5px  blue; 

 

< Background > 배경

body{

background-image : url("/~"); 

- 배경에 사진 주기 
background-repeat : no-repeat;  

- 반복안함  
background-attachment: fixed;  

- 스크롤바 내려도 그자리 고정 
background-position : center; top; bottom; 

- 배경 사진 위치 
background-size : 50% 50%; 

- (가로 세로) 브라우저에 대한 크기 비율  
} 

- 배경 색 주기 

background-color : gray;