CSS 기본문법,셀렉터

/*주석*/

[CSS 기본문법]
스타일을 적용 받는 대상{속성 : 속성값;} ←중괄호 사용, 콤마 다음 세미클론 사용

 

<link>태그는 연결하는 요소들이 다양하기 때문에 rel 속성을 사용하여 연결하는 요소의 정보를 나타내어야 한다.

ex)</link href="스타일.css" rel="stylesheet">

 

하나의 속성안에 속성값이 여러개가 들어가는 경우 속성값을 한칸씩 띄고 나열하면 됨

ex)스타일을 적용 받는 대상{속성 : 속성값; 속성 : 속성값; 속성 : 속성값 속성값 속성값;}

@import url("스타일.css");  → 외부 CSS문서 연결

 

■CSS의 다양한 정의방법(어디에다 작성하는가)
  (1)CSS파일 : 연결하는 모든 웹문서가 스타일을 공유
     -html 안에서 <link>태그를 사용하여 연결하여 연결
  (2)<style>태그 : 해당 문서안에서 여러요소(태그)가 스타일을 공유
  (3)style속성(인라인스타일) : 해당 요소에만 스타일을 적용함.

 

 

[셀렉터의 유형]

-셀렉터 : CSS에서 대상을 구성하는 요소
(1)태그셀렉터 : 태그를 대상으로 스타일 부여
(2)아이디셀렉터(#아이디명) : 아이디를 대상으로 스타일부터
id속성은 중복불가이다. 문서안에서 동일한 아이디값을 가지는 요소가 있으면 안된다.
(3)클래스셀렉터(.클래스명) : 클래스를 대상으로 스타일을 부여
-class속성은 id속성과 다르게, 중복부여가 가능하고, 여러값을 다중부여가 가능하다.

※아이디명, 클래스명 부여시 주의사항
①숫자로 시작하면 안되고, 숫자로만 되어있어도 안된다.
②클래스의 다중부여 경우를 제외하고, 띄어쓰면 안된다.

 

color : 글자색상

background : 배경색

width : 너비

letter-spacing : 글자사이간격(자간)

line-height : 행높이(=줄간격)

text-align : 글자정렬

text-indent : 하나의 문단 안에서 들여쓰기 or 마이너스(-)설정하면 내어쓰기

text-decoration : (underline : 밑줄, overline : 윗줄 line-through : 취소선)

text-transform : (uppercase : 모두대문자, lowercase : 모두 소문자, capitalize : 각 단어의 첫글자를 대문자로)

font-family : 글자체(폰트)

 -여러개의 폰트를 설정하면 차순위를 두는것으로 앞에서부터 순차적으로 적용된다.

  해당폰트가 없거나 지원하지 않으면 다음 작성된 폰트를 적용한다.

font-size : 글자크기

font-weight : 글자굵기(bold : 굵게, normal: 기본값)

font-style :( italic: 글자 기울리기)

 

[단축속성 (축약속성)]

font : [스타일] [굵기] [글자크기] [행높이] [글자체]

ex) font : italic bold 50px/80px "궁서";

 

 

 

[박스의 구성]

모든태그는 네모로생김

 

■ 박스의 구성(p184)
  (1)content영역 : 태그안, 내용을 작성하는 곳(텍스트, 또 다른 태그)
   -width속성과 height속성에 의해 크기조절됨.
  (2)padding영역 : 내부여백(or 영역의 확장)
   -background만 표현됨.
  (3)border영역 : 테두리
  (4)margin영역 : 외부여백

    -상대적위치로 해석이 가능한 이유 : 마이너스값을 사용가능.
    여백보다는 위치로 이해하는게 더 편함.