CSS 요소의 그룹화

지금까지 여러분은

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태그들이
새로운 줄을 생성하죠

이 페이지의 예시를 보세요

헤딩, 문단, 리스트

브라우저는 매번
새로운 줄을 추가해요

여러분이
태그를
쓸 필요가 없게 말이죠

근데 이게 과 에
무슨 상관이죠?

은 줄 요소를 만들고

는 구역 요소를 만들어요

즉 여러분이
를 추가하고

다른 스타일을
적용하지 않는다면

브라우저는 그 페이지 부분을
구역화할 거에요

방금 안에 여러 텍스트가
포함되었던 것 처럼요

이제 새로운 줄이
앞뒤로 추가되었어요

어쩌면 이게 여러분들이
원하는 걸지도 몰라요

그냥 이 차이점을
새겨두기로 해요

그리고 계속해봐요

이 태그로 할 수 있는게
아주 많으니까요

특히 이 강력한
로 말이죠