인라인 요소
블록요소와 반대 되는 형태로 줄바꿈이 일어나지 않는 요소이다.
인라인 요소 형태
-
a, img,b,i,strong.sapn 등등
블록요소
-
사용 가능한 최대한 가로 넓이 사용한다.
-
전체를 차지하기 때문에 각 요소들이 수직으로 쌓인다.
-
가로넓이 와 세로길이를 지정할수 있다.
-
margin과 padding으로 위,아래,좌,우,여백을 사용 할수 있다.
-
줄바꿈이 일어난다.
-
레이아웃을 작업하는 요소로 적합하다.
개념정리는 이정도로 하고 실습을 해보겠습니다.
<html> <head> <style> h1 { border:3px red solid; } a { border:4px pink solid; } </style> </head> <body> 여러분 <a href="">안녕하세요</a>를 보여줍니다. <h1>실습을 통한 예제 입니다.</h1> </body> </html>
🙌인라인 요소
🙌블록요소
🙌 둘다 짬뽕 할수 있는 인라인-블록 요소
<html>
<head>
<style>
h1 {
border:3px red solid;
display:inline;
}
a {
border:4px pink solid;
display:block;
}
</style>
</head>
<body>
<a href="">여러분안녕하세요</a>
<h1>실습을이여라</h1>
</body>
</html>인라인-블록 요소를 사용할때는 display 속성을 사용한다.
인라인-블록 장점은 inline에서 사용하지 못한 것들을 사용할수 있는데 밑에 설명해보겠다.
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
💥여기서 의문점이 무조건 inline-block를 사용하면 좋지 않을까?
Q: 세세한 보정을 하고 싶다면 inline-block를 쓰는게 좋고 text 내의 특정 부분을 수정하고 싶다면 inline를 사용하는게 좋다.
주어진 문제는 해결하고 공부하고 성장한다.