본문 바로가기
728x90
반응형
SMALL

CSS10

[HTML/CSS] 인라인 요소, 블록 요소, 인라인 블록 요소 * 정리 * 인라인(inline) 요소 인라인 요소는 기본적으로 가로 배치.크기값을 가질 수 없기에 width와 height 적용 안됨.좌우 마진은 갖지만 상하 마진은 가질 수 없음. * 블록(block) 요소블록 요소는 기본적으로 세로 배치.width와 height 적용 가능.상하좌우 모두 마진을 가질 수 있음. * 인라인 블록(inline block) 요소css 코드의 주석을 보면, 인라인 요소와 블록 요소 성질을 모두 가지고 있는 것을 확인할 수 있다. * 요소 변경: display 속성값: block, inline-block, inline, none, flex  display: inline-block으로 인라인 요소를 인라인블록요소로 변경.상하좌우 마진 모두 적용됨.width 적용됨. 2024. 7. 22.
[CSS] 그림자 효과(box-shadow, text-shadow) * box-shadowinset: 안쪽 그림자offset-x: 수평 그림자의 offset 값offset-y : 수직 그림자의 offset 값blur: 그림자 가장자리를 부드럽게 처리color: 색상 지정 코드 예시 * text-shadow코드 예시 코드 예시 2 2024. 7. 22.
[CSS] 박스 모델(border, border-redius, padding, margin) * border: 테두리 설정border-style: 테두리 스타일 지정value: solid, dashed, dotted, double, groove, inset, outset border-width: 테두리 두께 지정value: px, %, thin, medium, thick border-color: 테두리 색상 지정value: color 코드 예시 1오른쪽 코드처럼 border 속성을 한 줄에 한 번에 쓸 수도 있다.   코드 예시 2 코드 예시 3상하좌우 속성을 따로 지정할 수 있다. * border-radius: 엘리먼트 코너 둥글게 하기  * padding, margin크기 값을 2개 사용하는 경우: 상하, 좌우ex) margin 30px, 50px; 크기의 값을 4가지 사용할 경우: 상, 우.. 2024. 7. 22.
[CSS] 자손 선택자, 자식 선택자 * 코드 예시자식 선택자 .box > divbox 클래스 바로 아래에 있는 직계 자식인 div에 스타일을 적용.'>' 기호는 직계 자식 관계를 나타낸다. 자손 선택자 .box > div divbox 클래스 바로 아래에 있는 직계 자식인 div 안에 있는 자손 div에 스타일 적용.'>' 기호 없이 스페이스바로 후손 관계를 나타낸다. 2024. 7. 22.
728x90
반응형
LIST