CSS 블록 인라인

 

 

모든 웹사이트는 박스로 구성되어 있음

박스는 레이아웃 잡는데 매우매우매우 중요함

 

 

 

 

 

 

div 2개 줘서 속성하고 속성값 줘봄

 

<div>  <articale> <header> 블록 속성을 가짐

div 태그 두개 만들었는데 옆으로 나란히 된게 아닌 다음칸으로 내려가게됨 

 

 

블록 : 옆에 다른요소가 올수 없게됨 

인라인 : 옆에 다른 요소가 올수 있음

 

<a> 태그는 인라인 요소라는걸알수 있음

 

 

좀더 그럴싸하게 바꿔봄

 

 

 

빨간색이 header

파란색 보라색이 main

아쿠아색이 footer

 

아까 header , main footer 가 블럭요소라고 말한것처럼 옆으로 써지지 않고 밑으로 내려간다는걸 알수 있음

 

 

<span> div 처럼 아무 뜻은 없지만 짧은 글자인 경우 또 글자나 css 디자인할때 많이 사용한다고함 

span 도 인라인요소임

추가해봄

 

결과는?

 

<a> 태그 옆에 있네 인라인 요소 맞나봄

 

 

 

 

 

 

 

 

 

 

 

 

그러면 인라인이   --> 블럭이 되거나 블럭이 ---> 인라인이 될수는 없냐?

가능하다고함

css 에 display 속성으로 바꿀수 있다고함

일단 코드 좀 정리하고 

 

<body안에 

<div></div>

<span>이건 span  글자입니다</span>

만 남겨둠 

display inline 적용

결과는?

 

 

????????????????????????????????????????????????????????????????????????????????????????????????

 

뭐지???????????????????

 

알아보니 인라인 요소는 기본적으로 넓이와 높이를 가질수 없다고함 

인라인은 안에들어간 컨텐츠에따라 길이와 높이가 결정된다고함 ;; 즉 그말은 안에 내용을 넣어주면 생긴다는거네?

넣어보자 

 

과연 결과는?

 

오 나옴 

인라인 요소로 바뀌어서 옆으로 나란히 됨 

 

그럼 이미지태그도 그럴까?

그렇네 이미지도 인라인 요소인걸 알수 있다

 

<p> 태그는 ??

 

 

음 블럭요소이군 

 

 

근데 왜이렇게 어렵지 css... 쉽다면서요...