CSS 내부스타일 기본적인 개념 정리 및 사용 방법

오늘은 정말 중요한걸 배웠습니다. 그동안 저도 햇갈렸던 부분이었던 내용이었습니다. 역시! 모름지기 사람은 배워야 합니다. 고인물은 썩기마련! 두뇌에 맑은 지식의 샘물이 솟나아고 흐를 수 있도록 늘 끊임없이 알아가야 합니다.

CSS 사용에 대한 부분이었는데, 햇갈린 부분이 id 와 class 의 사용이 어떻게 다른건지가 좀 개념 정리가 안되었었고, CSS 적용 범위 부분에 대해서도 좀 고민이 많았는데 드디어 이번 기회를 통해서 명확한 정리가 되었습니다. 그러면 오늘 배운 내용을 복습 겸 다시한번 정리해 놓도록 하겠습니다.

우선 기본 형태를 구성합니다. 본문 body 태그 안에는 p태그로 저렇게 글씨를 넣어봤습니다. 여기까지는 큰 어려움은 없습니다. 미리보기로 확인해 보겠습니다. 참고로 사용 프로그램은 브라켓 입니다.

네. 아주 평범한 텍스트가 정상 출력되는것을 확인할 수 있습니다.

이번에는 html 안쪽의 body 태그에 직접적으로 스타일을 만들어 보겠습니다. 이와같은 방식을 "인라인 스타일 방식" 이라고 합니다. 하나의 태그라인에 직접 스타일을 꾸민다는 의미입니다. 본문 전체의 배경색을 오렌지 색상으로 넣어보겠습니다.

확인해보시면 이렇게 배경 색상이 오렌지색으로 변경된것을 알 수 있습니다.

이번에는 본문이 아닌 p태그에 스타일을 만들어 볼텐데요, 인라인 방식이 아닌 head 태그안에 style 을 만들어서 변경해 보겠습니다. 이와같은 방식을 "내부 스타일 방식" 이라고 합니다. 글씨 색상만 빨간색으로 만들어봤습니다. 출력을 해볼까요?

그렇습니다. 글씨가 빨갛게 변경됩니다.

이번에는 id 에 대한 개념을 정리합니다. class와 비슷한 기능을 가졌으며 해당 태그에 일종의 이름을 지어줘서 해당 이름을 가진 태그에 대한 세부 스타일 설정을 할 때 사용하게 됩니다. 여기에서는 본문 안에 div 태그를 만들어서 텍스트를 감싸주었고, 이 div 의 id를 A01 이라고 이름 지어 줬습니다.

이렇게 생각하시면 됩니다. 반려동물이 html 태그들, 그 중에서 고양이는 div 이고, 이 고양이의 이름이 바로 A01 인 것입니다. 그래서 나는 A01에게 테두리를 만들어 줄건데, 두께는 2픽셀이며 일반 선이고, 이 선 색상은 빨간색으로 만들꺼야! 하는 부분이 저기 빨간색 화살표 부분인 것 입니다. 그리고 A01의 크기는 높이가 100픽셀짜리 입니다. 가로부분에 대한 지정을 하지 않으면 100% 라고 인식합니다.

그리고, A01 이라고 하는 div 안쪽에 이번에는 h2 태그를 사용해서 소제목을 넣고, 이 h2의 이름을 B01 이라고 지어줬습니다. 또한 내부스타일로 B01에 대한 속성값을 글씨를 빨간색으로 나오게끔 했습니다.

여기서 다른점이 보이시죠? div에는 id가, 그 안쪽의 태그들은 class가 사용되었습니다. 그렇습니다. 보통 id를 사용하는 경우는 큰 덩어리에 대한 설정을 부여할 때 많이 쓰이고, class를 사용하는건 세부적인 요소들에 대한 설정을 변경하고 일괄적용시키고자 할 때 사용됩니다. 그래서 티스토리 스킨을 분석해 보시면 id 보다는 class가 훨씬 많습니다. 또한 차이점은 id에 대한 설정은 늘 #으로 엮어서 설정을 지정해주며, class는 .으로 엮어서 설정해줍니다. 저기 보시면 스타일에 #A01 과 .B01 이 사용된것을 확인하실 수 있습니다. 이 부분은 거의 공식이므로 그냥 외워두시는걸 추천합니다.

id → #

class → .

지금 위의 요소들로 구성된 태그들에 의해 과연 웹에서는 어떻게 보여질까요? 한번 확인해 보세요.

그렇습니다. 이렇게 나타나게 되겠죠.

이번에는 아까 만들어 두었던 B01의 클래스값을 h2 태그가 아닌, p태그에 적용시켜 보겠습니다. 이렇게 변경하면 어떻게 될까요?

그렇습니다. 색상 적용 대상이 변경되었음을 알 수 있습니다. 내부스타일의 장점 중 하나입니다. 언제든지 원하는 태그를 대상으로 변경 및 수정을 용이하게 진행할 수 있습니다. 인라인 방식은 태그별로 하나하나 다 작성해서 적용시켜야 하는 단점을 내부스타일로 말끔히 해결할 수 있습니다.

이번에는 본문안에 리스트 태그를 넣었습니다. 그리고 이 리스트 태그에 대해서도 스타일을 만들어 보았습니다. div 안에 있는 li 태그이므로 id 값으로 이름을 지어주기 보다는 이번에도 class로 지정하는것이 바람직해 보입니다. 그래서 B02 라고 이름을 지어줬구요, 해당 스타일은 위에 보시는 그대로 입니다. 높이는 그냥 리스트가 채워지는대로 자동으로 선택되게 하며, 테두리는 아까 위에서 했던 내용과 같습니다. 가로 크기는 300px 입니다. 그리고 margin 값은 떨어뜨리는 정도를 지정해주는 태그입니다. 숫자 순서가 가르기는 부분은 각각 위, 오른쪽, 아래, 왼쪽에 대한 수치 입니다. 따라서 0 0 0 10 이라는 이야기는 위, 아래, 왼쪽은 떨어뜨리지 않고, 아래로만 10px 떨어뜨리겠다는 뜻이 됩니다. 그러면 결과 확인을 해보겠습니다.

그렇습니다. 이렇게 되겠지요?

내부스타일의 장점이 아까 유동성 이라고 말씀 드렸죠? 아까 ul 리스트의 이름을 B02라고 지어줬습니다. ul 태그 안에는 반드시 들어가는 태그가 li 입니다. 그래서 이번엔 ul이 아닌 li 개별로 적용을 시켜보고싶다면 어떻게 할까요? 위에 나온대로 스타일안의 .B02 다음 한 칸을 띄우고 li 라고 입력하시면 됩니다. 이것은 "B02 라고 하는 이름이 적용된 태그 중에서 li 라고 하는 태그에 대해서만 이 스타일을 적용시켜라!" 라는 뜻 입니다. 결과물을 보시면 이해가 되실 것입니다.