웹TIL) 220322 (inline,block,시맨틱마크업,href)

 

1. 각 태그들이 block 요소인지, inline 요소인지 구분하는 것 중요 

 

Inline 속성 : 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 <a> 태그 

태그들이 줄을 넘기지 않고 한 줄에 나란히 붙는 결과 

codepen으로 실행을 해보니 한 줄에 하나씩 <a> 태그로 링크를 작성하였는데 브라우저 결과는 나란히 링크가 4개 나온다. 

<strong>도 inline 태그! 

 

> inline 요소를 가진 태그들이 서로 나열되었을 때 최소한 같은 줄에 같은 높이로 가지런히 위치 + 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 (나는 링크와 링크 사이에 간격을 설정하지 않았는데도 링크 <-> 링크 사이의 어느정도 간격이 웹 브라우저의 특성으로 인해 간격이 디폴트로 설정되어 있는 것이군) 

 

block 속성 (inline과 반대겠지?)

inline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지

대표적인 요소 <p> 태그 

inline 요소와 같이 왼쪽 코드 작성 부분에 한 줄에 하나씩 태그를 이용하여 코드를 작성했는데 

inline은 약간의 간격을 띄우며 링크 링크 링크 이런 식으로 나타났었다. 

하지만 block 요소의 경우 한 줄에 한 태그를 작성하면 그대로 한 줄에 하나씩 결과값이 브라우저에 출력되는 것을 확인할 수 있다. 

 

block 속성은 기본적으로 너비 100% (width:100%) 속성을 가지고 있다. 

화면의 가로 폭 100%로 완전히 차지하기 때문에 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄 넘김이 되는 것이다. 

> inline 요소와 다르게 margin, width, height 속서을 정의하면 모두 정의된다. 

 

** block이 inline을 포괄하는 더 큰 개념이다. 따라서 HTML 마크업 시 inline 태그 안에 block 요소 넣으면 안됨

ex) <span><p>문장</p></span> --> 나쁜 예시 <p> > <span> 이기 때문 

그래서 <p><span>~ 으로 작성해주어야 한다. 

 

 

그런데, inline-block 속성이 있다고? (inline과 block의 짬뽕이야 뭐야..) 

inline-block은 말 그대로 inline과 block 두 속성의 중간 단계이다. 

inline과 같이 한 줄에 표현하면서도 margin,width,height 속성을 정의하면 표현해준다. 

작성자의 CSS를 통해 inline-block임을 선언해주어야만 한다. 

 

display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 

하지만 inline 엘리먼트에서 불가능했던 width, height 속성 지정 및 margin,padding 속성의 상하 간격 지정 가능 

> inline은 엘리먼트들히 나란히 배치되니까 width,height와 같은 속성을 지정할 수 없다. 

 

대표적인 inline-block 엘리먼트는 <button> <input> <select> 태그 등 

 

 

 2. Semantic markup 시맨틱 마크업 

<div>     <header> 

<div>     <section>

<div>     <footer> 

둘 중에서 코드만 봤을 때 직관적인 것은 오른쪽이다. 

div는 영역 구분용이기 때문에 div 자체로만 봤을때는 이 태그가 무슨 영역으로 나뉜건지 알 수가 없다. 

 

시맨틱 마크업은 사람과 기계가 읽고 이해하기가 더 쉬우며, 개발하면서 코드만 보더라도 그 코드의 흐름을 볼 수 있도록 해야 한다. 그리고 오른쪽 케이스가 유지보수가 더 쉽다. 

 

 

3. <a href="~" target="_blank">~</a> : 새 창으로 해당 브라우저를 띄우겠다라는 의미 

 

 

참고 

https://beautifulcss.com/archives/1179

Beautiful CSS » Inline과 Block 속성 이해하기

https://www.daleseo.com/css-display-inline-block/