NULL

만약 inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶으면 그 둘을 섞어놓은 inline-block을 사용한다. 선언법 display: inline-block;

display의 종류 모든 요소는 딱 한개의 display값을 가지고 있다. 가질수있는 display종류는 inline block inline-block flex list-item none 등등 여러가지가 있는데 대부분은 inline과 block 중 한 가지이다. block는 독립적으로 줄바꿈을 하고 그 줄 공간을 다 차지한다. inline은 같은 줄에 머무르려고 하는 성향과 필요한 만큼 가로길이를 차지한다. 다음 요소들은 기본 display 값이 inline이다. display 바꾸기 1. display: block; // inline을 block으로 바꿈 2. display: inline; //block을 inline으로 바꿈

css에선 px,rem,em,%등 여러단위가 존재한다. 폰트크기 뿐만 아니라 padding,margin,width등 다양한 속성들에 단위를 사용할수있다. px는 절대적인 값이다. 다른요소의 값에 영향을 받지않는다. rem은 상대적인 값이라서 html태그에만 영향받는다. 2rem은 html태그의 font-size의 2배 크기다. em도 rem과 같이 상대적인 값이다. em은 자기자신의 font-size를 기준으로 한다. 2em은 자기자신의 font-size의 2배 크기다. 자기 자신의 font-size를 따로 정해두지 않았다면 상위요소에서 상속받은값을 기준으로 한다. 만약 자기자신에게 폰트크기값이 있다면 그값이 em기준이다. 퍼센트(%)도 마찬가지로 상대값이다. 어느것에 쓰냐에 따라서 다른 기준이 적용된다..

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면이 다 같은..