중요한 CSS 속성이 알아야 할 사항

플렉스박스

flexbox의 주요 목적은 공간을 관리하고 공간을 적절하게 분배하여 동적으로 표시하는 것입니다. 플렉스박스는 플렉스 레이아웃이라고도 합니다. 컨테이너의 콘텐츠를 정렬하는 데에도 사용됩니다.

flexbox 사용의 주요 부분은 공간을 적절하게 사용하는 가장 좋은 방법입니다. 장치 크기로 응답하는 데 도움이 되는 경우.

flexbox를 사용하기 전에 flexbox와 그 모든 속성에 대한 명확한 개념이 있어야 합니다.

flexbox에서 사용할 수 있는 두 가지가 있습니다.

플렉스 컨테이너

플렉스 아이템

내부 항목에 대해 활성 플렉스 기능을 사용하려면 display: flex CSS 속성을 사용해야 합니다.

CSS 변수

CSS 변수는 다른 프로그래밍 언어 변수처럼 보입니다. CSS 변수를 사용하여 스타일을 보다 역동적이고 효과적으로 만들 수 있습니다. 클릭 몇 번으로 언제든지 변경하는 데 도움이 되는 CSS 변수를 사용하여 색상이나 글꼴 크기 또는 기타 스타일을 설정할 수 있습니다. 실제로 전역 스타일을 설정하는 데 사용됩니다. 하나의 변경 사항이 모든 스타일에 영향을 미치는 경우.

의사 요소

의사 요소는 추가 기능을 제공하거나 요소에 영향을 주는 데 사용됩니다. 요컨대, CSS 의사 요소는 요소의 지정된 부분에 스타일을 지정하는 데 사용된다고 말할 수 있습니다.

이러한 의사 요소를 사용할 수 있는 곳:

단어의 첫 글자, 첫 줄 또는 단락이나 제목의 특정 단어의 스타일을 지정합니다.

단어나 문장 앞이나 뒤에 텍스트의 추가 단어를 설정합니다.

.info-bar::before {
  content: url(smiley.gif);
}

이미지 스프라이트

Image Sprites는 많은 이미지가 단일 이미지에 포함된 이미지 모음입니다.

이미지 스프라이트를 사용해야 하는 이유

웹 사이트에서 로드 시간을 줄이기 위해.

모든 이미지를 단일 이미지로 가져오려면

#something {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

CSS 상자 모델

디자인과 레이아웃에 대한 질문이 있는 동안 Box Model이 나타납니다. 이것은 HTML 요소의 래퍼와 같습니다. CSS Box Model은 Margin, Border, Padding, Content로 구성되어 있습니다.

다른 부분에 대한 간단한 설명:

콘텐츠: 텍스트, 이미지, 동영상이 표시되는 위치입니다.

패딩: 콘텐츠 주위에 약간의 공간을 만듭니다.

테두리: 테두리는 패딩 주변의 일부를 차지합니다.

여백: 패딩과도 같습니다. 국경 밖에서 약간의 공간이 필요합니다.

< div >
< p >This is something< /p >
< /div >

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}