width가로
: auto 나의 부모만큼
min-width
max-width
height세로
: auto 나의 컨텐츠만큼
min-height
max-height
padding-안쪽여백
border- 테두리선
border-top
border-left
border-right
border-bottom
margin-바깥여백 : 위치를 잡는다는 생각으로 사용 ㄴ
1.스타일시트 margin, padding, border
2. 스타일시트는 body가 아니라 head태그에 입력해야 함.
<margin> 속성
- 개체의 바깥쪽 여백.
- 각 box들에 margin 속성 적용시 바깥쪽 여백에 변화가 생김. 단, body에 적용시에만 안쪽 여백이 됨.
- 안쪽 여백을 없애고 싶을 때는 body{margin:0px;}
- 상하좌우 전체 10px씩 여백을 주고 싶을 때는
.(네임){background:red; margin:10px;}
- 특정한 면만 여백을 주고 싶다면
상 : margin-top: 10px
하 : margin-bottom:10px
좌 : margin-left:10px
우 : margin-right:10px
<padding> 속성
- 개체의 안쪽 여백. (body태그만 안쪽 속성 지정 시, margin 속성을 이용.
.(네임){ padding : 숫자px; }
1) 숫자px;
- 상하좌우 개체의 안쪽 여백을 숫자px만큼 지정
2) 숫자1px 숫자2px;
- 상하는 숫자1px만큼, 좌우는 숫자2px만큼 개체의 안쪽 여백 지정
3) 숫자1px 숫자2px 숫자3px;
- 상은 숫자1px만큼, 좌우는 숫자2px만큼, 하는 숫자3px만큼 개체의 안쪽 여백 지정
4) 숫자1px 숫자2px 숫자3px 숫자4px;
- 상은 숫자1px만큼, 우는 숫자2px만큼, 하는 숫자3px만큼, 좌는 숫자4px만큼 개체의 안쪽 여백 지정(시계방향 순서)
상 : padding-top:10px
하 : padding-bottom:10px
좌 : padding-left:10px
우 : padding-right:10px
<border> 속성
- 개체의 테두리
1) 테두리의 두께
#C { border-width : 숫자px ; }
- 숫자px만큼 테두리의 두께 설정
상) border-top-width : 숫자px
하) border-bottom-width : 숫자px
좌) border-left-width : 숫자px
우) border-right-width : 숫자px
2) 테두리의 색상
#C { border-color : 영문색상명 / RGB색상명 ; }
- 기입한 값에 알맞은 색상의 두께 설정
상) border-top-color : 영문색상명 / RGB색상명
하) border-bottom-color : 영문색상명 / RGB색상명
좌) border-left-color : 영문색상명 / RGB색상명
우) border-right-color : 영문색상명 / RGB색상명
3) 테두리의 종류
#C { border-style : solid / dotted / dashed / none ; }
- solid: 실선 / dotted: 점선 / dashed: 파선 / none: 선 없음
상) border-top-style : solid / dotted / dashed / none
하) border-bottom-style : solid / dotted / dashed / none
좌) border-left-style : solid / dotted / dashed / none
우) border-right-style : solid / dotted / dashed / none
*
inline 방식 스타일링
-태그에 직접적인 스타일링을 해서 작성하는 태그-아래처럼-
<div style="border:1px red solid; width:100px; height:100px;">text</div>
-스타일 속성 안에 보더(속성)이 또 들어가면 : 으로 표기. 그리고 닫아주는 것도 ; 으로.
엘리먼트들을 디자인하는데 용이-->
*
<background> 속성
background-color /*색상지정*/
background-image /*이미지 경로지정*/
background-size /*이미지 크기지정*/
background-repeat /*이미지 반복지정*/
background-position /*이미지 위치지정*/
background-attachment /*스크롤 지정*/
background 한줄 작성법
background:red url('이미지경로')no-repeat scroll 0px 20px/100px 100px;
background-color
background-color:#ffffff; /*색상값*/
background-color:rgb(0,0,0); /*rgb 색상값*/
background-color:rgba(0,0,0,1); /*투명도 적용*/
background-color:red; /*색상 이름*/
background-image
background-image:url('파일경로'); /*절대좌표, 상대좌표 모두 가능*/
background-size
background-size:auto; /*기본 크기*/
background-size:100px 150px; /*가로100px 세로150px 사이즈로*/
background-size:cover; /*부모요소 가로크기 맞춰서*/
background-size:contain; /*부모요소 세로크기 맞춰서*/
background-repeat
background-repeat:no-repeat; /*반복하지 않음*/
background-repeat:repeat; /*기본값으로 배경이미지를 모두 반복*/
background-repeat:repeat-x; /*x축(가로) 기준으로 반복*/
background-repeat:repeat-y; /*y축(세로) 기준으로 반복*/
background-position
background-position:10px 20px; /*가로10px 세로20px 에 지정*/
background-position:left top; /*왼쪽 상단에 지정*/
background-position:20% bottom; /*왼쪽 20% 우측 하단에 지정*/
background-attachment
background-attachment:fix; /*스크롤바 움직여도 배경은 고정*/
background-attachment:scroll; /*background-attachment 기본값이며 스크롤바 움직임에 따라 배경이미지 위치가 변경*/