본문 바로가기
728x90
SMALL

분류 전체보기100

[CSS] 가로 배치(float, overflow, clear, inline-block) * floatnone(default): float 속성 적용 안 함left: 컨테이너의 왼쪽에 배치right: 컨테이너의 오른쪽에 배치margin: auto 요소를 중앙에 배치 코드 예시 자식 요소에 float 적용 자식 요소에 float 속성이 사용되면 부모요소는 자식요소가 없다고 판단하여 높잇값(height)을 잃는다. * 높잇값 찾기 overflow: hidden;부모요소에 overflow: hidden;을 추가하였더니 높이값이 없어지지 않는 것을 알 수 있다.  float: right; 로 오른쪽 배치  span 태그는 인라인요소이기 때문에 크기값을 갖지 못하기에, 인라인블록요소로 변경하여서 width와 height 적용하였다.margin: auto; 는 블록요소에만 적용되기에 중앙배치가 되지 않.. 2024. 7. 23.
[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.
728x90
LIST

티스토리툴바