div vs span

div 와 span 은 HTML 요소로 문서 구조와 스타일링을 위해 사용된다. 두 요소의 차이점은 다음과 같다.

블록 수준 vs 인라인 수준

div는 블록 수준의 요소로 기본적으로 한 줄을 차지하고 다음 요소는 샤로운 줄에 배치된다.

span은 인라인 수준의 요소로 텍스트 흐름에 통합되어 줄 바꿈 없이 배치된다.

구획화 vs 구문 강조

div는 주로 문서의 구획화를 위해 사용된다. 예를 들어, 섹션을 나누거나 컨테이너 요소로 활용된다.

span은 주로 구문을 강조하기 위해 사용된다. 예를 들어, 특정 텍스트를 스타일링 하거나 인라인 요소를 감싸는 데 활용한다.

스타일링

div는 블록 수준의 요소이므로 width, height, margin, padding 등의 스타일 속성을 적용한다.

span은 인라인 수준의 요소이므로 텍스트 스타일링에 주로 사용되며, 인라인 요소를 감싸는 용도로 활용한다.

의미

div는 명시적인 의미를 갖지 않고, 일반적인 컨테이너 역할을 한다.

span은 별도의 이미를 갖지 않고, 주로 스타일링이나 구문 강조를 위해 사용된다.

따라서, div는 큰 레이아웃 구조를 나타내는데 사용되고, span은 텍스트나 구문 강조를 위한 작은 영역을 감싸는 데 사용된다. 일반적인 사용 사례이고, 알아서 잘 사용하자 ^___^

내 생각

음 .. 가격 표기? 같은거에 span 일듯? 상품을 하나 묶는데에는 div?를 사용하면 좋으 ㄹ것 같다..

flex

flex는 1차원(단일 방향) 레이아웃 메서드이다. 한 줄에 요소들을 배치하거나 정렬하는데 사용한다.(가로, 세로)
항목은 부족한 공간을 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.

왜 flexbox인가?

크로스 브라우저 호환 도구로 floats , positioning을 사용했다. 무난하게 작동되긴하지만 제한적이고 좌절을 경험한다.. 특히 !! 세로로 배치하여 가운데 정렬하기, 주어진 너비와 높이를 똑같은 크기로 점유하기 등이 있다.

flexbox를 사용하면 좀 더 편리하고 유연하게 정렬과 배치를 할 수 있다.

사용법

display: flex 로 지정하면 해당 요소는 flexbox 가 된다.

방향

기본 값은 flex-direction: row 이다. 시작은 위에서 아래로, 좌에서 우로

main-axis: flex-direction의 방향이다.

cross-axis: flex-direction과 수직이 되는 방향이다.

속성

justify-content

main-axis 축 기준으로 정렬한다.

aligh-items

cross-axis 축 기준으로 정렬한다.

flex-wrap

flexbox 의 요소들인 flex item 들을 무조건 한 줄에 나타내고 싶을 때 flex-wrap: wrap; 를 사용한다. 줄바꿈이 일어나도 괜찮은 경우에는 flex-wrap: nowrap; 를 사용한다.

order

flex item 들의 순서를 정할 수 있다. 기본

flex

flex-item의 크기를 지정할 수 있다. 예) flex item 이 <article> 일 때, article{ flex: 1; } 하면 크기가 (1 / item개수)만큼 차지한다.