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 |
---|