[TIL]Day 4. HTML/CSS 정리 (4)

1. <div>,<span>, <p> 태그 차이점

-<div>는 분할하다 라는 의미의 division에서 따온 말로 html에서 한 가로 공간을 차지하는 태그이다

-<p>태그는 단락 이라는 의미의 paragraph에서 따온 말로 문장에 대해 사용하는 태그이다.  p태그도 div 태그와 마찬가지로 한 가로 공간을 차지하는 태그이다. 다만, div와의 차이점은 자체적으로 margin 값을 가지고 있다는 점이다.

-<span> 태그는 기간, 폭, 너비와 같은 뜻을 가지고 있는데 앞서 정리했던 게시글에서 말했던 것처럼 이는 inline 속성을 가지고 있으며, contents의 크기만큼만 공간을 차지한다.

-div와 p는 block element로 한 가로 공간을 전부 차지하는 반면, span 태그는 inline 속성이라 한 줄에 여러 태그를 사용할 수 있다.

-span 태그는 가로 값과 세로 값의 영향을 받지 않는다.

 

1) 각 요소들의 활용법

-div는 전체적인 레이아웃을 잡는데 사용되며, p는 내용을 입력하는 곳에, span은 내용 안의 특정 부분을 강조하기 위해 사용한다.

-div는 span을 내부 요소로 가질 수 있지만, span은 div를 내부 요소로 가질 수 없다. 

 

2. border를 활용한 효과

 내 포트폴리오 홈페이지에 이런 식으로 프로필을 작성해 놓았는데, 옆의 사이드 바를 이미지가 아닌 border효과를 통해 줄 수 있다는 사실을 알았다. 

 

<span>테스트 입니다.</span>

span{
    border-left: 5px solid black;
}

이런 식으로 html과 css를 작성하면 컨텐츠 좌측의 border만 solid로 활성화 되어 위와 같은 화면을 만들 수 있었다. 

boder요소는 border-radius만 거의 사용하던 터라 나에게 신선한 배움으로 다가왔다.