CSS 101 - 부동 및 배경

2021년 결심 중 하나는 CSS에 대한 지식을 강화하는 것입니다. 나는 거의 1년 이후로 교육을 연기합니다. 그래서 이번에는 변명의 여지 없이 매일 여기 Dev.to에 전날 CSS 과정에서 배운 내용을 게시할 것입니다.

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요.

CSS 플로트

float 속성은 콘텐츠를 배치하고 서식을 지정하는 데 사용됩니다.

예를 들어 이미지가 컨테이너의 텍스트 왼쪽에 떠 있게 합니다.

float 속성은 다음 값 중 하나를 가질 수 있습니다.

left - 요소가 컨테이너의 왼쪽에 떠 있습니다.
right - 요소가 컨테이너의 오른쪽에 떠 있습니다.
none - 요소가 부동하지 않습니다(텍스트에서 발생하는 위치에만 표시됨).

플로트: 없음;

<h1>This is a block</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod amet minima ea ex doloremque quisquam iste saepe hic rerum, corrupti, harum quam optio quia asperiores voluptate! Et quaerat ducimus amet. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis ea necessitatibus dolor maiores suscipit culpa. Ipsum exercitationem sapiente dolorem tenetur neque dolore, praesentium beatae sit eligendi aliquam laboriosam deserunt nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eaque libero voluptas provident, soluta aliquid aspernatur maiores, nobis aperiam consectetur suscipit, ipsum tempora totam pariatur. Pariatur a enim officia quo! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse suscipit assumenda distinctio perferendis! Sapiente asperiores, at vel earum, repudiandae, modi totam explicabo provident id facilis necessitatibus rerum minima voluptate doloremque?</p>

h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: none;
}

왼쪽으로 뜨다;

h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: left;
}

플로트: 오른쪽;

h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: right;
}

배경색

background-color 속성은 요소의 배경색을 지정합니다.

div {
  background-color: lightgray;
}

opacity 속성을 사용하여 요소의 불투명도/투명도를 지정할 수도 있습니다. 0.0 - 1.0 사이의 값을 가질 수 있습니다. 값이 낮을수록 더 투명해집니다.

div {
  background-color: gray;
  opacity: 0.2;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
}

배경 이미지

background-image 속성은 요소의 배경으로 사용할 이미지를 지정합니다.

div {
    background-image: url('example.jpg');
    background-position: center;
    background-size: cover;
}

background-postion 속성은 다음 값을 가질 수 있습니다.
왼쪽 상단
왼쪽 중앙
왼쪽 하단
오른쪽 상단
오른쪽 중앙
오른쪽 아래
센터 탑
센터 센터
중앙 바닥

하나의 키워드만 지정하면 다른 값은 "center"가 됩니다.

배경 크기: 표지; 콘텐츠 영역이 배경 이미지로 완전히 덮이도록 배경 이미지의 크기를 조정합니다(폭과 높이 모두 콘텐츠 영역과 같거나 초과).

선형 그라데이션

선형 그래디언트를 사용하면 둘 이상의 지정된 색상 간에 부드러운 전환을 표시할 수 있습니다.

div {
    background-image: linear-gradient(black, lightgray);
    height: 400px;
}

배경

멋진 이미지 효과를 얻기 위해 많은 배경 속성을 결합하는 것이 가능합니다.

div {
    background: 
        linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)), 
        center top / cover url('montain.jpg') fixed;
    height: 400px;
}

결론

오늘은 여기까지입니다. 내일도 여행은 계속됩니다. 나중에 뵙겠습니다! 아무것도 놓치지 않으려면 여기 또는 트위터에서 저를 팔로우하세요!

트위터에서 나를 팔로우하세요: