모든 개발자가 알아야 할 7가지 CSS 해킹
- WBOY앞으로
- 2023-08-29 14:53:02603검색
CSS는 Cascading Style Sheets의 약어입니다. 시각적으로 매력적인 웹사이트를 만드는 데 사용됩니다. 이를 사용하면 효과적인 웹 페이지를 만드는 과정이 더 쉬워집니다.
웹사이트 디자인이 중요합니다. 사용자 상호 작용을 촉진하여 웹 사이트의 미적 측면과 전반적인 품질을 향상시킵니다. CSS 없이 웹사이트를 만드는 것은 가능하지만 지루하고 매력적이지 않은 웹사이트와 상호작용하고 싶어하는 사용자는 없기 때문에 스타일 지정이 필요합니다. 이 기사에서는 모든 개발자가 웹 디자인 여정의 어느 시점에 필요할 7가지 CSS 해킹에 대해 논의합니다.
CSS를 사용하여 반응형 이미지 만들기
반응형 이미지라는 다양한 기술을 사용하여 장치의 해상도, 방향, 화면 크기, 네트워크 연결 또는 페이지 레이아웃에 맞는 올바른 이미지를 로드할 수 있습니다. 페이지 레이아웃에 맞추기 위해 브라우저에서 이미지를 늘려서는 안 되며, 이미지 다운로드에 너무 오랜 시간이 걸리거나 네트워크 트래픽을 너무 많이 사용해서는 안 됩니다. 이미지가 빠르게 로드되고 사람의 눈에 명확하게 나타나므로 사용자 경험이 향상됩니다. 반응형 이미지를 만들려면 항상 다음 구문을 작성하세요 −
으아악고해상도 사진을 만드는 가장 쉬운 방법은 너비와 높이 값을 실제 크기의 절반으로 설정하는 것입니다.
요소의 내용을 중앙에 배치하세요
요소의 내용을 중앙 정렬하려는 경우 여러 가지 방법으로 정렬할 수 있습니다. 가장 간단한 것들이 아래에 언급되어 있습니다.
위치 속성
CSS 위치 속성을 사용하여 다음 구문으로 콘텐츠를 중앙에 배치하세요.
으아악예
으아악사용 태그
가운데 정렬할 내용은
텍스트 정렬 속성 사용
가운데 정렬하려는 콘텐츠에 텍스트만 포함되어 있는 경우 textalign 속성을 사용하면 됩니다.
으아악범용 선택기 사용
CSS 범용 선택기라고도 알려진 CSS 별표(*) 선택기는 전체 웹 페이지의 모든 요소 또는 요소의 일부를 한 번에 선택하거나 일치시키는 데 사용됩니다. 선택한 후에는 CSS 사용자 정의 속성을 사용하여 그에 따라 스타일을 지정할 수 있습니다. ,
유니버설 선택기는 실제로 웹페이지의 모든 요소에 스타일을 지정하는 데 사용됩니다. 브라우저에서 설정한 기본값으로 인해 전체 페이지에 대해 특정 스타일 형식을 유지하는 것이 어려운 경우가 많습니다. 이를 통해 개발자는 웹 페이지의 기본 스타일을 준비할 수 있습니다. 가장 일반적인 용도는 웹 페이지의 모든 요소의 스타일을 함께 지정하는 것입니다.
문법
으아악예
으아악CSS 스타일 재정의
일반적으로 우리는 CSS 클래스를 사용하여 CSS 스타일을 재정의합니다. 그러나 특정 스타일을 요소에 적용해야 한다고 지정하려면 !important를 사용하세요.
문법
으아악예
으아악스크롤 동작
좋고 효율적인 사용자 경험은 웹 디자인에서 가장 중요한 요소입니다. 귀하의 웹사이트가 사용자 친화적이지 않다면 웹사이트를 만드는 것은 의미가 없습니다. 원활한 사용자 경험을 보장하려면 웹 사이트에 부드러운 스크롤 효과를 추가해야 합니다.
scroll-behaviour 속성을 사용하면 개발자가 스크롤하는 동안 페이지 동작을 지정할 수 있습니다.
으아악미디어 쿼리를 추가하고 반응형 레이아웃 만들기
미디어 유형이 문서가 표시되는 장치 유형과 일치하면 해당 미디어 유형의 미디어 쿼리가 콘텐츠에 스타일을 적용하는 데 사용됩니다.
으아악웹사이트를 다른 기기에서 봐야 하는 경우 뷰포트 단위를 사용하는 것이 가장 좋습니다. 뷰포트에 따라 콘텐츠의 크기가 자동으로 조정됩니다.
vw– 뷰포트 너비
vh ——뷰포트 높이
v분– 최소 뷰포트
v 최대– 뷰포트 최대
CSS 弹性盒
一个CSS Flexbox是一个包含多个flex元素的容器。这些flex元素可以根据需要排列成行或列。Flex项目是flex容器的子元素，它是其父元素。使用CSS flexbox可以使每个元素具有精美和吸引人的外观。
display:flex帮助开发者让每一个组件都显得合适、可爱。它通过对齐元素的子元素将它们排列成行或列。
它将父元素中的子元素对齐到行或列中。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: #097969;
align-items: center;
justify-content: center;
width: 60%;
}
.demo1, .demo2, .demo3, .demo4 {
background-color: yellow;
height : 50px;
width: 90%;
margin: 10px;
padding: 12px;
font-size: 17px;
font-weight: bold;
font-family: verdana;
text-align: center;
align-items: center;
color: brown;
}
.demo1{
order: 1;
}
.demo2{
order: 4;
}
.demo3{
order: 2;
}
.demo4{
order: 3;
}
</style>
</head>
<body>
<h1>Order of Flex Items</h1>
<p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
<div class="flex-container">
<div class= "demo1" > This </div>
<div class= "demo2"> example </div>
<div class= "demo3"> is </div>
<div class= "demo4"> an </div>
</div>
</body>
</html>
위 내용은 모든 개발자가 알아야 할 7가지 CSS 해킹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!