#절대 길이 단위 px: 픽셀(화소) mm : 밀리미터 cm : 센치미터 in : 인치 선언방법 size1{ font-size:1px; font-size:5mm; font-size:1cm; font-size:0.5in; } #상대 길이 단위 em: 현재 요소의 font-size에 비례한 크기 조절 > 2.0em 일 때 현재 요소에 설정된 font-size의 2배가 된다. rem: 현재 페이지 html태그에 설정된 font-size에 비례한 크기 조절 > 2.0rem일 때 현재 html태그에 설정된 font-size의 2배가 된다. vw (viewport width): 현재 웹 페이지를 보고있는 프로그램의 너비에 기반 > 1vw일 때 현재 viewport width의 1%를 의미한다 vh (viewport..
#Box Model HTML이 요소를 구성하는 방식 제일 바깥쪽부터 margin > border > content 순으로 구성된다. content-box와, border-box가 있다. #box Sizing content-box (기본) width + padding + border로 크기를 결정 border-box width 만으로 크기를 결정 #content-box{ box-sizing:content-box; /* 기본값 */ background-color: red; color: white; border: 15px solid black; width:350px; } #border-box{ box-sizing: border-box; background-color: darkslateblue; color: w..
#Margin 해당 요소의 border 바깥쪽의 여백 해당 요소와 다른 요소와의 거리를 결정한다. top margin과 bottom margin이 만나는 곳에서는 둘 중 더 높은 margin만 적용 된다. margin을 auto로 설정하면 자동으로 margin을 조절하여 요소를 가운데 정렬한다. 아래 사진의 이 색으로 표시된 영역이 Margin이다. (요소의 "외적" 여백) 선언방법 #div1{ /*옆50, 높이25*/ margin:50px 25px; } #div2{ margin:50px; } #div3{ width:500px; margin:auto; } margin: 50px 25px; -> 옆여백 50px, 높이여백 25px margin: 50px; -> 옆,높이 여백 50px margin: auto..
#border - 테두리를 만드는 속성. 위,오른쪽,아래,왼쪽선을 한번에 정한다. 선언방식 div{ /*한번에 3가지 동시 선언*/ border: solid 3px black; /*따로 선언*/ border-width:15px; border-style:solid; border-color:red; } border-width : 선의 두께를 정한다. (픽셀 단위 ) border-style : 선의 모양을 정한다.(기본 none(없음)) border-color : 선의 색을 정한다. border-style 종류 solid | dashed | dotted | double | groove | ridge | inset | outset | hidden | none | 하나의 속성에 여러값 선언 #div1{ borde..
#background-image 배경 이미지를 넣을때 사용하는 속성 기본적으로 바둑판 형식으로 사진이 채워진다. background-image: url('[사진경로]') : 배경화면에 사용할 사진의 경로를 입력한다. - 웹에서 사용할 사진의 주소를 복사후에 넣어도 되고, 로컬PC에 존재하는 사진의 경로를 넣어도 된다. div{ /*웹 상에 존재하는 이미지 주소*/ background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtUMbYGuLdO0HJhrDidBrr4EetIrBj5e-otw&usqp=CAU'); } 배경이미지 기본값 background-repeat : no-repeat -> 기본 바둑판 형식의 사진을 딱 한장만 배..
#Selector CSS에서는 선택자를 이용해 원하는 요소를 선택할 수 있다. - tag : 해당 태그인 모든 HTML요소를 선택한다. - .class : 해당 클래스 속성 (attribute)를 가진 모든 HTML요소를 선택한다. - #id : 해당 ID 속성(attribute)을 가진 모든 HTML요소를 선택한다. li{ background-color:salmon; color:white; padding:3px; margin-bottom:1px; } /* .이 붙은건 class*/ .warning{ border: 3px dashed black; background-color:yellow; color:black; } /* #이 붙은건 id*/ #item1{ color:red; font-weight:bol..
CSS CSS (Cascading Style Sheet) - html문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격(디자인적인 부분) - 스타일시트를 작성할 때는 CSS라는 언어를 사용한다. - 웹 브라우저는 스타일시트를 해석하여 해당 요소의 디자인을 결정한다. -주요 기능- html 태그의 글자색을 바꿀 수 있다. 글자의 정력방식을 바꿀수있다. 배경색을 지정할 수 있다. 이미지등을 지정할 수 있다. 외에도 여러가지 기능이 있다. 위의 기능은 html로도 사용 가능하지만 사용의 편의성과 일괄성 때문에 css를 사용한다 css는 style라는 태그를 명시해서 사용한다. -인라인 스타일 지정- 하나의 태그에 직접 스타일을 지정하는 방법 하나의 태그에만 원하는 스타일 지정 단점 : 같은 스타일을 ..