레드몽크(기술 산업에서 소프트웨어 개발자들의 영향력 증가를 전제로 설립)에 따르면 CSS(캐스캐이딩 스타일시트)는 자바스크립트만큼 인기가 있지는 않지만 여전히 상위 10대 코딩 언어 중 하나이다. CSS는 웹 사이트 개발자들 사이에서 인기가 있는데, 그 이유는 웹 사이트 개발자들이 매우 강력하며 비교적 쉽게 배울 수 있으며 다른 브라우저에 걸쳐 어디에나 존재하기 때문이다.
코딩 언어와 마찬가지로 더 깨끗한 코드 작성, 디자인 구성요소 개선, 시간 절약에 도움이 되는 다양한 CSS 단축키 또는 해킹이 있습니다. 코드 편집기를 사용하여 이러한 조각을 웹 사이트에 직접 붙여넣을 수도 있습니다.
또한 CSS는 상급 웹 개발자가 될 것을 요구하지 않습니다. W3Techs에 따르면 CSS는 모든 웹사이트의 96%에 의해 사용되고 있으며 CSS를 사용하여 웹사이트의 레이아웃과 디자인을 개선하는 능력은 워드프레스 같은 주요 오픈 소스 CMS의 기능에 필수적이다.
실제로, 가장 인기 있는 웹사이트 빌더들(왓 유 이즈 왓 유 겟 또는 위지위그 접근법`을 옹호하는 것으로 악명높은)은 사용자 지정 CSS 코드를 삽입할 수 있도록 허용하고 있다.
만약 당신이 css를 처음 접한다면 이 해킹들이 당신에게 많은 도움이 될 것이다. 만약 당신이 기본을 이미 알고 있다면 이 10개의 CSS 해킹부터 시작해보자.
1. CSS에서 요소 위치를 고정하는 방법
웹사이트가 역동적이라는 사실에도 불구하고, 당신은 움직이고 싶은 몇 가지 아이템이 있을 수 있다. 절대 스크립트를 사용하여 이 작업을 수행할 수 있습니다.
그러나 이 전략을 신중하게 사용하고 구현하기 전에 모든 화면 크기 및 해상도에서 테스트하여 사이트 설계를 손상시키지 않도록 하십시오.
정확한 위치 노드가 있는 이 스크립트를 따르면 요소는 모든 사용자에게 동일한 위치에 유지됩니다.
예:
.sidebar {
position: absolute;
top: 15px;
right: 15px;
width: 300px;
height: 150px;
}2. CSS로 중앙에 콘텐츠를 배치하는 방법
화면 중앙에 물건을 넣는 것은 어려울 수 있습니다. 그러나 위치:절대:를 사용하여 동적 배치를 재지정하고 콘텐츠를 항상 중간에 표시할 수 있습니다.
또한 어떤 해상도의 장치에서도 작동합니다. 모든 것이 올바른 위치에 있는지, 작은 디스플레이에서도 요소가 자연스럽게 보이는지 항상 다시 확인하십시오.
예:
section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 30px;
}3. CSS에서 한 페이지의 스타일을 편집하는 방법
CMS가 있고 일부 게시물이 다른 게시물과 다르게 보이도록 하려면 사용자 정의 클래스를 사용하여 사이트의 CSS 스타일을 재정의할 수 있습니다. 이렇게 하면 한 개의 포스트 페이지를 변경하고 다른 포스트 페이지는 그대로 유지할 수 있습니다.
WordPress 블로그에 게시물을 작성할 때 게시물의 ID는 클래스로 본문에 포함됩니다.
그런 다음 다음과 같은 작업을 수행하여 해당 게시물 페이지의 스타일만 변경할 수 있습니다.
.postid-330 {
font-size: 24px;
font-weight: 750;
color: red;
}사용자 지정 클래스는 다른 주요 CMS의 개별 게시물에 추가할 수 있습니다. 예를 들어, 고스트는 게시물을 주요 게시물로 지정하고 여기에 .feature 클래스를 추가할 수 있습니다.
만약 당신이 이 방법을 자주 사용하고 싶다면, 당신은 추가적인 코드 작성을 막기 위해 메인 CSS 스타일시트를 수정해야 합니다.
HTML 파일이 많은 단순한 웹 사이트를 사용하는 경우 프로젝트 전체에서 특정 스타일을 요소에 적용할 수 있습니다.
예를 들어 .landing 클래스가 있는 페이지가 있는 경우:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>Landing Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="css/style.css" rel="stylesheet" />
<body class="landing">
<h1>Landing Page</h1>
<p>My landing page.</p>
</body>
</html>그리고 또 다른 수업자는 다음과 같다:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>About Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="css/style.css" rel="stylesheet" />
<body class="landing">
<h1>About Page</h1>
<p>My about page.</p>
</body>
</html>기본 스타일시트에 이 항목을 추가하여 정보 페이지의 스타일만 조정할 수 있습니다.
.about {
font-size: 24px;
font-weight: 750;
color: red;
}4. CSS에서 이미지를 페이지에 맞추는 방법
사이트 방문자의 화면에 당신의 그래픽이 쏟아지는 것만큼 성가신 일은 거의 없다. 그것은 당신의 사이트의 외관을 엉망으로 만들고 방문자들을 외면할 수 있다.
그러나 이 간단한 해킹을 통해 사용자가 사용하는 장치에 관계없이 이미지가 항상 방문자의 화면에 맞도록 할 수 있습니다.
img {
max-width: 100%;
height: auto;
}5. CSS에서 방문한 링크 스타일링
사용자가 누른 방문 링크의 기본 유형이 현재 사이트의 유형과 호환되지 않을 수 있습니다. CSS 코드는 사용자가 링크를 클릭하기 전과 후에 링크의 모양을 변경하는 데 사용될 수 있다.
그런 다음 웹 사이트의 전체적인 심미성과 결합하여 독특한 경험을 만들 수 있습니다.
예:
a:link {
color: #ff0000; /* the unvisited link is red */
}
a:visited {
color: #ee82ee; /* the visited link turns violet */
}6. CSS에서 스타일링을 통합하는 방법
CSS 스타일링을 여러 객체에 적용하려는 경우 한 번에 코드 조각을 하나씩 작성하는 데 시간이 걸립니다. 쉼표를 사용하여 사물을 구분하고 안에 CSS 스타일을 쓰면 스타일이 모든 사물에 적용됩니다.
같은 줄의 코드를 여러 번 쓸 필요가 없기 때문에 시간을 절약하고 코드의 크기를 줄일 수 있습니다.
예:
/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
border: 2px solid #000000;
}
/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
color: white;
font-size: 24px;
}7. CSS로 스타일링하는 이니셜 레터
그것은 독자의 관심을 사로잡고 첫 줄을 읽는 것에 대한 흥미를 자극하는 역할을 한다.
이 스타일이 구시대적인 것처럼 보일 수도 있지만, 당신은 여전히 현대적으로 보이게 디자인할 수 있고 그것이 손님들에게 미치는 심리적 영향에 이익을 얻을 수 있습니다. 또한 드롭캡 옵션은 CSS 언어에 통합되어 있기 때문에 문단을 쉽게 새롭게 볼 수 있습니다.
예:
p:first-letter {
display: block;
float: left;
margin: 5px;
color: #000000;
font-size: 60px;
}8. CSS에서 줄임표를 추가하고 텍스트 줄임표를 사용하지 않는 방법
공간이 부족한 경우 다른 부분에 맞게 텍스트를 잘라내야 할 수 있습니다. 각 텍스트 요소를 수동으로 조정할 수 있지만 시간이 걸리고 약간의 시행착오가 필요합니다.
대신 오버플로, 공백 및 텍스트 오버플로우를 함께 사용하여 텍스트를 읽기 쉽게 자연스럽게 구분할 수 있습니다.
아래 예제는 텍스트 너비 제한을 설정하고, 오버플로 부분을 숨기고, 텍스트 줄 바꿈을 사용 불가능으로 설정하고, 줄임표(...)를 추가하여 사용자에게 더 많은 텍스트가 있음을 나타냅니다.
예:
.product-description {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}9. CSS에서의 호버 효과 지연
:hover 선택기는 페이지에 호버 효과를 추가할 수 있는 CSS 유사 클래스입니다. 그러나 호버 효과를 미룰 수 있는 전환 요소를 추가하면 훨씬 더 세련되게 만들 수 있습니다.
멋있어 보이지만, 그것은 또한 사용자의 눈동자에 움직임의 감각을 주어서, 그들의 관심을 작품에 끌어당긴다.
예:
.entry h2 {
font-size: 48px;
color: #000000;
font-weight: 750;
}
/* Next, add a delay to the hover effect */
.entry h2:hover{
color: #f00;
transition: all 0.5s ease;
}10. CSS 스타일을 재설정하는 방법
마지막으로, 설계가 여러 브라우저에서 완벽하게 수행되려면 기본 스타일 지정 속성을 모두 수정해야 할 수 있습니다.
모든 브라우저에서 웹 사이트를 균일하게 보이려고 할 때 각 브라우저에는 기본 스타일이 기본 제공되는 스타일시트가 있으므로 문제가 될 수 있습니다.
예:
vertical-allign:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
border:0;
margin:0;
padding:0;
outline:0;당신이 우리가 논의한 CSS 트릭을 즐겼기를 바라며 그것들이 당신의 페이지를 더 좋아 보이게 하고 코딩하는 것을 더 쉽게 할 수 있기를 바랍니다.
'css' 카테고리의 다른 글
| HTML CSS 및 JavaScript를 사용한 응답형 개인 포트폴리오 웹 사이트 (0) | 2022.02.19 |
|---|---|
| 예니 바슬라얀라 아이친 HTML5 CSS3 (0) | 2022.02.19 |
| 블로그 SEO에 영향을 미치는 초점 (0) | 2022.02.17 |
| TIL - CSS 삽입 특성 속기 (0) | 2022.02.17 |
| JavaScript의 단순 경고 (0) | 2022.02.17 |
댓글