셀렉팅만을 위한 Tag : <div> vs <span>
셀렉터는 id, class등으로 지정될 수도 있구요, 혹은 div처럼 태그 자체를 활용할 수도 있습니다. 이런 용도로 흔히 사용되는 태그는 div와 span 입니다.
html 문서에 삽입되는 콘텐츠들을 단순히 묶고 동일한 css속성값을 주기 위해, 특별한 기능 없이 고안된 태그들이 존재하는데요. 가장 유명한 세 친구는 div, span, p 입니다.
이중에서 <p> 태그는 사실 특별한 기능이 아주 조금 있습니다. 이름에서 알 수 있듯이 해당 영역의 콘텐츠가 하나의 paragraph라는 뜻을 가진 일종의 시멘틱 태그입니다. 이전 포스트에서 다뤘듯이 메타데이터를 포함하는 놈이라 서칭에 1g 정도의 도움을 주죠!
반면에 div와 span은 정말 의미가 없는 놈들인데요, 대신 활용도는 가장 높은 태그입니다. 차이와 용도는 뭘까요?
1. <Div>
<div> 태그는 아무런 의미도 없습니다. 대신 해당 element에 class 나 id를 부여하기 위한 일종의 컨테이너로 기능하지요.
웹에 굴러다니는 수많은 페이지들은 css를 통해 구상되어 있고, 텍스트 뿐만 아니라 이미지, 동영상, 기타 등등의 컨텐츠로 구성되어 예쁘게 배열되어 있는데요, 이럴때 꼭 필요한 컨테이닝과 래핑 작업을 위해 사용되는 태그입니다.
<div>로 감싸진 요소들은 하나의 블록 요소가 되고, 그 줄 전체 가로의 너비를 차지하게 됩니다.
2. <span>
<div> 태그에 대해 대충 알아봤다면, 그럼 이 의미없는 선택자용 태그들은 디브로 통일하면 되지 왜 번거롭게 <span>이란 놈도 만들어서 구분을 해버린 걸까요? 배우면서 느끼는 거지만 컴퓨터는 정말 똥멍청이에요. 눈치라는 게 없습니다.
용도적인 측면에서 <span>태그는 <div>와 동일합니다. 유일한 차이는 display attribute값이 block인지 inline 인지 입니다. <div>는 block, <span>은 inline.
match point: block vs inline
block과 inline의 속성값 차이는 간단히 말해서 한 줄을 차지하느냐? 여부입니다.
diplay : block 의 경우 한 줄을 모두 차지합니다. 다음 요소들은 무조건 다음 줄로 넘어가게 되어 있어요. 대신 width나 height 값을 설정해 너비나 높이 값을 구체적으로 명시할 수 있지요.
반면 display : inline 의 경우는 내부의 콘텐츠 사이즈 만큼만 화면을 차지합니다. 내부 콘텐츠가 짝딸막하다면 다음 요소들도 줄바꿈이 되지 않고 옆으로 총총 쓰여지겠지요! width, height값은 내부 콘텐츠를 통해 주어지므로 css상에서 통제할 수 없습니다.
이보다 자세한 사항은 css display 글을 참고해 주세요! 아직 쓰여지지는 않았지만요. 언젠가 쓰게 되지 않을까요?
Tag 의 중복 활용
css페이지, 혹은 html 내 style 태그 안에서 서로 다른 두 개의 클래스에 예쁜 색칠을 했다고 가정해 볼까요.
<style>
.background {
background-color: aquamarine;
}
.font {
color: red;
}
</style>
이러면 이렇게 흉측한 색배합을 볼 수 있습니다.
그렇다면 만약 백그라운드 컬러와 폰트의 색을 동시에 입히고 싶은 경우엔 어떨까요?
한 영역에 두 개의 클래스를 중복해서 줄 수 있을까요?
네, 그렇습니다. 클래스는 띄어쓰기를 통해 두 개를 동시에 먹일 수 있습니다.
<div class="background">
여기는 백그라운드 컬러만 지정
</div>
<div class="font">
여기는 폰트 컬러만 지정
</div>
<div class= "font background">
여기는 중복 클래스를 주는 부분입니다
</div>
네, 이렇게 띄어쓰기를 통해 두개의 클래스를 지정한 영역을 확인할 수 있었습니다! 감사합니다~
