HTML에는 블록 요소와 인라인 요소가있었습니다 👍
뭐야 그렇다면, 이전 기사를 참고해보세요 😊
▶ htps : // 이 m/아카리_0618/이고 ms/f3b6892932cb6080c905

①display:block

실제로 제작하고 있으면 여기 요소 바꾸고 싶다는 때가 있다고합니다!
그 때 사용할 수있는 것이 여기 프로 버티입니다!
인라인 요소를 블록 요소로 바꿀 수 있는 것입니다 👍

그럼 실제로 보자! !

index.html

<a href="#">テスト</a>

style.css

a {
  background-color: aqua;
  border-radius: 30px;
  width: 40%;
}

이것을 브라우저에서 다시로드합시다!


아마 width가 효과가 없을까요?
인라인 요소는 문자의 몇 분 밖에 범위가 효과가 없었군요.
자, 여기에 display : block;을 더해 보자!

style.css

a {
  background-color: aqua;
  border-radius: 30px;
  display: block;
  width: 40%;
}

오! 바뀌 었습니다 👍
그런 느낌입니다 👌

②display:inline;

이곳은 방금 전과 반대로 블록 요소를 인라인 요소로 바꿉니다!

index.html

<h1>今日は雨が降っています</h1>
<h2>外に出たくなかったです</h2>

이번에도 알기 쉽게 배경색을 더했습니다 👍

블록 요소이므로 가로폭 가득 늘어서 있고, 쌓기와 같은 형태가 되어 있군요!
그럼 이것들을, 옆으로 해 가고 싶습니다!

그럼 css에 다음과 같이 기입해 봅시다!

style.css

h1 {
  background-color: blue;
  display: inline;
}

h2 {
  background-color: brown;
  display: inline;
}

이제 블록 요소에서 인라인 요소로 변경할 수 있습니다.



나란히 늘어서 있어요 😊