먼가 문법적으로 설명하기엔 부족해서 예문을 들어서 보여주겠다.
1. 배경
- 배경 색갈 지정 : body {background-color:#fff} / 페이지 배경색을을 fff로 지정한다.
- 배경 그림 첨가 : body {background-image:url ('hello.jpg'); / hello.jpg를 배경으로 지정한다.
ⓐ 옵션
- background-repeat:value; / value에는 "no-repeat" or "repeat"로 지정되며 배경그림의 반복여부이다.
> repeat는 repet(모두반복), repeat-x(x축반복), repeat-y(y축반복)으로 또 새분화된다.
- background-position:center top; / 이미지의 위치를 지정해주는 것으로 예에서는 중앙 맨위에 위치한다.
2. 문서
- 거의 모든 태그에서 property로 사용된다. 때문에 selector를 지정하지 않고 예를 주겠다.
- color: #FFF; / 문서의 색을 FFF로 지정해준다.
- text-align: value / value로는 center(중앙), left(왼쪽), right(오른쪽)이 있으며 각각의 정렬을 나타낸다.
- text-decoration:value / value로는 none(없음), overline(위), line through(중앙), underline이 있으며
각 위치에 밑줄이 그어진다.
- text-transform: value / value로는 UPERCASE, lowercase, Capitalize가 있으며 문서를
앞의 value값처럼 나태낸다.
- text-indent:value / value값으론 px, pt, em단위의 숫자가 오며 첫 줄의 들여쓰기 간격이다.
- line-height:n% / 줄간격을 n%으로 지정 해준다. 특정 값(px,pt,em단위)이 와도 된다.
3. 글씨
- 글씨또한 모든 태그에 적용되는 property중 하나이다.(왠만한 태그엔 다 글씨가 있잖아?)
- font-family: font1,font2,...; / 출력 폰트를 나태내준다.
왼쪽부터 실행되며 없으면 점점 오른쪽으로 가면서 선택해준다.
- font-style: value / value로는 nomal과 italic이 있으며 이태릭 체로 보이게 한다.
- font-size: value / value의 단위는 px, em, pt가 있다. 해당 글씨크기로 변경시킨다.
- font-weight: value / value로는 normal과 bold가 있으며 두깨를 지정해준다.
4. 박스 모델
- 박스 모델이란 우리가 테그를 추가했을 때 그것을 감싸고 있는 영역을 나타낸다.
- 각 영역은 바깥부터 margin, border, pedding과 내용이 들어가는 영역으로 나뉘며, 4방향에 모두 존재한다.
- pedding은 내용이 들어가는 영역과 같은 바탕색을 가진다.
- 각 영역은 다른 태그와의 간격이라고 생각하면된다.
- 다음 그림은 박스 모델을 보여준다.
------------------------------------------------------------------------------------------------------
아래는 property가 아닌 태그의 스타일이 필요한 이유나 스타일 법이다.
또는 그 태그에서만 사용되는 특정 property를 정의했다.
이외의 태그는 위의 property로 스타일하면 된다.
1. 링크
- 링크는 a tag를 스타일링 하기 위해서는 a tag가 가지는 4가지 상태를 먼저 알아야한다.
ⓐ a:link > 방문한적 없는 링크
ⓑ a:visited > 한 번 이상 방문한적 있는 링크
ⓒ a:hover > 마우스가 링크위에 올라와 있는 경우
ⓓ a:active > 클릭이 된 순간
- 다음 4개자 상태에 대해서 property를 정의해주면된다.
2. 리스트
- 리스트의 스타일링은 필요하다.
- List를 보여주는 형식이 각각 브라우져마다 다르기때문에 이를 통일해주는 역할을 한다.
3. 표
- 표에서는 border라는 property가 추가된다.
- border-width:value / 표의 굵기
- border-style:value / 표의 종류로 외각선의 모양이다. 잘쓰는 값으로 dotted, dashed, solid가 있다.
- border-color:value / 선색을 정의 해준다.
-----------------------------------------------------------------------------------------------------
CSS를 작성하는데는 많은 축약이 있다(용량을 줄이기 위해서)
또한, 내가 소개 안한 수많은 property와 잘못된 property도 있을 것이다.
이 모든 것을 외우는 건 불가능하므로 www.w3schools.com 에서 참조하면서 작성바란다.
1. 배경
- 배경 색갈 지정 : body {background-color:#fff} / 페이지 배경색을을 fff로 지정한다.
- 배경 그림 첨가 : body {background-image:url ('hello.jpg'); / hello.jpg를 배경으로 지정한다.
ⓐ 옵션
- background-repeat:value; / value에는 "no-repeat" or "repeat"로 지정되며 배경그림의 반복여부이다.
> repeat는 repet(모두반복), repeat-x(x축반복), repeat-y(y축반복)으로 또 새분화된다.
- background-position:center top; / 이미지의 위치를 지정해주는 것으로 예에서는 중앙 맨위에 위치한다.
2. 문서
- 거의 모든 태그에서 property로 사용된다. 때문에 selector를 지정하지 않고 예를 주겠다.
- color: #FFF; / 문서의 색을 FFF로 지정해준다.
- text-align: value / value로는 center(중앙), left(왼쪽), right(오른쪽)이 있으며 각각의 정렬을 나타낸다.
- text-decoration:value / value로는 none(없음), overline(위), line through(중앙), underline이 있으며
각 위치에 밑줄이 그어진다.
- text-transform: value / value로는 UPERCASE, lowercase, Capitalize가 있으며 문서를
앞의 value값처럼 나태낸다.
- text-indent:value / value값으론 px, pt, em단위의 숫자가 오며 첫 줄의 들여쓰기 간격이다.
- line-height:n% / 줄간격을 n%으로 지정 해준다. 특정 값(px,pt,em단위)이 와도 된다.
3. 글씨
- 글씨또한 모든 태그에 적용되는 property중 하나이다.(왠만한 태그엔 다 글씨가 있잖아?)
- font-family: font1,font2,...; / 출력 폰트를 나태내준다.
왼쪽부터 실행되며 없으면 점점 오른쪽으로 가면서 선택해준다.
- font-style: value / value로는 nomal과 italic이 있으며 이태릭 체로 보이게 한다.
- font-size: value / value의 단위는 px, em, pt가 있다. 해당 글씨크기로 변경시킨다.
- font-weight: value / value로는 normal과 bold가 있으며 두깨를 지정해준다.
4. 박스 모델
- 박스 모델이란 우리가 테그를 추가했을 때 그것을 감싸고 있는 영역을 나타낸다.
- 각 영역은 바깥부터 margin, border, pedding과 내용이 들어가는 영역으로 나뉘며, 4방향에 모두 존재한다.
- pedding은 내용이 들어가는 영역과 같은 바탕색을 가진다.
- 각 영역은 다른 태그와의 간격이라고 생각하면된다.
- 다음 그림은 박스 모델을 보여준다.
- 우리가 크기값(높이와 너비)를 주면 "내용" 박스에만 적용이된다.
- 배경색이나 배경화면을 주면 "내용+padding"박스에 적용이된다.
- 각 박스는 -top(위), -bottom(아래), -right(오른쪽), -left(왼쪽)을 선택가능하다.
- 각 영역의 너비 값으로는 auto(자동중앙정렬/padding은 적용이 안됨), px, %(태그에 대한 상대비율) 가 존재
- IE 6.0이하에선 적용이 안된다.
- 예
ⓐ margin-bottom : 30px / margin박스의 바닥의 간격은 30px이다.
ⓑ margin: 10px 20px / margin박스의 위와 아래는 10px, 좌우는 20px로 간격을 지정
ⓒ margin : 10px 20px 30px 40px / 오는 특성들의 순서는 위부터 시계방향으로 각각의 값이 지정된다.
ⓓ margin : 10px / 전체 10px
5. 디스플래이
- display:value / value로는 none(보이지않음/공간도사라짐), block(행이 바뀜), inline(행이 안바뀜)이 있다.
cf) none와 비교되는 것으로 visibility:hidden이 있다. 이는 단지 안보이게 하는 것으로 공간을 점유하고 있다.
6. 위치
- position:value / value로는 static(기본), absolute(문서상 고정), relative(스크롤에 상대적으로 움직임)
fixed(스크롤이 움직여도 움직이지 않음. 고정좌표)가 있다.
7. float
- flot:value / 요소를 한쪽에 쌓기 위해 사용되며(block이라도 옆으로 연결됨), 창이 꽉찰때 까지 같은 줄에 계속 연결한다. value의 값은 다음과 같다.
left(왼쪽으로 계속 쌓음), right(오른쪽으로 계속 쌓음)
ⓐ margin-bottom : 30px / margin박스의 바닥의 간격은 30px이다.
ⓑ margin: 10px 20px / margin박스의 위와 아래는 10px, 좌우는 20px로 간격을 지정
ⓒ margin : 10px 20px 30px 40px / 오는 특성들의 순서는 위부터 시계방향으로 각각의 값이 지정된다.
ⓓ margin : 10px / 전체 10px
5. 디스플래이
- display:value / value로는 none(보이지않음/공간도사라짐), block(행이 바뀜), inline(행이 안바뀜)이 있다.
cf) none와 비교되는 것으로 visibility:hidden이 있다. 이는 단지 안보이게 하는 것으로 공간을 점유하고 있다.
6. 위치
- position:value / value로는 static(기본), absolute(문서상 고정), relative(스크롤에 상대적으로 움직임)
fixed(스크롤이 움직여도 움직이지 않음. 고정좌표)가 있다.
7. float
- flot:value / 요소를 한쪽에 쌓기 위해 사용되며(block이라도 옆으로 연결됨), 창이 꽉찰때 까지 같은 줄에 계속 연결한다. value의 값은 다음과 같다.
left(왼쪽으로 계속 쌓음), right(오른쪽으로 계속 쌓음)
아래는 property가 아닌 태그의 스타일이 필요한 이유나 스타일 법이다.
또는 그 태그에서만 사용되는 특정 property를 정의했다.
이외의 태그는 위의 property로 스타일하면 된다.
1. 링크
- 링크는 a tag를 스타일링 하기 위해서는 a tag가 가지는 4가지 상태를 먼저 알아야한다.
ⓐ a:link > 방문한적 없는 링크
ⓑ a:visited > 한 번 이상 방문한적 있는 링크
ⓒ a:hover > 마우스가 링크위에 올라와 있는 경우
ⓓ a:active > 클릭이 된 순간
- 다음 4개자 상태에 대해서 property를 정의해주면된다.
2. 리스트
- 리스트의 스타일링은 필요하다.
- List를 보여주는 형식이 각각 브라우져마다 다르기때문에 이를 통일해주는 역할을 한다.
3. 표
- 표에서는 border라는 property가 추가된다.
- border-width:value / 표의 굵기
- border-style:value / 표의 종류로 외각선의 모양이다. 잘쓰는 값으로 dotted, dashed, solid가 있다.
- border-color:value / 선색을 정의 해준다.
-----------------------------------------------------------------------------------------------------
CSS를 작성하는데는 많은 축약이 있다(용량을 줄이기 위해서)
또한, 내가 소개 안한 수많은 property와 잘못된 property도 있을 것이다.
이 모든 것을 외우는 건 불가능하므로 www.w3schools.com 에서 참조하면서 작성바란다.