Today I Learned
- 기술면접 스터디
기술면접 스터디 CS 지식
<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
- <ul> 정렬되지 않은 목록(unordered list)을 나타낼 때 사용
- <li> 목록 안의 항목(list item)을 나타냄
- <ul>과 <ol> 요소는 최소 하나 이상의 <li> 요소를 자식으로 가져야 한다.
<ul>
<li>
<a href="#">목록 태그에 링크 걸기 2</a>
</li>
</ul>- <ul>은 직계자식요소로 <li>만 올 수 있기 때문에 목록 태그에 앵커 태그를 적용시킬 때는 2번 코드처럼 <li> 안에 <a>를 작성해야 한다.
- HTML에서 <ul> 요소는 목록을 나타내는 요소이며, 해당 목록의 각 항목은 <li> 요소로 구성된다.
- 따라서 <ul> 요소의 자식 요소는 반드시 <li> 요소이어야 한다. 이는 HTML의 구조적인 규칙 중 하나로, 이를 따르지 않으면 문서 구조가 불완전하거나 잘못된 구조를 가질 수 있기 때문이다.
- 또한 웹 브라우저에서도 이러한 규칙을 따르는 것이 좋다. 웹 브라우저는 <ul> 요소의 자식 요소로 <li> 요소를 갖는 경우 목록을 올바르게 렌더링할 수 있다.
참고 https://juheeexx.tistory.com/13
HTML의 inline 요소와 block 요소의 차이점을 설명해 주세요. 예시도 들어주세요.
inline
- 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨
- 엘리먼트 예시: <span>, <input>, <button>
- width와 height 속성을 지정해도 무시됨 -> 해당 태그가 마크업하고 있는 콘텐츠의 크기만큼만 공간을 차지하도록 되어 있기 때문
- margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않음
block
- 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지함 (width 값이 100%)
- 엘리먼트 예시: <div>, <p>, <h1>
- inline엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영됨
| block | inline | |
| 줄바꿈 | 줄바꿈 O 새로운 라인에서 시작함 |
줄바꿈 X 새로운 라인에서 시작하지 않음 |
| 요소 너비 | 사용 가능한 전체 너비를 차지 | 컨텐츠 너비 만큼의 너비를 차지 |
| 높이 및 너비 | 높이(height)과 너비(width) 크기 설정 가능 | 높이(height)와 너비(width) 설정 불가능 컨텐츠 만큼의 크기를 차지하기 때문 |
| 상하 마진 | 상하 margin을 가질 수 있음 | 상하 margin을 가질 수 없음. 좌우 margin만 가능 |
| 컨텐츠 | inline, block 요소를 컨텐츠로 가질 수 있음 | block 요소를 컨텐츠로 가질 수 없음 (데이터 또는 inline 요소만 가능) |
| 대표적인 요소 | div, p, h1~h6, ul, ol | span, a, small, big, strong |
참고
https://www.daleseo.com/css-display-inline-block/
https://jinnynote.com/learn/web/display-block-vs-inline/
회고
오늘은 프로그래머 문제 안 풀고 코딩테스트 기출문제를 풀어봤다. 정확하게 말하자면 풀려고 시도를 했다. 프로그래머스 0단계, 1단계만 풀어 본 나한테는 상당히 난이도 있는 문제였고 문제를 어떻게 풀어야 될지부터 쉽지 않았다. 일단 처음 생각 난 방법으로 풀고 있긴 한데 예외처리 부분에서 잠시 막혔다. 기출문제라서 블로그에 올릴 수 없는 게 아쉽네 🥹