0706 HTML/CSS

Emmet Coding

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)과 마진(margin) 초기화하기

CSS의 ' * ' 전체선택자

• 모든 HTML태그 요소를 선택
• 전체선택자에 의해 선택된 모든 요소에서 패딩과 마진을 0 으로 초기화

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

CSS를 통한 백그라운드 이미지 설정

background-image 속성

• 배경 이미지 삽입에 사용
• url 뒤 괄호 안에 경로 포함한 배경 이미지 파일 이름 입력

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

CSS border를 활용한 테이블 경계선 그리기

border 속성

• border 속성을 이용하여 실선, 1픽셀 두께, 흑생 경계선 그림

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

border-collapse 속성

• border-collapse 속성을 이용해서 테이블 경계선을 하나의 가는 실선으로 합친다.
• 생략할 경우 이중실선으로 표시

table {
	border-collapse: collapse;
}

색상코드의 의미

• 색상코드를 표시할 때에는 #RRGGBBAA 형식으로 표현한다.
  • R : RED / G : GREEN / B : BLUE / A : 투명도
    각 색마다 설정값의 범위 : 0 ~ 255

CSS의 가시성(Visibility) 속성

• display : 박스모델의 영역마저 없앤다.
  • 요소의 성질을, block --> inline으로 변경한다.

#menu {
	display: inline;
}

• visibility : 박스모델의 영역은 유지한다.
  • 요소를 유지하되, 화면에 보여줄지 말지만 결정한다.

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

CSS의 float 속성

• 웹 페이지에 요소를 왼쪽 또는 오른쪽에 배치

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

CSS의 clear 속성

• float 속성이 사용된 요소가, 그 뒤에 오는 요소와 겹쳐서 화면이 깨지는 경우, 뒤에 오는 요소의 float 속성을 해제하여 새로운 줄에 배치

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