0706 HTML/CSS

Emmet Coding

<h3></h3>
<p></p>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<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
}

塗りと余白の初期化

CSSの「*」全オプション

* { /* 전체 선택자 */
	padding: 0;
	margin: 0;
}

CSSによるバックグラウンド画像の設定

body {
	background-image: url(https://picsum.photos/100/100);
	또는
	background-image: url('..img/bg.jpg');
}

body {
	background-image: url('https://picsum.photos/293/400');
	// repeat 속성 = 반복
    background-repeat: repeat;
    // no-repeat 속성 = 반복안함
    background-repeat: no-repeat;
    }

CSS borderを使用して表の枠線を描画する

tablc, th, td{
	border: solid 1px black;
}

table {
	border-collapse: collapse;
}

色コードの意味

CSSの可視性属性

#menu {
	display: inline;
}

#menu {
	visibility: visible;
	visibility: hidden;
}

CSSのフローティング属性

// 이미지의 위치를 왼쪽으로 배치
#image {
    float: left; 
}

CSSのclear属性

// clear both (left / right) 속성 모두 해제
#image {
    clear: both; 
}