border
- width, sstly clor 속성을 사용해서 box 테두리 모양을 지정 할 수 있습니다.
사용방법
.solid{border: 10px solid blue;} - 한줄 테두리
.hidden{border: 10px none blue;} - 테두리 없음
.dotted{border: 10px dotted yellow;} - 점선 테두리
.dashed{border: 10px dashed orange;} - 사진 참조
.groove{border: 10px groove brown;} - 사진 참조
.ridge{border: 10px ridge red;} - 사진 참조
.inset{border: 10px inset coral;} - 사진 참조
.outset{border: 10px outset navy} - 사진 참조
사용방법2
.line{
border-style: solid;
border-width: 10px 30px;
- 테두리 넓이
border-color: purple navy yellow orange;
- 테두리 색상 설정
}
{border-collapse: collapse;} - 단일 테두리로 축소border-radius
- border-radius를 사용하여 모서리를 원하는 데로 바꿀 수 있습니다.
.round_1{border-radius: 50px;}
.round_2{border-radius: 0px 20px;}
.round_3{border-radius: 0px 20px 40px;}
.round_4{border-radius: 0px 10px 20px 30px;}
.round_5{
border: 4px solid orange;
border-radius: 30px;}
block 레벨요소
- 항상 새로운 라인에서 시작합니다.
- width, height, margin 속성 지정이 가능합니다.
- block 레벨 요소 안에 다른 block레벨 요소나 inline 요소를 포함할 수 있습니다.
inline 요소
- 같은 줄에 다른 요소와 나란히 배치됩니다.
- content의 너비만큼 가로 폭을 차지합니다.
- 블록 레벨 요소는 포함될 수 없고, 다른 inline 요소만 포함 할 수 있습니다.
dispaly 속성
- 태그 영역의 표현 방식을 지정합니다.
none: 해당 요소를 화면에 표시하지 않습니다.
block: block 특성을 가지는 요소를 지정합니다.
inline: inline특성을 가지는 요소를 지정합니다.
inline-block: inline, block 특성을 가지는 요소를 지정합니다.
display: none; - (div요소등)
display: block; - (span요소등)
display: inline; - (div요소등)
display: inline-block; - (div요소등)
visibility 속성
- 요소를 보이게 할 것인지, 보이지 않게 할 것인지를 결정합니다
visible : 해당 요소를 보이게 합니다
hidden : 해당 요소를 보이지 않게 합니다
collapse : table 요소에 사용하면 행이나 열을 보이지 않게 합니다
.visible{visibility: visible;} - 화면에서 보임
.hidden{visibility: hidden;} - 화면에서 보이지 않음
.none{visibility: none;} - 화면에서 보임
.collapse{visibility: collapse;} - 화면에서 보이지 않음
opacity 속성
- 투명도를 지정합니다. 0 ~ 1 ( 0.0 : 투명 , 1.0 : 불투명 )
div:hover, img:hover {
opacity: 1.0;
} - 마우스가 올라가면 불투명 해짐
background-image
- 요소 배경 이미지를 지정합니다
background-repeat
- 배경이미지의 반복을 지정합니다.
- background-repeat 속성의 기본값이 repeat이기 떄문에, 설정된 이미지릐 크기가 화면보다 작으면 자동으로 이미지가 반복되어 적용됩니다.
no-repeat: 배경 이미지를 한번만 적용repeat-x: 배경 이미지를 가로방향으로 반복 적용repeat-y: 배경 이미지를 세로방향으로 반복 적용
background-position
background-position : X좌표
background-position : X좌표, Y좌표
background-size
- 배경 화면 이미지 크기를 조절합니다.
- background-size: width; height: auto;
넓이 설정만 해줄시에는 높이는 자동으로 설정됩니다.
background-attachment
- 웹 페이지의 배경이 스크롤 될 때 어떻게 동작할지를 결정합니다.
- scroll: 배경이미지가 요소와 함께 스크롤 됩니다.
요소의 내부에서 스크롤 하면 배경이 함께 움직입니다.
fixed: 배경 이미지가 고정되어 스크롤 되지 않습니다
페이지나 요소가 스크롤 되어도 배경은 그자리에 머뭄니다.
local : 요소 내부에서 스크롤할 때 배경이미지가 함께 움직입니다.
background 응용
http://127.0.0.1:5500/src/main/webapp/CSS/05_background/background_quiz.html
