3WSCHOOLS 튜토리얼 1-4 마토메
1. CSS HOME
http://www.w3schools.com/css/default.asp
CSS는 HTML 문서의 스타일을 표현하기 위한 언어이다.
CSS는 HTML 요소가 어떻게 나타나야 할 지 기술한다.
본 튜토리얼은 CSS의 기초에서 상급단계까지 포함한다.
2.CSS Introduction
http://www.w3schools.com/css/css_intro.asp
-Cascading Style Sheets
-CSS는 많은 작업을 줄여준다. 여러개 웹 페이지의 배치를 한번에 관리할 수 있다.
-익스터널 스타일시츠는 CSS파일로 저장된다.
CSS는 웹페이지의 디자인, 배열, 다양한 디바이스와 스크린 사이즈에서의 변형을 위한 스타일을 정의하는데 사용된다.
CSS는 HTML3.2부터 시작된 <FONT>와 같은 태그를 사용하며 겪었던 끔찍함을 해결해준다. (모든 페이지마다 폰트나 컬러 정보를 추가해 주던 길과 장황한 개발 과정을 CSS는 해결해 준다.)
스타일시시트 정의는 보통 외부 CSS 파일로 저장된다.
단 하나의 외부 CSS파일로 웹사이트 전체를 바꿀 수 있게 되었다.
3.CSS Syntax
http://www.w3schools.com/css/css_intro.asp
css selector
엘리먼트 네임, 아이디, 클래스, 어트리뷰트(속성) 등에 근거해 html 요소를
찾는데 사용된다.
h1 {color:blue; font-size:12px}
-the element selector
해당 엘리먼트 전체에 적용한다
p {text-align: center;color: red;}
-the id selector
해쉬(#)를 붙여 선택한다. 한 페이지에 하나의 엘리먼트만을 선택해 지정할때 사용한다.
#para1 {}
<p id="para1">
-the class selector
특정 특정 클래스 속성을 엘리먼트에 적용한다. 페이지 안에서 여러번 적용 가능
.center {}
<h1 class="center">
-grouping selector
선언 값이 같은 여러 셀럭터를 (,)로 나열, 동시에 사용해서 코드를 간소화 한다.
css coments
/* */
4. How To
http://www.w3schools.com/css/css_howto.asp
css를 삽입하는 세가지 방법
-external style sheet: <head>섹션에 외부 css파일 링크 참조로 포함시킴.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
external ss는 메모장으로 만들 수 있다. 파일은 html태그를 포함할 수 없다. .css 양식 파일로 저장되어야 한다.
만들기의 예:
body {background-color: lightblue;}
h1 {color: navy;margin-left: 20px;} ->css파일로 저장
-multiple style sheets: 익스터널 스타일시트와 인터널 스타일시트에서 다른 벨류값을 지정하고 있다면, 더 나중에 쓰여진 쪽의 것이 적용된다.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {color: orange;}
</style>
</head> ->글자색은 오랜지로.
-cascading order:
'개인 자료-비공개 > CSS 마토메' 카테고리의 다른 글
| 3WSCHOOLS 튜토리얼 5-12 마토메 (0) | 2016.08.10 |
|---|
