웹페이지를 디자인할 때 가장 중요한 것은 요소의 적절한 배치입니다. 이는 Tailwind '위치' 클래스를 사용하여 쉽게 수행할 수 있습니다. 포지셔닝은 다양한 유형이 될 수 있으며 그 중 하나는 정적입니다.
이 블로그에서는 요소를 정적으로 배치하는 방법을 보여줍니다.
DOM – Tailwind에서 요소를 정적으로 배치하는 방법은 무엇입니까?
요소는 '를 사용하여 정적으로 위치를 지정할 수 있습니다. 공전 ” 직급. 정적 위치는 HTML 요소의 기본 위치입니다. '가 포함된 요소 위치: 정적 ”은 CSS 스타일 지정 없이 페이지의 일반적인 흐름에 따라 배치됩니다.
통사론
“를 적용하는 구문 공전 ” 클래스는 다음과 같습니다.
<요소 수업 = '공전' > ... < / 요소>
여기서 요소는 위치 속성이 적용될 수 있는 모든 태그가 될 수 있습니다.
정적 위치 지정의 실제 구현을 위한 코드를 방문하세요.
< 몸 수업 = '텍스트 센터' >< 센터 >
< h1 수업 = '텍스트-녹색-600 텍스트-5xl 글꼴-굵게' >
정적 위치 예
< / h1 >
< 비 >Tailwind CSS 위치 클래스< / 비 >
< div 수업 = '정적 텍스트-왼쪽 p-2 m-2 bg-green-200 h-48' >
< 피 수업 = '볼드체' >정적으로 배치< / 피 >
< div >절대 위치 요소< / 피 >
< / div >
< / div >
< / 센터 >
< / 몸 >
이 코드에서는:
- “ 텍스트 센터 ”는 태그 내용을 화면 중앙으로 조정합니다.
- 설정 ' ” 태그를 “를 사용하여 녹색으로 변경합니다. 텍스트-녹색-600 ”, 텍스트 크기는 “에 의해 5배로 설정됩니다. 텍스트-5×1 ”를 사용하여 글꼴을 강조합니다. 굵은 글꼴 '.
- 둘 ' ” 요소도 생성되고 첫 번째 “에 대한 정적 왼쪽 위치가 설정됩니다. div '를 사용하여 ' 정적 텍스트-왼쪽 '.
- '의 클래스를 할당합니다. p-2 ', ' m-2 ', ' bg-녹색-200 ', ' h-48 '를 사용하고 '를 사용하여 위치를 절대 왼쪽 하단으로 설정합니다. 상대 하단-0 왼쪽-0 ' 수업.
산출
위의 코드를 파일에 저장하고 다음과 같이 표시되는 웹페이지를 미리 봅니다.
정적으로 배치된 요소는 일반 페이지 흐름으로 이동하는 반면 다른 요소는 절대 위치를 유지합니다.
결론
문서의 일반적인 흐름에 따라 DOM에서 요소를 정적으로 배치하려면 ' 공전 “테일윈드 클래스” 위치 ' 공익사업. 이 블로그에서는 요소를 배치하는 방법을 보여주었습니다. 정적으로 ” 간단한 실습 시연을 통해