티스토리 뷰
선택자 중에서 전체 선택자는 이전 포스팅에서 설명을 해드렸습니다.
그래서 이번 CSS3 기본 선택자 -part1- 에는 전체 선택자를 제외한
-태그 선택자
-아이디 선택자
-클래스 선택자
에 대해 설명을 드리도록 하겠습니다.
START~
1. 태그 선택자
태그 선택자란 특정한 태그를 선택할때 사용이 되는 선택자 입니다.
설명으로 하면 주구장창이니 예제를 통하여 설명을 하도록 하겠습니다.
일단 <body> 부분에다가 이렇게 HTML태그만 적어줍니다.
그러면 이렇게 뜨는게 맞는거죠??
여기서 잠깐! P태그에 대해 간단하게 다시 설명하고 넘어갈게요
P태그
문단을 나누는 태그
완전 간단하게 설명했죠?ㅎㅎ
HTML만 쓰면 저렇게 너무 허접해 보여요 그래서 저는 스타일 태그를 사용할거에요
요렇게 스타일 태그를 적용해 줍니다.
그러면 이렇게 글자에 색이 입혀져요
저 위의 내용에 대해 간단하게 해석하고 넘어갈게요
HTML부분에서 h1태그를 사용한 곳에다가 색을 입히겠다는 뜻입니다. 그 색은 color 속성에 red를 적용하겠다는 뜻! | ||
이거는 p가 사용된 태그에서 글자색을 입히겠다는 의미 인데요 color 속성을 사용하여 그 키워드는 blue를 적용하겠다는 의미! | ||
2. 아이디 선택자
아이디 선택자는 HTML에 id 즉, 태그마다의 이름을 지정해줄 수 있습니다.
*참고로 id 속성은 웹 표준에 의해 웹 페이지 내부에서 중복되면 안됩니다.^^
예제를 통해서 한번 확인해 볼게요
이렇게 <body> 부분에다가 div태그를 사용해 줍니다.
※div 태그는 벽돌쌓기 라고 생각하시면 쉬워요^^
각 div 태그에다가 id(이름)을 부여해 주었습니다.
이렇게 결과값이 나와요
너무 식상하고 안예뻐서 style태그를 입혀볼게요
#header 이라는 문법이 처음 나왔어요
#header
요놈은 header태그(h1, h2, h3, h4, h5, h6)를 전부다 스타일 태그를 씌우겠다 라는 의미 입니다.
즉, header 태그를 width(폭)은 800px으로
margin 0이라고 나와 있습니다. 간단하게 설명드리자면
margin
기본적으로 HTML 태그들은 브라우저에서 설정된 기본 스타일 값을 가지고 있습니다.
즉, 자기 브라우저마다 자기만의 고유 성질을 가지고 있다고 보시면 되요
margin 0; -> 브라우저에서 기본으로 설정되어 있는 모든 margin(밭깥쪽 여백)값을 없애겠다는 뜻 입니다.
따라서 margin을 0으로 초기화 하겠다 라는 의미 입니다.
auto는 저도 정확하게 모르겠습니다. 제 추측에 의하면 자동으로 해준다? 라는거 같아요
background(배경)은 red(빨강) 으로 해주겠다.
결과값은 이렇게 보여요
이제 CSS 내용을 좀 더 추가해 볼게요
설명 들어가기 전에 overflow 부터 간단하게 설명하고 시작할게요
overflow
HTML 태그는 하나하나가 박스로 구성되어 있습니다.
내용이 길어지면 그에 맞게 박스도 자동적으러 커집니다.
하지만!!!
박스의 크기를 설정했을때 내용물이 박스를 넘어갈 경우가 생깁니다.
이런 상황을 위해 overflow를 사용합니다.
overflow는 4가지의 값들이 존재합니다.
-visible : 내용물이 박스를 넘거다고 보여줍니다.
-hidden : 내용물이 박스를 넘어간 부분은 않보여준다.
-scroll : 내용물이 박스를 넘어가든 넘어가지 않든 스크롤바를 만든다.
-auto : 내용물이 박스를 넘어가지 않으면 스크롤바가 없고
내용물이 박스를 넘어가면 스크롤바를 만든다.
(즉, 자동으로 자기가 알아서 만든다.)
overflow에 대해 알아보앗으니 설명 들어가겠습니다.
"wrap라는 아이디를 가지는 놈을
width(폭)을 800px으로 하고
margin은 0으로 초기화하고 auto로 값을 줍니다.
overflow를 hidden 즉, 내용물이 넘어간 부분은 않보이게 처리해 준다!"
계속 style내용을 추가하도록 할게요
"aside라는 아이디를 가진 놈에다가
width(폭)을 200px로
float를 left(태그를 왼쪽에 붙인다.)
background(배경)은 blue(파랑)으로 하겠다."
float
-left : 태그를 왼쪽에 붙인다.
-right : 태그를 오른쪽에 붙인다.
"content 라는 아이디를 가진 놈에게
width(폭)은 600px로
float : left; 태그는 왼쪽에다가
background(배경)은 green으로 하겠다"
3. 클래스 선택자
정의 : 특정한 클래스를 가지고 있는 태그를 선택할때 사용하는 태그
사용 방법 : .클래스
너무 안이쁘게 나오죠??
여기서 클래스 선택자를 사용해서 한번 이쁘게 만들어볼게요
이게 끝이에요!
뭐 굳이..설명드리자면
"select 클래스를 가진 놈들에게 글자색을 빨강으로 해버리겟다" 라는 거에요
'허접한 프로그래밍 > HTML5+CSS3' 카테고리의 다른 글
| 후손 선택자와 자손 선택자 (0) | 2013.12.24 |
|---|---|
| 속성 선택자(기본 속성, 문자열 속성) (0) | 2013.12.23 |
| [태그]전체 선택자 * (0) | 2013.12.20 |
| CSS3 시작하기 [사용 방법] (0) | 2013.12.20 |
| 각종 태그들 (0) | 2013.12.20 |
