[3] Inline과 Block. 그리고 표 만들어보기

- 2021.08.23 -

- 2023.05.05 -

---

기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다

---

html 요소의 두형태가 있는데 크게 Inline과 Block 형태로 나뉜다

 

Inline

태그의 내용에 맞춰서 너비가 결정됨

레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용

 

Inline 요소

- span

           아무 의미도 내포하지 않은 대표적인 Inline 요소.

           CSS 스타일과 함께 특정 내용을 강조하거나 구분하고 싶을 때 사용.

           대표적으로 서식태그에서 학습했던 b(Bold), i(Italic)이 이에 속하고

           대표적인 태그로 span이 존재.

 

Block

태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지함.레이아웃 영역을 지정할 때 주로  사용

 

Block 요소

- div

                   block 요소의 대표적인 태그로 아무 의미를 담지 않는 블록 요소로 아래의 블록 요소들의 상위개념

 

- section

                   서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소

 

- article

                   동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소

 

- header

                   본문 내용의 머리말의 영역을 구성하기 위한 블록 요소

 

- footer

                  본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소

 

 

Inline / Block 요소의 사용

- section, header 등의 레이아웃 구성을 위한 태그들은 전부 div로 대체해서 사용 가능

   다만, 2-1에서 학습했던 스크린리더 등의 Accessibility를 고려해서 가능하면 의미를 갖는 태그 사용을 권장

- CSS 스타일 중 display 속성을 이용하면 div 등의 기존 block 요소를 위한 태그도 inline 요소로 바꿔 보여지게 할 수 있고

   span등의 Inline 요소도 block 요소로 표현하는 것도 가능.

   그러나 가능하면 기본 형태에 맞게 사용하는 걸 권장함.

 

html을 이용하여 표를 그리기 위해서는 여러 태그를 조합해서 코드를 작성해야 한다.

 

table <table></table>

표의 시작과 끝

 

tr <tr></tr>

표의  하나의 행

 

 

th, td <th></th> <td></td>

표의 열

 

 

 

 

위 표를 html코드로 보면 아래 사진과 같다.

 

<tr>의 틀 안에 <td>로 표 안의 내용을 입력할 수 있다.

그러나 이것으로는 우리가 아는 표가 만들어지지 않는다.

저 상태로 입력을 하면 아래 사진과 같다.

 

 

 

표라고  하기보단 일정 간격을 띄워놓거나

<p></p> 수식태그를 써놓은것과 비슷하게 된다.

그래서 우리는 <table>에 한가지를 추가한다.

<table>에서 <table border="1">로 border="1"를 추가해준다.

그러면 아래와 같이 변경된다.

 

여기에서 이제 원하는 데이터들을 쌓아가면 된다.

 

 

 

---

마  치  며

 

뭐랄까 상당히 직관적이다 라는 느낌을 많이 받았다.

여태 다른 언어를 하면서 결과를 보며 음.. 그렇구만 하고 끝이였는데

html을 공부하면서 오오오오오 x신기해!! 라며 혼잣말하는게 늘었다.

 

특히 <img src="./image/image2.jpg"/>를 작성할때

그냥 필요한 소스의 경로만 지정을 해준다면 html은 얼마든지 그걸 표현할 수 있다는게 신기했다.

 

아직까진 재밌다.