html5

속성

가시속성

화면에 보이는 속성을 지정합니다.

블럭형태의 요소배열을 인라인 형태의 요소 배열로 변경을 할 수 있습니다.

h1 {
    display: inline;
}

none은 화면에 안보이게 하는 속성입니다. 가장 많이 사용되는 속성입니다.

h1 {
    display: none;
}

block은 none의 반대로 화면에 다시 출력하도록 합니다.

h1 {
    display: block;
}

inline-block 공백 여부여 적용 범위가 다르게 됩니다.

화면에 출력 여부 제어 합니다. display 속성과 차이점은 화면에 요소의 출력을 제한할때, 요소 자체를 남겨누고 안보기게 하는 것인지, 요소만 안보이게 하는 것인지의 차이 점이 있습니다.

    visibility: hidden;

투명도를 조정합니다.

값은 0~1사이의 값을 지정합니다.

opacity: 0.8;

색상을 지정과 투명도를 같이 지정할 수 있습니다.

rgba()함수는 4개의 인자값을 전달 받습니다. 마지막은 투명도 입니다.

마진, 보더, 패딩, 높이, 폭 5개를 말합니다. 순서가 정해져 있습니다.

width:300;
width:50;
backgound-color:red;

배경색의 적용범위 패딩까지 적용됩니다.

테두리(border)에 대해서 알아 봅니다.

border-width는 테두리의 두께를 의미합니다.

border-style은 테두리의 종류, 다양한 종류가 존재합니다.

border-color는 테두리의 색상을 말합니다.

3가지의 속성값을 border 속성으로 동시에 적용을 할 수 있습니다.

border: 10px solid red;