CSS는 어렵지 않습니다(이 기본 사항이 누락되었을 뿐입니다)

처음 웹 개발을 시작했을 때 가장 큰 과제는 JavaScript일 것이라고 생각했지만(JS가 아직 소수가 아니라는 말은 아닙니다) CSS에 대한 나쁜 평판과 끔찍한 이야기가 너무 많이 나왔습니다.

이 모든 것에도 불구하고 저는 프론트엔드 개발에 대해 깊이 탐구했고, CSS가 제게 많은 일을 해줬습니다. 잘 된 일이 하나도 없으며 div를 중앙에 배치하는 일을 시작하지도 마세요. 그것은 악몽이었다.

그런데 제가 깨달은 것은 CSS가 문제가 아니라는 것입니다. 문제는 제가 기본을 이해하지 못했다는 것인데, 익숙해지고 나니 스타일링이 좀 더 쉽고 놀라울 정도로 재미있어졌습니다.

이 기사에서는 CSS를 마스터하기 위한 기반을 마련하는 두 가지 기본 개념을 안내합니다.

1. CSS 선택기
2. 박스 모델
3. 포지셔닝 및 레이아웃

• CSS 선택기: CSS 선택기는 스타일이 필요한 특정 HTML 요소를 대상으로 지정할 수 있는 도구입니다.

일반적으로 사용되는 선택기를 살펴보겠습니다.

아. 범용 선택기: 페이지의 모든 요소를 ​​대상으로 지정하는 데 사용됩니다. 별표(*)로 표시되며 일반적으로 전역 재설정이나 기본 스타일 적용에 사용됩니다.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

베. 클래스 선택기: 특정 클래스 속성 값을 가진 HTML 요소를 선택하는 데 사용됩니다. 특정 클래스의 요소를 선택하려면 마침표(.) 뒤에 클래스 속성 값을 입력하세요.

<div>





<pre class="brush:php;toolbar:false">.box{
  background-color: teal;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

다. 유형 선택기: 이는 특정 유형의 모든 요소를 ​​대상으로 하는 데 사용됩니다. 요소 선택자라고도 합니다.

p{
text-align: center;
font-size: 1.2rem
}

사용 사례: 모든

태그에 균일한 스타일을 적용합니다.

디. 속성 선택기: 이 선택기는 속성과 값을 기반으로 HTML 요소를 대상으로 합니다.

input[type = "text"] {
background-color: cyan;
color: gray;
}

E. 의사 클래스: 상태에 따라 스타일을 지정하기 위해 요소를 선택합니다.

a:hover{
color: blue;
transition: ease-in 0.5s;
}

다른 유용한 CSS 선택기가 있지만 지금은 이것으로 충분합니다.

• 박스 모델

상자 모델은 본질적으로 HTML 요소를 둘러싸는 상자입니다. 기본적으로 HTML의 모든 요소는 하나의 큰(또는 작은) 직사각형 상자입니다. 상자 모델이 하는 일은 각 상자가 차지하는 공간과 상자가 다른 요소와 상호 작용하는 방식을 제어하는 ​​것입니다.

각 상자에는 네 가지 주요 부분이 있습니다.

1. 내용: 상자 안에는 텍스트, 이미지 및 기타 요소가 들어 있습니다.
2. 패딩: 내용과 상자 가장자리 사이의 공간입니다.
3. 테두리: 상자의 가장자리입니다.
4. 여백: 이 상자를 다른 상자와 구분하는 테두리 바깥쪽 공간입니다.

박스 모델을 설명하는 그림입니다

참고: 점선은 상자의 테두리입니다.

상자 모델은 요소 배치부터 간격 관리까지 CSS에서 수행하려는 모든 작업에 필수적입니다. 예를 들어, 저는 다양한 레이어가 어떻게 함께 작동하는지 보여주기 위해 HTML과 CSS만 사용하여 상자 모델 일러스트레이션을 그렸습니다.

그림에 생기를 불어넣는 데 도움이 된 코드는 다음과 같습니다.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

마무리(이제 시간이 됐어요)
CSS는 처음에는 많아 보일 수 있지만 일단 기본 사항을 이해하고 나면 세상(적어도 당신의 세상)을 정복할 준비가 된 것입니다.
이 기사의 핵심 내용은 다음과 같습니다: CSS는 어렵지 않습니다. 기본 사항에 더 집중하면 됩니다.
계속 배우고 가장 중요한 것은 계속 연습하면 곧 전문가처럼 웹페이지를 스타일링하게 될 것입니다.

다음은 무엇입니까?
이제 CSS 선택기와 상자 모델의 기본 사항을 배웠으므로 CSS를 마스터하는 데 한 걸음 더 가까워졌습니다. 하지만 아직 탐색할 내용이 더 많이 있습니다.
다음 기사에서는 Flexbox 및 Grid와 같은 CSS 위치 지정 및 레이아웃 기술에 대해 자세히 알아보겠습니다.

즐거운 코딩하세요!!!!

위 내용은 CSS는 어렵지 않습니다(이 기본 사항이 누락되었을 뿐입니다)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!