block : div
inline : span
div{
background-color : tomato;
}
span{
bakcgorund-color : aliceblue;
}
width & height : 100px
div{
background-color : tomato;
width : 100px;
height : 100px;
}
span{
bakcgorund-color : aliceblue;
width : 100px;
height : 100px;
}
Display : inline
div{
background-color : tomato;
width : 100px;
height : 100px;
display : inline;
}
span{
bakcgorund-color : aliceblue;
width : 100px;
height : 100px;
display : inline;
}
Display : inline-block (by text align)
div{
background-color : tomato;
width : 100px;
height : 100px;
display : inline-block;
}
span{
bakcgorund-color : aliceblue;
width : 100px;
height : 100px;
display : inline-block;
}
Display : none
div{
background-color : tomato;
width : 100px;
height : 100px;
display : none;
}
span{
bakcgorund-color : aliceblue;
width : 100px;
height : 100px;
display : none;
}
Display : inline-block; & visibility : hiddne;
div{
background-color : tomato;
width : 100px;
height : 100px;
display : inline-block;
visibility : hidden;
}
span{
bakcgorund-color : aliceblue;
width : 100px;
height : 100px;
display : inline-block;
}'나의 FE피봇이야기 > HTML || CSS' 카테고리의 다른 글
| [수업1]홈페이지를 만드는 기본 개념 (0) | 2023.09.23 |
|---|---|
| [CSS]Navigation을 만들때, li tag에 float 그리고 ul사라짐 (0) | 2023.09.01 |
| [HTMl]form&post w enctype (0) | 2023.08.22 |
| [HTML]Radio button 단일 선택 방법 (0) | 2023.08.22 |
| [CSS]Margin collapse into each other (0) | 2023.08.07 |
