소개
이 랩에서는 CSS 프로그래밍의 기본 사항을 살펴보고 HTML 문서에 스타일을 적용하는 방법을 배웁니다. 일련의 실습을 통해 CSS 규칙을 생성하고 수정하는 방법, 선택자를 사용하여 특정 요소를 타겟팅하는 방법, 텍스트, 배경 및 테두리에 스타일을 적용하는 방법을 배우게 됩니다. 이 랩을 마치면 CSS 에 대한 탄탄한 이해를 갖게 되어 시각적으로 매력적인 웹 페이지를 만들 수 있게 됩니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
균등하게 분산된 자식 요소
index.html 및 style.css는 이미 VM 에 제공되었습니다.
부모 요소 내에서 자식 요소를 균등하게 분산시키려면 부모 요소의 display 속성을 flex로 설정하여 flexbox 레이아웃을 사용합니다. 자식 요소를 가로로 균등한 간격으로 분산시키려면 justify-content: space-between을 사용합니다. 자식 요소를 주변에 공간을 두고 분산시키려면 justify-content: space-around를 사용합니다. 다음은 예시입니다.
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
요약
축하합니다! 균등하게 분산된 자식 요소 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.