[Lab3] HTML CSS Basic

CSS Syntax

 

CSS selector

- element selector

p {
  text-align: center;
  color: red;
}

- id selector

#para1 {
  text-align: center;
  color: red;
}

- class selector

.center {
  text-align: center;
  color: red;
}

 

 

특정 element에서만 사용되는 특정 클래스 스타일을 정의할 때

p.center {
  text-align: center;
  color: red;
}

<p class="center large">This paragraph refers to two classes.</p>

 

스타일을 모든 HTML element에 적용할 때: * 을 사용

* {
  text-align: center;
  color: blue;
}

 

CSS 주석

/* comments */    로 표현

/* This is
a multi-line
comment */     여러 줄인 경우

 

 

웹페이지 화면의 가로 길이에 따라 내용 박스 위치 조정

- 최대 너비(600px)보다 커지면 세개의 column 블럭이 좌우로 배치

- 최대 너비보다 작아지면 세로로 배치

- 전체 코드에 대해 box-sizing 필요

* {
  box-sizing: border-box;
}

.column {                
	padding: 5px;
	width:33.3%;
	height:300px;
	float:left;
	}
            
@media (max-width: 600px){
	.column {
		width: 100%;
		}
	}