[HTML & CSS] h태그 / overflow / inline-block 줄바꿈

[h 태그]

• h 태그는 제목 태그이다.
• h 태그의 종류는 총 6개이며 h1, h2, h3, h4, h5, h6이다.
• h 태그의 숫자가 클수록 글자 크기가 조금씩 작아진다. (제목 용도에서 본문 용도의 글자로 작아진다.)
• h1 태그는 html 문서에서 딱 한번만 사용할 수 있다.
• h1 태그 없이는 h2 태그를 사용할 수 없다.
• h2 태그부터 h6 태그까지는 html 문서에서 여러번 사용할 수 있지만, h2 태그부터는 순서대로 한번씩 다 사용한 후 자유롭게 사용해야한다.
• h2 -> h3 -> h3 -> h3은 가능, h3 -> h3 -> h3 -> h2는 불가능
• h 태그의 기본 display는 block이다.

 

[overflow]

• 상위 엘리먼트보다 하위 엘리먼트가 더 클 때 overflow 속성을 사용하여 처리할 수 있다.
• overflow의 속성값은 visible, hidden, auto가 있다.
• overflow의 기본값은 visible이다.
• visible은 상위 엘리먼트보다 하위 엘리먼트의 내용이 길어도 내용 전체를 보여준다.
• hidden은 상위 엘리먼트보다 하위 엘리먼트의 내용이 길 때, 상위 엘리먼트까지의 크기만큼 보여주고 그 뒤에 하위 엘리먼트의 내용들은 모두 잘린다. (보이지 않음)
• auto는 상위 엘리먼트보다 하위 엘리먼트의 내용일 길 때, 상위 엘리먼트까지의 크기만큼 보여주고 나머지 하위 엘리먼트의 내용은 스크롤 바 처리하여 보여준다.

 

tip) 임의의 내용을 채울 때 html에 lorem을 작성 후 Tab키를 누르면 문장이 자동으로 생성된다. (이 때 생성되는 문장은 매번 다른 문장일 수 있음)

 

See the Pen overflow by psm817 (@psm817) on CodePen.

 

 

[inline-block 줄바꿈]

• 쇼핑몰과 같이 무거운 웹 페이지들은 화면 해상도에 따라 반응형으로 움직이지 않는 경우가 있다. (고정형일 경우)
• 이런 경우 1920x1080을 기준으로 웹 페이지의 가운데 정렬을 하여 기본 컨테이너 틀(그리드)을 만들어주고 양 옆은 거의 활용하지 않는 방법이 있다.
• 가운데에 정렬하는 이유는 화면 해상도가 작아지면 우측이나 좌측에 있는 버튼이나 기능들이 보이지 않는 불편함들을 최소화하기 위함이다.
• 웹 페이지들의 배너나 메뉴바, 검색창들은 여러개의 태그들이 합쳐서 만들어진 것도 있고, 한 줄에 여러개의 태그를 배치하기 위해서는 해당 태그들의 display 속성을 모두 inline-block으로 만들어주어야 한다.

 

예시)

1. 1920x1080 해상도에서 가로 1920중에서 가운데 1080x1080만큼만 사용하고 양 옆은 비워둔다. (px단위)

 

2. 큰 틀을 위해 div 태그에 container라는 클래스를 지정하여 css에서 너비를 1080주고, border라는 속성을 이용하여 테두리를 생성한다.

 

3. 1080의 너비 속성을 가진 container 안에 한 줄에 3개의 하위 엘리먼트 div 태그를 나란히 정렬하기 위해 너비 270, 540, 270의 태그를 생성한다.

 

4. container라는 클래스를 가진 div 태그 아래에 3개의 하위 엘리먼트 div 태그를 생성하고 css에 각 클래스에 맞게 크기와 색상을 지정한다.

 

5. div 태그는 기본 display가 block이기 때문에 따로 display 속성값을 주지 않으면 한 줄에 하나씩 270, 540, 270의 너비를 가진 네모박스가 생성된다.

 

6. 한 줄에 3개를 나란하게 정렬하기 위해 하위 엘리먼트 div 태그의 display 속성을 모두 inline-block으로 변경한다.

 

• 예시와 같이 코드를 작성하게 되면, 이론상으로 3개의 태그의 너비(270+540+270)를 합쳤을 때 1080이 되어 container의 너비와 동일하여 테두리 안에 3개의 태그가 한 줄에 나란히 정렬된다고 생각이 들지만 inline-block 속성 자체의 여백 때문에 줄바꿈이 되어 나타난다.

 

 

[inline과 inline-block에 여백이 생기는 이유]

• inline과 inline-block은 브라우저에서 텍스트 취급을 당한다.
• block과 flex는 브라우저에서 도형 취급을 당한다.
• 텍스트는 가독성을 위해 자간과 행간이 기본적으로 존재하기 때문에 inline과 inline-block에 여백이 존재하는 것이라고 생각하면 좋다.

 

[예시의 마지막 태그가 줄바꿈되는 이유]

• 텍스트는 특정한 코드를 작성하지 않는 한 제한된 너비를 넘치게되면 줄바꿈된다. 텍스트는 물론이고 inline 요소와 inline-block 요소도 텍스트 취급받기 때문에 상위엘리먼트 너비를 넘치면 줄바꿈 된다.

 

[border 속성]

• border는 선(line), 테두리를 설정하는 속성이다.
• 선은 width, height, 색상의 속성값을 따로 주지 않아도 눈으로 확인할 수 있다.
• border: 1px solid orange; 과 같은 형식으로 작성을 하게 되는데 순서는 "선두께, 선형태, 선색상" 이다.
• border의 속성은 굉장히 많다. border-left, border-top, border-style 등과 같이 세부적으로 위, 아래, 오른쪽, 왼쪽 하나씩 설정하는 값들도 있고, 점선이나 실선과 같은 스타일을 설정하는 값들도 있다.

See the Pen inline-block 줄바꿈 by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 5일차 복습 by psm817 (@psm817) on CodePen.