NULL

inline styles이 html안에 있는 css를 말하는것이다.

css상속 color font-family font-size font-weight line-height list-style text-align visibility 이외에도 상속이 잘되는 속성들은 많지만 a태그처럼 상속이 안되는 속성은 inherit로 상속받을수있다. css를 이런식으로 써서 알맞게 실행해보면 색깔이 입혀진다.

div클래스에 i만 적용한다. div안에 p는 직속자식이 아니기때문에 적용되지않는다. 클래스 복수선택이다. outside를 갖고 있는 것중 one이 있다면 적용된다. outside와 one을 다중 적용한 outside 1이 적용된 것을 확인 할 수 있다. 마우스 오버 hover h1 { color: orange; } /* 마우스가 태그에 올라갔을 때 */ h1:hover { color: green; } 마우스가 올라가면 텍스트가 반응한다.

배경이미지를 설정해줄땐 background-image: url("이미지 경로") 이런식으로 설정해준다. background-repeat 이미지를 반복시키는가 아닌가와 반복시킨다면 어떠한 방식으로 반복시킬건지 정해주는 속성이다. background-size 배경이미지의 사이즈를 정해주는 속성이다. background-position 배경이미지의 위치를 정해주는 속성이다. #div1 { /* 단어로 지정해주기 (가로: 왼쪽, 세로: 상단) */ background-position: left top; } #div2 { /* 단어로 지정해주기 (가로: 왼쪽, 세로: 센터) */ background-position: left center; } #div3 { /* 단어로 지정해주기 (가로: 센터, 세로: 상단) *..

그림자 설정 box-shadow을 사용하면 된다. 기본값은 none이다. 최종적인 사용방법정리 box-shadow: 50px(가로) 60px(세로) 40px(흐림정도) 50px(그림자크기) blue(색깔); 1. 가로 세로 값을 설정해주면 그림자가 나온다. 2. 그림자에 색을 추가할수있다. 기본값은 검정색이다. 3. 그림자 흐림정도를 설정할수있다. ( 기본값은 0px이다. ) 4. 그림자크기도 지정할수있다.

border-radius은 모서리를 둥글게 만든다. 사용방법 border: 1px solid green; border-radius: 30px; 모서리마다 각각 설정가능하다. h1 { border: 1px solid green; border-top-left-radius: 50px; /* 왼쪽 위 */ border-top-right-radius: 5px; /* 오른쪽 위 */ border-bottom-right-radius: 0px; /* 오른쪽 아래 */ border-bottom-left-radius: 20px; /* 왼쪽 아래 */ } 배경색은 background-color속성을 사용해서 설정가능하다. h1 { background-color: #4d9fff; } hex나 rgb값 둘중 하나를 사용하면 된..

border는 테두리입니다. 1. 한 줄에 선언 .p1 { border: 2px solid #4d9fff; } // 이 방식을 쓰면 상하좌우 같은 테두리가 생긴다. .p2 { border: 2px dotted #4d9fff; // 실선 } .p3 { border: 2px dashed #4d9fff; // 점선 } 2. 하나하나 명확히 나누기 .p1 { border-style: dotted; border-color: red; border-width: 5px; } 거의 쓰지않는 방법이다. 3. 테두리 한면한면 설정 .p1 { border-top: 3px dotted #4d9fff; border-bottom: 2px dashed red; border-left: 5px solid green; } 4면이 다 같은..

사진의 크기도 css에서 설정가능하며 가로(width),세로(height) border: 1px solid red; min-height:60px; max-height:600px; 최소, 최대 길이도 지정할수있다. 쓰다가 글이 넘쳐서 삐져나오는 경우가 있는데 내용물 공간이 부족한 경우 overflow로 해결할수있다. css에 overflow:hidden; 하게되면 삐져나온 글이 사라진다. overflow:visble;를 하면 글이 삐져나온다. 보통 기본값이다. 안쓴것과 동일함 overflow:scroll; 와 overflow:auto; 는 비슷하지만 한가지 차이점이 scroll은 무조건 스크롤바가 있고, auto는 글이 넘칠때만 스크롤바가 생긴다.

padding 테두리 사이의 여유공간 margin 요소주위 여백 (테두리 밖의 공간) 한 줄에 쓰는 법 1. margin: 시계방향;(상 우 하 좌)으로 써주면 된다. 2. margin: 50px; 모든 방향 값이 똑같이 지정된다. 3. margin 50px 25px; 상하 50px, 좌우 25px로 적용된다. 4. margin 가운데 정렬 border: 1px solid blue; width: 500px; margin-left: auto; margin-right: auto; 왼쪽, 오른쪽 auto를 하게 되면 좌우 자동계산이 된다. 상하 마진0인 상태에서 하려면 margin: 0 auto; 하게 되면 상하0에 좌우는 자동 조정된다.

div태그와 마찬가지로 다른 큰 역할없이 요소들은 묶어준다. 하지만 div태그는 줄을 새로운 줄에 놓아버리고 span은 원래 있던 글에 영향을 주지않는다. 특정태그만 스타일링해주고 싶을때 쓴다.