본문 바로가기

전체 글

(37)
[CSS] 스타일 속성 - 박스 속성 1. 박스 속성 width 속성과 height 속성은 글자를 감싸는 영역의 크기를 지정하는 스타일 속성입니다. 전체 너비 = width + 2 x (margin + border + padding) 전체 높이 = height + 2 x (margin + border + padding) 2. width, height 3. margin, padding margin: [margin] margin: [margin-top] [margin-right] [margin-bottom] [margin-left] margin-top: [margin-top] margin-right: [margin-right] margin-bottom: [margin-bottom] margin-left: [margin-left] 4. Borde..
[CSS] 스타일 속성 - 가시 속성 가시 속성은 태그가 화면에 보이는 방식을 지정하는 속성입니다. [1] (167) 1. display 속성 Dummy 1 Dummy 2 Dummy 3 1) display none Dummy 1 Dummy 2 Dummy 3 2) display block Dummy 1 Dummy 2 Dummy 3 3) display inline Dummy 1 Dummy 2 Dummy 3 4) display inline-block inline 키워드를 적용한 코드는 width 속성과 height 속성이 적용되지 않고 margin 속성이 div 태그의 좌우로만 지정됩니다. inline-block 키워드를 적용하면 width 속성과 height 속성을 적용할 수 있고 margin 속성이 상하좌우로 적용됩니다. Dummy 1 Dum..
[CSS] 스타일 속성 - 단위 1. 크기 단위 단위 설명 % 백분율 단위 em 배수 단위 (1em=100%, 1.5em=150%, ...) px 픽셀 Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 2. 색상 단위 단위 형태 설명 red, orange, blue, green, brown, purple, ... #000000 HEX 코드 단위 rgb(red, green, blue) RGB 색상 단위 rgba(red, green, blue, alpha) RGBA 색상 단위 hsl(hue, saturation, lightness) HSL 색상 단위 hsla(hue, saturation, lightness, alpha) HSLA 색상 단위 (alpha : 0.0을 입력할 경우 완전히 투명한 상태를 나타내..