h3+p+ul>(li*3)
<h3></h3> <p></p> <ul> <li></li> <li></li> <li></li> </ul>
h3+(ul>(li*2))+div[id=button]
<h3></h3> <ul> <li></li> <li></li> </ul> <div id="button"></div>
- 속성값의 개수에 따라 적용되는 위치
// 순서대로 위 오른쪽 아래쪽 왼쪽 h1 { magin: 5px 10px 5px 10px; top right bottom left }
// 순서대로 위 오른쪽&왼쪽 아래쪽 h1 { magin: 5px 10px 5px; top right과left bottom }
// 순서대로 위쪽&아래쪽 오른쪽&왼쪽 h1 { magin: 5px 10px; top과bottom right과left }
// 위 오 왼 아래 전체를 5px로 설정 h1 { magin: 5px; top&right&bottom&left }
* { /* 전체 선택자 */
padding: 0;
margin: 0;
}
background-image 속성
body {
background-image: url(https://picsum.photos/100/100);
또는
background-image: url('..img/bg.jpg');
}
background-repeat 속성
body {
background-image: url('https://picsum.photos/293/400');
// repeat 속성 = 반복
background-repeat: repeat;
// no-repeat 속성 = 반복안함
background-repeat: no-repeat;
}
border 속성
tablc, th, td{
border: solid 1px black;
}
border-collapse 속성
table {
border-collapse: collapse;
}
#menu {
display: inline;
}
#menu {
visibility: visible;
visibility: hidden;
}
// 이미지의 위치를 왼쪽으로 배치
#image {
float: left;
}
// clear both (left / right) 속성 모두 해제
#image {
clear: both;
}