1.CSS 소개 및 기본형태
1. CSS 소개 & 기본 형태
-
CSS란 HTML 꾸미는 요소
-
CSS 의 기본형태
-
selector { property: value; }
2. CSS 사용방법
-
link태그 사용해서 가져오기 (가장 많이 쓰는 형태)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./styles.css"/ > <title>Document</title> </head> <body></body> </html> -
HTML 내부에서 사용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> selector { property: value; } </style> </head> <body></body> </html> -
inline style 작업 : 아주 특별한 경우가 아니면 쓸 필요가 없다.(나중에 유지보수때 CSS가 문제가 있는데 HTML 파일을 뒤져야하는 아주 않좋은 상황이 발생)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p style="font-size: 32px"></p> </body> </html>
3. CSS 환경 세팅
-
Chrome
-
VSC
-
groormride
4. 실습 CSS를 위한 준비
- —아직 실습이 아닌 이론시간이므로, 실습에 들어갈때 다시 보도록 하자—
Leave a comment