지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
보더(border)에 대해
전반적으로
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (보더(border)에 대해)
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 패딩에 대해서 알려드리면서 박스 안의 박스를 통해 색상변경과 패딩 값을 변경하는 방법에 대해 알려드렸는데요. 만약
tm-csc.tistory.com
이번 글에서는
class에 대해
알려드리도록 하겠습니다.
그럼 먼저 VSC를
실행시켜주세요.
그리고 이렇게
span이라는
글을 쓰기 위한
박스를 만들어주시고요.
body에 마진 값을
20px정도 주겠습니다.
그렇게 하고 크롬으로
확인해보면
이렇게 나오게 되죠.
그럼 span에 스타일을
줘볼까요?
span {
background-color: black;
color: white;
padding: 10px;
}
이렇게 배경색은 검정
색상은 흰색
패딩 값은 10px로
스타일을 줬습니다.
그리고 확인해보면
이렇게 스타일이 변경된 것을
확인할 수 있죠.
그럼 span을 하나 더 만들고
마진 값도 줘볼게요.
이렇게 마진 값으로는
20px을 주고
span을 하나 더 복사했는데요.
크롬에서 F12버튼을 눌러
요소 검사를 해봤지만
마진 값이 사방이 아닌
좌, 우에만 적용된 것을
확인할 수 있습니다.
이유는 바로 inline블록은
높이와 너비가 없기 때문이죠.
그래서 위와 아래에
margin 값을 가질 수 없죠.
물론 패딩은 콘텐츠와
보더 사이의 거리를 나타내니
위, 아래, 좌, 우 모두 가지지만
margin값은 좌우만 가질 수 있죠.
이 사실은 꼭 기억하셔야
나중에 적용하실 때
실수하지 않으실 거예요.
서론이 조금 길었네요
span은 일단 아까보다 조금 더
많이 복사해볼게요.
그런데 이렇게 많은
Span들 중에 특정 Span만
스타일을 변경하고 싶다면
어떻게 해야 할까요?
당연히 저번에 알려드렸던
ID를 사용하면 되겠죠?
하지만 이렇게 규칙적으로
변하게 하고 싶어도
아이디는 고유의 값이니까
다르게 적어야 하며
결국 스타일도 하나씩
지정해줘야 하는데요.
이런 스타일을 주기 위해
하나씩 ID를 지정하고
스타일을 주는 건
정말 비효율적입니다.
그래서 이렇게
아이디 적고 , 쉼표 적고
아이디 적는 방식으로
사용 가능한데요.
이 방법도 효율적이지 않아
보이기는 마찬가지입니다.
그래서 ID처럼 고유의 값은
아니지만 반복해서 사용 가능한
그래서 한 번만 적으면 되는 것이
바로 Class입니다.
그럼 오늘은 여기까지
익히시고 다음 글에 이어서
Class에 대해 자세히
알려드리도록 하겠습니다.
여기까지 궁금하신 점이
있다면 댓글에 남겨주시고
공감과 구독도 부탁드립니다.
