CSS / BOX-SHADOW 값을 넣을 때 첫 번째 값 : 가로 위치 (필수) 두 번째 값 : 세로 위치 (필수) 세 번째 값 : 그림자의 번짐 (blur) 네 번째 값 : 그림자의 크기 (spread) 다섯 번째 값 : 그림자의 색상 여섯 번째 값 : inset -> 설정하면 그림자가 컨텐츠 내부에 생긴다. 위의 설정값은 첫번째, 두번째만 필수다. 예제 box1 #box1 { margin: 50px; width: 100px; height: 50px; border-radius: 20px; background-color: yellow; text-align: center; box-shadow: 20px 20px 10px blue; }
CSS / TEXT-SHADOW 값을 넣을 때 첫 번째 값: 가로 위치 두 번째 값: 세로 위치 세 번째 값: 그림자의 번짐 정도 네 번째 값: 색상 조절 위의 값들은 , 를 찍고 여러개 중첩해서 진하게 설정이 가능하다 예제 Text Shadow #shadow1 { color: white; text-shadow: -1px -1px 3px red; } 여러번 중첩을 주면 색이 더 진해진다. #shadow1 { color: white; text-shadow: -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red; } 아래의 사이트에서 여러가지 text-shadow의 표본을 구할수 있다. http..
css / text text-indent / 들여쓰기 값이 양수면 들여쓰기, 음수면 내어쓰기가 된다. 예제 1. 들여쓰기 2. 내어쓰기 3. 여백주고 내어쓰기 The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum letter-spacing / 글자 간격 글자와 글자 사이의 간격을 설정 양수면 늘어나고 음수면 줄어든다. 예제 1. 3px만큼 간격 설정 2. -3px 만큼 간격 설정 3. 1em 만큼 간격 설정 The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum The standard chunk of Lorem ..
#텍스트 정렬 text-align center : 가운데 정렬 left : 왼쪽 정렬 right : 오른쪽 정렬 justify : 양쪽 정렬 예제 1. center 2. left 3. right 4. justify The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translati..
#절대 길이 단위 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..