초보자가 피해야 할 7가지 CSS 실수
Cascading Style Sheets(CSS)로 작업하는 것은 초보자에게 어려울 수 있습니다. CSS를 사용하여 애플리케이션의 모양을 구성, 업데이트 및 유지할 수 있습니다. 그러나 이 언어에는 원하는 레이아웃을 얻기 위해 HTML 페이지를 조작하는 기술이 필요합니다.
다음은 CSS로 작업할 때 피해야 할 몇 가지 실수입니다. 시간을 절약하고 개발 프로세스를 쉽게 할 수 있습니다.
1. 글꼴 크기에 px 사용
“px” 단위는 픽셀을 나타냅니다. 요소의 너비와 높이부터 글꼴 크기까지 웹 페이지에서 다양한 길이를 표현할 때 사용할 수 있습니다.
그러나 px는 모든 화면에서 디자인을 고정된 크기로 고정합니다. px 이미지는 한 화면의 전체 너비를 차지할 수 있고 다른 화면의 작은 비율만 차지할 수 있습니다. 보다 비례적인 요소를 원하면 rem 또는 백분율(%)과 같은 상대 측정을 사용하십시오.
사용할 가장 좋은 상대 측정은 rem입니다. 이 단위는 독자가 종종 브라우저 설정에서 설정할 수 있는 루트 요소의 글꼴 크기를 나타냅니다. 다음 예에서 요소에 대한 px 및 rem의 영향을 확인할 수 있습니다.
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
다음 CSS와 함께 px 단위를 사용하여 이 문서의 글꼴 크기 스타일을 지정할 수 있습니다.
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 15px;
}
결과 페이지는 큰 화면에서 볼 때 만족스럽게 보입니다.
그러나 휴대폰과 같은 작은 화면에서는 표시되지 않습니다.
다음으로 동일한 콘텐츠에 rem을 적용합니다. 아래 그림과 같이 html 요소에 기본 글꼴 크기를 지정하고 rems를 사용하여 다른 요소의 크기를 지정합니다.
html {
font-size: 16px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
큰 화면과 작은 화면의 차이를 확인하세요. rem을 사용하면 화면 크기에 관계없이 콘텐츠의 크기가 더 잘 조정됩니다. 요소는 설정된 화면 크기를 초과하지 않습니다. 그렇기 때문에 픽셀보다 상대 길이를 사용하는 것이 좋습니다.
데스크톱 화면에서:
작은 화면에서는 rem 단위의 텍스트를 계속 읽을 수 있습니다.
2. 하나의 파일에 모든 스타일 넣기
큰 프로젝트에 하나의 CSS 파일을 사용하면 엉망이 될 수 있습니다. 업데이트할 때 혼동을 줄 긴 코드 줄이 있는 파일이 생깁니다. 다른 구성 요소에 대한 CSS 스타일 시트에 대해 다른 파일을 사용해 보십시오.
예를 들어 탐색, 머리글 및 바닥글에 대해 서로 다른 파일을 가질 수 있습니다. 그리고 몸의 섹션에 대한 또 다른. CSS 파일을 분리하면 앱을 구조화하고 코드 사용성을 장려하는 데 도움이 됩니다.
3. 인라인 CSS의 부적절한 사용
바닐라 CSS에서는 Bootstrap 및 TailwindCSS와 같은 CSS 프레임워크와 마찬가지로 HTML 페이지에 스타일을 작성할 수 있습니다. 인라인 CSS를 사용하면 HTML 요소에 고유한 스타일을 적용할 수 있습니다. HTML 요소의 style 속성을 사용합니다.
다음 코드는 인라인 CSS의 예입니다.
<h2 style="color:green;">This is a Green Heading</h2>
<p style="color:red;">This is a red paragraph.</p>
텍스트는 다음과 같이 나타납니다.
그러나 인라인 CSS만 있는 HTML은 지저분할 수 있습니다. CSS에 대한 다른 위치가 없기 때문에 모든 CSS는 HTML과 동일한 파일에 존재합니다. 혼잡해 보일 것입니다. 이러한 파일을 편집하는 것은 특히 사용자의 코드가 아닌 경우 어렵습니다.
또한 인라인 CSS를 사용하면 각 요소에 대한 코드를 작성해야 합니다. 이렇게 하면 반복이 증가하고 코드 재사용이 줄어듭니다. 항상 외부 스타일시트와 인라인 CSS의 조합을 사용하여 웹 페이지의 스타일을 지정하십시오.
4. 남용! 중요한
CSS에서 !important 규칙은 속성/값에 더 많은 중요성을 추가합니다. 해당 요소의 해당 속성에 대한 다른 스타일 지정 규칙을 재정의합니다.
당신은 몇 개만 있어야합니다 ! 코드의 중요한 규칙. 필요한 경우에만 사용하십시오. 코드를 작성하고 재정의하는 것은 의미가 없습니다. 일부 장치에서 실행하면 코드가 지저분해 보이고 문제가 발생할 수 있습니다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>
CSS:
#my-id {
background-color: blue;
}
.my-class {
background-color: green;
}
p {
background-color: orange! important;
}
결과는 다음과 같습니다.
5. 명명 규칙을 따르지 않음
CSS에는 개발자가 표준 코드를 작성하는 방법을 안내하는 명명 규칙이 있습니다. 이것은 나중에 CSS 파일을 디버깅하게 될 경우 필수적입니다.
이러한 표준 중 하나에는 하이픈을 사용하여 그룹화된 단어를 구분하는 것이 포함됩니다. 다른 하나는 선택자가 수행하는 작업에 따라 이름을 지정하는 것입니다. 따라서 그것을 보는 사람은 추측할 필요가 없습니다. 또한 코드를 더 쉽게 읽고, 유지 관리하고, 공유할 수 있습니다. 예를 들어:
대신:
.image1 { margin-left: 3%; }
다음과 같이 작성하십시오.
.boy-image { margin-left: 3%; }
스타일시트를 보면 코드가 어떤 이미지인지 정확히 알 수 있습니다. Google의 HTML/CSS 스타일 가이드 에는 모든 개발자가 알아야 할 더 많은 규칙이 나열되어 있습니다.
6. 코드를 주석 처리하지 않은 채로 두기
주석 작성은 프로그래밍에서 가장 저평가된 기술입니다. 많은 사람들이 코드를 설명하기 위해 주석을 작성하는 것을 잊습니다. 그러나 시간이 절약됩니다. 주석은 코드를 읽고 유지 관리하는 데 필수적입니다.
CSS는 느슨하게 구성되어 있고 누구나 자신만의 규칙을 개발할 수 있으므로 주석이 중요합니다. 잘 구조화된 주석을 사용하여 스타일 시트를 설명하는 것이 좋습니다. 코드 섹션과 그 기능을 설명하는 주석을 작성할 수 있습니다.
/* video elements need space to breathe */
.video {
margin-top: 2em;
}
/* styling the hero section */
.salutation {
margin-top: 1em;
}
7. 사전 설계 실패
많은 사람들이 하지만 계획 없이 코딩을 시작하는 것은 중대한 실수입니다. CSS는 프런트 엔드의 구조가 어떻게 생겼는지 결정합니다. 디자인은 프로그래밍 기술에 대해 많은 것을 말해줍니다.
사이트 디자인은 비전과 목표를 달성하는 데 필요한 리소스를 명확히 합니다. 프로젝트에 대한 정신적 그림을 가지십시오. 그런 다음 종이에 디자인하거나 Canva와 같은 디자인 툴킷을 사용하여 원하는 것을 시각화하세요.
프로젝트에 대한 완전한 그림이 있으면 모든 리소스를 모아 코딩을 시작하십시오. 시간과 중복성을 절약할 수 있습니다.
이러한 권장 사항을 고려해야 하는 이유
웹에서 응용 프로그램을 개발하는 경우 CSS를 사용합니다. CSS를 잘 사용하려면 연습과 표준 규칙을 따라야 합니다. 규칙은 코드를 읽기 쉽게 만들 뿐만 아니라 유지 관리도 가능하게 합니다.
표준화된 코드를 작성하면 시간과 노력을 절약할 수 있습니다. 더 복잡한 기능에 사용할 수 있는 프런트 엔드를 포맷하는 데 소비한 시간입니다. 또한 코드를 재사용하고 다른 사람과 공유할 수 있습니다. 설정된 규칙을 따라 더 나은 코드를 작성하고 더 나은 개발자가 되십시오.
답글 남기기