01/19 회고

dl dt dd

dt (정의 용어)와 dd (정의 설명), 해당 요소들을 포함하는 dl

dl = dt + dd

 

dt와 dd요소 가운데 정렬하기

<style>
	/* dt dd 한줄로 표현 */
	/*
	.txtBox dl {
		display: flex;
		justify-content: center; /* 중앙 정렬 */
		align-items: center; /* 세로 방향 중앙 정렬 */
		font-size: 18px;
		color: #666;
	}
	*/
	/* dt dd 줄바꿈 */
	.txtBox dl {
		display: flex;
		flex-direction: column; /* 요소를 세로 방향으로 정렬 */
		align-items: center; /* 세로 방향 중앙 정렬 */
		text-align: center; /* 텍스트 중앙 정렬 */
		font-size: 18px;
		color: #666;
	}

	.txtBox dl dt {
		margin-bottom: 8px; /* 'dt'와 'dd' 사이의 간격 */
		font-weight: bold;
	}
    
</style>

<div class="txtBox">
	<div class="infoTitleBox">
		<div>
			...
		</div>
	</div>
	<div class="infoTxtBox">
		<dl>
			<dt>제목</dt>
			<dd>
				<span id="value">call</span>(테스트)
			</dd>
		</dl>
	...
	</div>
</div>