티스토리에서 쓸 수 있는 간단한 글 상자 박스 태그 연습

연습글을 쓰면서 종종 박스 처리를 하고 싶을 때가 있는데 아마도 여러 방법이 있겠지만 div 태그를 이용해서 간단히 만들어 볼 수 있다. 나중에 막상 사용하려고 보면 생각도 잘 안 나고 찾기도 번거로우니 주로 사용할 만한 스타일 요소로 연습해 보기.

<div style="width:; padding:; border: ; background-color:; text-align:; margin:0 auto"> 글 내용 </div>

① 너비(폭). 본문보다 작게 설정하면 박스가 왼쪽에 붙는데 박스를 가운데 정렬하려면 margin:0 auto 삽입

상하좌우 여백 크기

선 두께(숫자). 두줄 실선(double)은 3px부터 적용

선 종류 : 실선(solid), 점선(dotted), 파선(dashed), 두줄 실선(double)

선 색깔 : 색깔 영문명(black, white, yellow, green 등) 또는 #RGB 값

바탕 색깔 : 색깔 영문명(black, white, yellow, green 등) 또는 #RGB 값

⑦ 텍스트 정렬 : left, right, center


1. <div style="border: 1px solid red;">빨간 실선 상자</div>

빨간 실선 상자

 

2. <div style="border: 1px dotted blue;">파란 점선 상자</div>

파란 점선 상자

 

3. <div style="padding: 10px; border: 1px dashed #000000;">10px 여백 검정 파선 상자</div>

10px 여백 검정 파선 상자

 

4. <div style="padding: 15px; border: 3px double #00ff00;">15px 여백 녹색 두줄(3px 이상) 실선 상자</div>

15px 여백 녹색 두줄(3px 이상) 실선 상자

 

5. <div style="padding: 20px; background-color: #eeeeee;">20px 여백 선 없는 회색 바탕 상자</div>

20px 여백 선 없는 회색 바탕 상자

 

6. <div style="padding: 25px; border: 1px solid black; background-color: gray;">25px 여백 검은선 회색 바탕 상자</div>

25px 여백 검은선 회색 바탕 상자

 

7. <div style="width: 80%; padding: 15px; border: 1px solid balck; background-color: #cccccc; text-align: center; margin: 0 auto;">너비가 80%인 상자 가운데 정렬 및 텍스트 가운데 정렬</div>

너비가 80%인 상자 가운데 정렬 및 텍스트 가운데 정렬

카테고리의 다른 글

  1. apple-touch-icon.png 404 에러 탈출기 (feat. precomposed, 120x120, favicon)
  2. HTML 앵커 <a> 태그 속성으로 alt는 없었구나
  3. 구글 애널리틱스 내부 트래픽 설정하기 (분석 제외 IP 설정)
  4. 구글 애널리틱스와 태그 매니저 페이지뷰 중복측정 방지하기
  5. 구글 애드센스 클릭은 있지만 수익은 없는($0.00) 원인

댓글 남기기