[HTML, CSS 기초] class, id 선택자
[HTML, CSS 기초] class, id 선택자
사실 지난 주부터, CSS 카테고리에 글을 올려야겠다고 맘을 먹긴 했는데
글 쓰기가 정말로 쉽지 않네요. 머릿속으로는 대충 알고 있어도, 이론적으로 풀어내려니
또 빠짐 없이 다루어야 한다는 부담감 때문에 글 하나 만들어내기가 어렵게 느껴지네요^^
이러다간 점점 글 쓸 자신이 없어질까 봐 이제부터 그냥 맘 편하게 쓰려고 해요...
지난 시간에 HTML과 CSS 차이에 대해 알아 보고 작성법도 간단히 알아 봤습니다.
CSS란? (HTML과 CSS의 차이, CSS 작성법)
HTML 작성은 이렇게 하고
<태그 속성="속성값">내용 </태그>
예: <p align="center">내용 </p>
CSS 작성법은 이렇게
선택자 {속성:속성값; 속성: 속성값;}
예: p {
text-aglign:center; color: red;
}
[ID와 CLASS]
오늘 알아볼 선택자는 id와 class 입니다.
id 는 스타일을 지정할 때 한 가지만 지정해서 쓰는 이름이고(표기방식은 #이름)
하나의 문서에 고유한 id 하나밖에 쓸 수 없습니다.
class 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이에요. (표기방식은 .이름)
ID, CLASS 이름은 자유롭게 지으면 되지만 숫자로 시작해선 안 됩니다.
#8palign=> X
|
[ID] |
스타일을 주는 방식은, 3 가지 방식이 있다고 했는데요
(inline,internal,external )
CSS란? (HTML과 CSS의 차이, CSS 작성법) 참조
1. inline은 아래 예제에서 굳이 id를 사용할 필요성이 없어 생략했습니다.
2. internal
|
<html> <head> #h1color { color:blue } <body> |
많은 페이지에 동일한 스타일을 적용하려면 3번 external을 사용하는 게 제일 편리합니다.
3. external
㉠확장자 .css로 저장 (예:test.css)
|
color:red; text-align:center; } #h1color { color:blue; } |
㉡확장자 .htm으로 저장(예:main.htm)
|
<html> </head>
|
ID 실행화면 입니다.
[지구별 홈피에 오신 것을]은, 빨간색 중앙 정렬
[환영 합니다]는, 파란색으로 스타일이 지정되었습니다.
|
[CLASS] |
(external)
㉠확장자 .css로 저장 (예:test.css)
|
color:red; text-align:center; } |
㉡확장자 .htm으로 저장(예:main.htm)
|
<html> </head>
|
class 실행 화면입니다.
태그 p와 h1을 그룹으로 묶어 같은 속성을 주었습니다.
(빨간색 글씨와, 중앙 정렬)
위에서는 p와 h1에 같은 속성(빨간색 글씨, 중앙 정렬)을 주었는데
이번엔 p에만 속성을 주겠습니다.
차이점이라면 .start를 => p.start로 고칠 것!
㉠확장자 .css로 저장 (예:test.css)
|
color: red; text-align:center; } |
㉡확장자 .htm으로 저장(예:main.htm)
|
<html> </head>
|
실행하면 p 부분만 스타일이 적용된 것을 확인할 수 있습니다.
