HTML & CSS 기초

웹코딩/CSS 2017. 11. 17. 11:34

width 넓이

min-width 최소 넓이

max-width 최대 넓이

 

 

 

 


height 높이

min-height 최소 높이

max-height 최대 높이

 

 

 

 


float:none 무 정렬

float:left 왼쪽 정렬

float:right 오른쪽 정렬

 

 

 

 


text-align:left 글씨체 왼쪽으로

text-align:right 글씨체 오른쪽으로

text-align:center 글씨체를 가운데 정렬으로

 

 

 

 


display:none 안보이게

display:block 보이게 & 영역차지

display:inline-block 정렬하면서 영역차지

 

 

HTML & CSS 기초

 

 


background 배경색상

background-color 배경색상

background:url 배경이미지

background:url() no-repeat 한번만 배경이미지 나오도록.

background:url() repeat-x 가로방향으로 배경이미지 반복

background:url() repeat-y 세로방향으로 배경이미지 반복

background:url() no-repeat 50% 50% 배경이미지 한번만 나오고 가로 가운데 세로 가운데 정렬

 


Ex ) background:url() no-repeat 50%(가로위치) 50%(세로위치) 입니다.

 

 

 

 


position:relative 영역선언

position:absolute 해당 영억에서 위치지정

 

 

 

 


/* 여기서 중요한팁 [margin과 padding은 전혀 다르다!] */

 


CSS를 처음 접해보시는 분들이 착각하는것이 무엇이냐면 margin과 padding이 같다는 생각을 많이 하고 계십니다.

제가 강사를 해보았었는데 그때 들으셨던분들도 착각을 하시더라구요!

 


margin은 간격을 띄워주는 것이고 padding은 영역을 늘여주는(확장하는) 것입니다. 이점에 유의하면서 봐주시면 감사하겠습니다

 


margin 간격

margin-top 위쪽 간격

margin-left 왼쪽 간격

margin-right 오른쪽 간격

margin-bottom 밑쪽 간격

 

 

HTML & CSS 기초

 

 


padding 간격확장

padding-top 위쪽 간격확장

padding-left 왼쪽 간격확장

padding-right 오른쪽 간격확장

padding-bottom 밑쪽 간격확장

 

 

 

border 외각선

border-top 위쪽 외각선

border-left 왼쪽 외각선

border-right 오른쪽 외각선

border-bottom 밑쪽 외각선

 

 

 

 


font-size 글씨 사이즈

font-family 글씨체

font-weight 글씨 굵게 등등

font-style 글씨모양

color 글씨색상

line-height 줄간격

letter-spacing 글자간격

 


overflow:hidden 안보이게

opacity 투명도

 

[출처] HTML & CSS 기초 Part3 [CSS 종류들] (하드코딩하는사람들) |작성자 뤠알진심

'웹코딩 > CSS' 카테고리의 다른 글

CSS 적용시 중요 부분 정리  (0) 2017.07.20