html 기초1 글자와 상자 inline, block요소

html 공부..... selenium으로 웹스크래핑 할때 약간 신나게 배웠지만

그것은 데이터를 끌어오기 위한 공부였지...

 

유튜버 빅공잼 님으로부터 추천받은 데이터 엔지니어 신입 포지션을 위한 공부중에는

상당수가 파이썬을 활용한 백엔드 엔지니어링 쪽의 스킬을 내포하고 있었다.

그 중에는 django를 이용한 백엔드 스킬도 있었고...

그 말인 즉슨 피해가려고 올해 4월부터 아둥바둥 거려봤지만 결국 해야하는 거구나 싶더라..

이왕하는김에 제대로 하기위해서 유데미의 강의 및 추천해주신 책들도 구매했다.

모두 숙지할때까지 공부할 예정이고

그 중 하나의 일환으로 html공부. 시작한다.

---

개인메모: <파트3 챕1-5 특수기호 강의 듣기>

 

글자와 상자

 

margin - 요소의 외부 여백 지정하는 CSS속성

padding - 요소의 내부 여백 지정하는 CSS속성

---

inline요소 - 글자를 만들기 위한 요소들

 

-본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도

-요소가 수평으로 쌓인다

-본인이 가지고 있는 컨텐츠의 크기만큼 자동으로 줄어든다. (컨텐츠란 <span>Hello</span>일때

 span inline 태그가 가지고 있는 컨텐츠를 Hello라고 부르는 것이다.

-크기 지정을 수동으로 할 수 없다.

-글씨를 다루는 용도

-mar

---

block요소 - 상자(레이아웃)를 만들기 위한 요소들

 

-요소가 수직으로 쌓인다

-inline과 마찬가지로 본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도

-포함한 콘텐츠의 크기만큼 자동으로 줄어든다. + 부모요소의 크기만큼 자동으로 양옆으로 늘어남

-margin이나 padding 으로 여백설정하는 것이 자유롭다.

---

<span><div></div></span> - 불가능

<span><span></span></span> - 가능

 

아직 이유는 모르겠지만 span은 inline 요소이므로 inline안에 inline이 들어올 수는 있다.

하지만 div는 block요소로써 inline안에 올 수 없다.

 

반대로 block요소 안에 block요소가 오는것은 가능하지만

block요소 안에 inline요소가 올 수는 없다.

 

 

 

 

문제

무엇이 inline 요소고, 무엇이 block요소인지 확인해보자