span 태그는 줄바꿈 및 영역생성 없이, 바로 옆에 배치되는 태그라고 보시면 되는데요. 의외로 span과 p, div 이 3가지 차이점을 모르시는 분들이 꽤 많으신 것같아, 먼저 간략하게 차이점부터 설명드려보도록 하겠습니다.
span, p, div 차이점
span은 위에서 언급드린 바와 같이, 한 영역을 생성하지 않고, 줄바꿈 없이, 가로열로 배치되는 태그라고 보시면 되겠습니다. p는 paragraph의 약어로써, 문단이라는 의미가 있습니다.
그렇기때문에 p태그를 사용하시게 되면, div 태그와 마찬가지로 동일한 블럭을 가질 수있게 되는 것입니다. 그러므로, 가로열이 아닌, p태그가 추가될때마다 세로열로 생성되는 이유입니다.
마지막으로 div태그는 한 영역을 나누겠다, 영역을 지정하겠다라는 태그입니다. 그렇기 때문에 div태그를 여러개 생성할때마다, 가로열이 아닌 세로열로 생성되는 이유입니다. div 태그에 대해 더 자세한 설명글은 이 글을 참고하시면 도움되실거라 생각합니다.
span 태그, 언제 활용하면 좋을까?
웹디자이너, 퍼블리셔 등 자신의 스타일에 따라 사바사가 갈리는 부분입니다만, 여기서는 제 기준으로 말씀드려보도록 하겠으며, 쉽게 설명을 드리기 위해 이미지를 통해서 알아보도록 하겠습니다.
<!-- div 태그를 사용했을떄 -->
<div>가로로</div>
<div>배치하고</div>
<div>싶은데</div>
<div>어떻게 하지??</div>
<style>
div {
width:400px;
height:400px;
font-size:40px;
color:#fff;
}
div:nth-child(1) {
background:tomato
}
div:nth-child(2) {
background:red
}
div:nth-child(3) {
background:blue
}
div:nth-child(4) {
background:pink
}
</style>
<!-- p 태그를 사용했을떄 -->
<p>가로로</p>
<p>배치하고</p>
<p>싶은데</p>
<p>어떻게 하지??</p>
<style>
p {
width:400px;
height:400px;
font-size:40px;
color:#fff;
}
p:nth-child(1) {
background:tomato
}
p:nth-child(2) {
background:red
}
p:nth-child(3) {
background:blue
}
p:nth-child(4) {
background:pink
}
</style>
우선 위 div 태그를 출력했을때 위와 같은 이미지의 결과를 얻을 수있습니다. 마찬가지로, p태그를 사용하더라도, 위와 비슷한 결과가 나타납니다. (문단의 성질을 가지고 있기때문에 각 p태그마다 약간의 공백이 있습니다.)
두 태그의 동일한 특징으로는 세로열로 나타난다는 것입니다. 여기서, css를 활용하여 가로열로 배치해줄 수는 있습니다만, span태그로 사용할 수있는 부분은 span태그로 처리하는 것이 좋습니다. (추후, css 코드를 조금이라도 줄이고자 하기 위함입니다.)
그럼, 위 코드 부분을 span 태그로 한번 바꿔보도록 하겠습니다.
<span>가로로</span>
<span>배치하고</span>
<span>싶은데</span>
<span>어떻게 하지??</span>
<style>
span {
font-size:40px;
color:#fff;
}
span:nth-child(1) {
background:tomato
}
span:nth-child(2) {
background:red
}
span:nth-child(3) {
background:blue
}
span:nth-child(4) {
background:pink
}
</style>
span 태그를 활용하시게 되면, 내가 원하는 영역을 가로열로 배치할 수있습니다. 또, 글자 뿐만아니라, 이미지 태그 링크 태그 등, 부모요소가 span 태그라면, 위 이미지처럼 가로열로 배치됩니다. 추후에, 이를 참고하셔서 코딩연습을 해보시기 바랍니다.
span 태그는 인라인 속성입니다.
span 태그가 위와 같이 가로열로 배치할 수있는 이유는 인라인 속성을 가지고 있기때문입니다. 또, 인라인 속성만의 장점이기도 한 부분입니다만, 단점도 있습니다. 이는 다음과 같습니다.
- 인라인 속성은 크기값을 설정할 수없다.
- 좌측 우측의 마진 여백값을 줄 수있지만, 상하는 줄 수없다.
- 디폴트 와이드값은 span 태그 내에 들어있는 콘텐츠 값을 따른다.
위와 같이 3가지 단점을 가지고 있습니다만, 이를 css 코드 작성을 통해서 인라인 블록 혹은 블록 등 다양한 디스플레이 속성으로 변경해서, 원하는 값을 줄 수있기때문에 큰 문제가 되지는 않습니다.
span 태그 줄바꿈 해보기
인라인 속성때문에 가로열로 배치된다고 말씀을 드렸습니다.(콘텐츠 넓이가 100% 차이하고 있는 경우 세로열로 배치된 것처럼 보일 수는 있음)
여기서, 디스플레이 블록 값을 주게되면, div 태그와 마찬가지로 블록속성을 가지게 됨으로써, span 태그도 줄바꿈을 해볼 수있습니다. 코드는 다음과 같습니다.
span {
display : block;
}가운데 정렬 해보기
span 태그를 가운데 정렬 해보는 방법은 두 가지가 있습니다. 하나는 디스플레이 블록속성으로 변경해서 특정 css값을 주는것, 나머지 하나는 포지션 값을 주는것입니다. 코드는 다음과 같습니다.
span {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
span {
display:block;
width:500px; ->> 와이드값은 적절히 변경해서 맞춰보시기 바랍니다.
margin:0 auto;
}
