민자의 지식창고

HTML의 <div> ,<span> 본문

개발노트/HTML

HTML의 <div> ,<span>

전지적민자시점 2020. 8. 24. 10:51

<div> division의 약자로 Web사이트의 레이아웃(전체적인 틀) 만들때 주로 사용 합니다.

#side_left {
 width : 10px;
 height :10px;
 background-color : green;
 float : left;
 margin : 10px;
}

 

<span>  태그로 요소를 감싸면, css나 js 그부분을 변형시큰것이 가능해집니다.

<style>
	.box{
    	display : inline-block; /*default inline*/
        width : 100px; /* dispaly가 block일때만 지정가능 */
        height : 100px; /*display가 block일때만 지정가능 */
        backgorund-color : 
        margin-left : 10px
        padding : ...
        border:...
        font-stype :..
        color:..
    }
</style>

<body>
	<sapn class = box> 테스트 </span>
</body>

참고 내용 - 본문은 아래에 있습니다. 해당 글이 문제가 있다면, 삭제 하도록 하겠습니다.

* margin과 padding의 차이

https://coding-factory.tistory.com/187

 

[Html] Margin, Padding 속성의 차이점과 사용법

HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서

coding-factory.tistory.com

 

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'개발노트 > HTML' 카테고리의 다른 글

HTML 기본 정리2  (0) 2020.08.31
HTML 기본 정리1  (0) 2020.08.31
HTML& CSS 기초1  (0) 2020.08.31
스마트폰 페이지 전환 효과 익히기  (0) 2018.06.12
HTML5 시맨틱 마크업 알아보기  (0) 2018.06.11
'개발노트/HTML' Related Articles more