開發時習之

margin - 요소의 외부 여백(공간)을 지정하는 단축 속성 - 음수사용 가능 - 기본값: 0 (외부 여백이 존재하지 않음) - auto 값 사용가능(브라우저가 여백을 자동 계산), 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용가능 - 단위: px, em, vw 등 단위로 지정 (%도 사용가능하나 가로너비에만 지정할수 있고 사용이 드물어서 자주 사용되진 않음) .item { width: 100px; height: 100px; background-color: green; border: 1px solid red; margin: 10px; } - 단축 속성: margin은 값을 하나부터 4개까지 나눠서 지정할 수 있음 .item{ margin: 0; /* top, right, bottom, left 모..

px - 픽셀: 하나의 디바이스가 표시할 수 있는 화면의 점 - 화면해상도 표시에도 사용됨 (ex. 1920 x 1080 해상도를 가진 모니터) - 디바이스 화면과 상황에 따라 조금 차이가 있기 때문에 절대단위라고 말할 수는 없음 % - 상대적 백분율 - 기준이 있고 그에 따라 상대적인 비율을 나타내는 단위 ex) 부모요소의 width:300px; 이라면 자식요소가 width:50%; 라고 했을 때 150px을 말함 .parent { width: 300px; height: 200px; background-color: royalblue; border: 1px solid; } .child { width: 50%; /* 부모요소 기준 50% 줄어듬 */ height:50%; background-color: o..

기본속성 - 속성을 HTML에서는 Attributes, CSS와 Js에서는 Properties라고 함 - 요소마다 이미 들어있는 기본적인 속성의 값(기본값)을 가지고 있고 별도로 명시하지 않아도 됨 width, height - 요소의 가로/세로 너비 - 기본값: auto (브라우저가 자동으로 너비를 계산) - 단위: px, em, vw 등 .box { width: 100px: height: 100px; background-color: orange; } span - 대표적인 inline 요소 - 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 - 기본값: auto (포함한 콘텐츠 크기만큼 자동으로 줄어듬) - 가로, 세로 사이즈를 명시할 수 없음, ex) width: 100px; heigh..

CSS 개요 기본문법, 주석 스타일(CSS)의 기본 문법: 선택자 {속성: 값;} 선택자(Selector) : 스타일(CSS)을 적용한 대상 속성(Property) :스타일(CSS)의 종류 값(Value): 스타일(CSS)의 적용되는 실제 값 속성과 값사이는 :(콜론)으로 구분 스타일 범위의 시작과 끝은 {}(중괄호)를 사용 주석은 /**/를 이용 (브라우저는 이 범위를 해석하지 않음) div {color: red;} /* 종류(속성)은 color, 값은 red */ div {margin: 20px;} /* margin: 요소 외부 여백 */ div {padding: 10px;} /* padding: 요소 내부 여백 */ /* 들여쓰기(indent)와 내어쓰기(outdent)로 가독성있게 작성함 */ d..