지금까지 여러분은
CSS를 이용해 텍스트에 스타일을 주는 법을 배웠고
또 CSS를 이용해서
페이지의 레이아웃을 변경하는 것을 배웠어요
즉 위치를 바꿀 수도 있고
크기를 바꿀 수도 있고
서로 겹치게 할 수도 있죠
하지만 우리가 움직이고 싶은 것들은 과연 무엇일까요?
가끔 그건 요소에요
우리가 이미 만들어둔 것들요
특정 문단이나
특정 헤딩같은 것들이죠
하지만 종종 그것들은
우리가 만들어 둔 요소의 집합일거에요
텍스트 묶음이나
헤딩과 몇 개의 문단들 같은 것들요
이것들을 움직이기 위해서는
한 묶음으로 같이 말이죠
두 개의 새로운 HTML 태그를 소개해야겠네요
우리는 요소들의 그룹화라고 불러요
CSS를 배우기 전에는 얘기하지 않았어요
왜냐하면 이것들은 단지
CSS와 결합되었을 때만 유용하기 때문이에요
이것은 브라우저에게는 어떤 의미를 주진 않아요
첫번째 태그는 이에요
이 태그는 텍스트의 그룹화에 사용해요
예를 들어 색상을 적용하고 싶은데
"Love Red"라는 단어에 적용한다고 해볼게요
우리는 단어에만 색상을 주고 싶어요
나머지 헤딩은 말고요
여기 "Love"앞에 커서를 두고
시작 태그로 을 쓰세요
그리고 태그를 닫고요 좋아요
이제 스타일을 적용할 거에요
이 사이의 문자에 말이죠
우리는 페이지의 모든 에 색상을 적용할 수도 있어요
하지만 모든 걸 빨갛게 하고 싶지 않을 수도 있죠
이 에게
"lovey-dovey"라는 클래스를 주도록 하죠
그리고 이 요소에게만 적용하는 규칙을 추가해요
"lovey-dovey"라는 클래스를 가지는 요소들에게만요
그러면 lovey-dovey에게 color: red라고 하죠
저 텍스트가 이제 얼마나 달콤해졌는지 보세요!
은 텍스트의 그룹화를 하는데 유용해요
그렇다면 여러 요소들의 그룹화는 어떻게 하면 될까요?
여기서 태그가 등장해요
이 페이지 하단 부분을 그룹화하고 싶다고 해봐요
공식 정보 헤더와
문단과 그 아래에 있는 그림까지요
이걸 하기 위해서
태그 앞에 커서를 두고
태그를 열게요
그리고 마지막 문단으로 내려가서
태그를 닫아요
이제 가 생겼으니 스타일을 줘야겠죠
에 스타일을 적용하려면
id를 줄거에요
"official-info" 라고 할게요
그리고 이 id에 대한 규칙을 추가해요
그럼 #official-info 그리고 background:
멋진 회색으로 해보죠
이렇게 하고 좋아요
이제 를 보면
모든 요소를 속에 포함하는 회색 상자가 되었어요
만약 각각 하나씩
회색 배경을 주는 것과는 다를거에요
만약 그렇게 했다면 사이에 공백이 있어서
이렇게 전체가 회색은 아닐 거에요
우리는 를 이렇게 사용해요
모든 요소들 주위에 박스를 만들고 싶을 때죠
을 사용할 때는
텍스트를 그룹화 할 때에요
를 사용할 때는
요소들을 그룹화 할 때에요
하지만 두 개를 구별할 다른 방법이 있어요
CSS세계에서는 두 가지 종류의 요소가 있어요
줄(inline)과 구역(block)이죠
줄 요소는 요소 다음에 새로운 줄이 없어요
여러 개의 줄 요소가 있다면 같은 줄에 위치할 거에요
우리가 얘기했던 것들 중에는
a와 image태그가 있죠
이 이미지를 보면
텍스트가 바로 따라오는 것을 볼 수 있어요
뒤에 새로운 줄이 없기 때문이죠
구역 요소는 뒤에 새로운 줄이 있어요
거의 모든 HTML태그들이 새로운 줄을 생성하죠
이 페이지의 예시를 보세요
헤딩, 문단, 리스트
브라우저는 매번 새로운 줄을 추가해요
여러분이 태그를 쓸 필요가 없게 말이죠
근데 이게 과 에 무슨 상관이죠?
은 줄 요소를 만들고
는 구역 요소를 만들어요
즉 여러분이 를 추가하고
다른 스타일을 적용하지 않는다면
브라우저는 그 페이지 부분을 구역화할 거에요
방금 안에 여러 텍스트가 포함되었던 것 처럼요
이제 새로운 줄이 앞뒤로 추가되었어요
어쩌면 이게 여러분들이 원하는 걸지도 몰라요
그냥 이 차이점을 새겨두기로 해요
그리고 계속해봐요
이 태그로 할 수 있는게 아주 많으니까요
특히 이 강력한 로 말이죠