정리_CSS/생활코딩

CSS 적용법:

1. 해당 태그 안에 style 속성으로

  형식: style="속성:값;속성2:값2"   ex) a herf="01.html" style="color:red;font-size:45px"

  ※ 여기서 style은 html의 속성이고, color는 style CSS 속성이다.

 

2. 선택자를 이용

   (1) head 태그 안의 style 태그 안에

   (2) style.css 파일 안에  →  link rel="stylesheet" href="style.css"

  형식: 선택자 { 속성:값;속성2:값2; }   ex) a { color:red;text-decoration:none; }

 

※ 선택자의 종류

 ① tag 선택자   a {}

 ② class 선택자   .saw {}   ex) a href="01.html" class="saw"

 ③ id 선택자   #active {}   ex) a href="02.html" id="active"

 ※ class는 여러개 가질 수 있고, 띄어쓰기로 구분한다.

 ※ class와 id를 동시에 가질 수 있다.

 

※ border 속성의 값들을 띄어쓰기로 구분하고 합쳐서 쓸 수 있다.   ex) h1, a { border: 5px red solid }

 

 

 

박스모델:

HTML 태그 하나하나를 네모난 박스로 취급해서 그것의 부피감을 결정하는 것

① block level element - 화면 전체 사용

② inline element - 자기 크기만큼 사용

→ 이것은 display 속성으로 바꿀 수 있다.   ex) display:inline

 

예제) h1 태그 아래쪽과 ol 태그 오른쪽에 테두리를 주고,

 margin과 padding 값을 조정하여 그림과 같이 줄 긋기

 

 

 

그리드:

① div - block level element

② span - inline element

 

나란히 놓으려는 두 태그를 div id="grid"인 태그로 묶고

#grid { display:grid;grid-template-columns:150px 1fr }

 

예제) 그림과 같이 나란히 배열하고 padding 조정하기

 

 

 

반응형 디자인:

화면의 크기에 따라

웹페이지의 각 요소들이 반응해서

최적화된 모양으로 바뀌게 하는 것

 

미디어 쿼리: style.css파일 또는 head 태그 안의 style 태그 안에 쓴다.

@media(max-width:800px) { 속성 }

→ 화면의 가로 크기가 800px 이하일 때

 

예제) 위 그리드 모델에서 만들었던 것을

 화면의 가로 크기가 800px 이하일 때는 그림처럼 바뀌도록 해보자.