초보자를 위한 10개의 CSS 팁 및 팁

7541 단어 frontenddesigncssbeginners
CSS 힌트와 기교는 웹 디자이너에게 매우 귀중한 것이다. 왜냐하면 웹 사이트를 디자인할 때 가장 중요한 도구이기 때문이다.HTML 웹 페이지에 스타일을 추가하는 데 사용되며 일반적으로 Javascript와 함께 사용됩니다.만약 네가 웹 디자인을 배우는 데 많은 시간을 썼다면, 너는 틀림없이 그것을 만날 것이다.
웹 개발의 모든 핵심 구성 요소 (HTML, CSS, JS) 와 마찬가지로 많은 실천, 단축키, 비밀은 쉽게 배우지 못한다.이 개념들을 빨리 파악하는 것이 중요하다. 그러면 새로운 것을 시도하고 창조할 때마다 몇 시간 동안 a<div>를 중심으로 시도하지 않을 것이다.
이러한 CSS 팁과 노하우를 살펴보고 도구에 대한 견고한 지식을 쌓는 데 도움이 되는 기본 요소를 결정해 보겠습니다.

초보자를 위한 10개의 CSS 질문과 대답


여기에 열 가지 문제(그리고 그것들의 답안)가 있는데 나는 내가 처음으로 CSS를 배우기 시작했을 때 그것들이 나의 학습을 촉진시킬 것이라고 생각한다.그 중 일부는 매우 간단하지만, 다른 일부는 약간 복잡하다. 네가 좀 이해하도록 해라. 그러나 이 안내서에는 모든 사람에게 적합한 것들이 있다.시작하자.

CSS는 무엇을 의미합니까?


CSS는 캐스케이드 스타일 시트를 나타냅니다.그것의 이름은 이렇다. 왜냐하면 그것은 웹 스타일을 디자인하는 언어이기 때문이다. HTML and XMLCSS는 HTML 태그에 직접 쓰거나 외부.css 파일로 저장할 수 있습니다.
현대 웹 개발에서 CSS 기술은 일반적으로 스타일시트 기반의 프레임워크, 예를 들어SCS와Sass,Bootstrap과TailwindCSS로 확장된다.

HTML에 CSS 추가하는 방법


CSS를 HTML에 추가할 수 있는 세 가지 방법은 인라인 연결, 내부 및 외부 스타일입니다.웹 페이지에 파란색 배경을 제공하기 위해 CSS를 추가합니다. 각 방법을 어떻게 사용하는지 봅시다.
내부 CSS는 웹 페이지 헤더 태그에 적힌 스타일을 말합니다.다음과 같이 내부 CSS를 사용할 수 있습니다.
<head>
...
<style>
    body {
        background-color: blue;
    }
</style>
...
</head>
다음은 외부 CSS - 현대 웹 개발에서 가장 자주 사용하는 사용 방식이다.외부 CSS를 사용하여 CSS를 외부 CSS에 저장합니다.css 파일, HTML 문서의 머리에 이 파일에 대한 링크를 추가합니다.이 예에서 Dellstyle.css은 다음과 같습니다.
body {
        background-color: blue;
}
HTML 문서의 시작 부분에서 다음과 같이 링크 태그가 있는 스타일시트를 가리킵니다.
<link rel="stylesheet" href="style.css">
마지막으로 인라인 CSS의 경우 HTML 태그의 스타일 속성을 사용하여 각 요소에 스타일을 적용합니다.인라인 CSS의 동일한 예는 다음과 같습니다.
<body style="background-color: blue;">
...
</body>
지금은 이런 상황에서 내연 양식이 가장 빠른 것 같지만 원소를 중복할 때 거의 쓸모가 없다.그 밖에 가장 좋은 방법은 사이트를 설계할 때 가능한 한 많은 자원을 분리해서 그것들이 거대해지고 유지하기 어려워지지 않도록 하는 것이다.
따라서 외부 CSS는 사실상 표준입니다. 스타일시트의 외부성과 조직성을 유지하고 HTML의 깔끔함과 읽기 쉽도록 합니다.더 중요한 것은SCSS/SAss와 같은 프레임워크가 있으면 스타일시트를 사이트의 다른 부분이나 디자인 구성 요소에 대한 파일로 나눌 수 있다.

CSS에서 텍스트 가운데 맞춤 표시 방법


CSS를 사용하여 텍스트를 가운데로 정렬하는 가장 간단한 방법은 다음과 같습니다.
text-align: center;
그러나 이것은 부모 요소에 비해 중간일 뿐입니다. 따라서 텍스트가 페이지의 50%를 차지하는div에 있으면 전체 페이지의 25%에 중심이 됩니다.시간의 추이에 따라 서로 다른 상황에서 그것을 반복적으로 응용하면 어떻게 일을 하는지 더 잘 이해할 수 있을 것이다.

CSS 가운데 이미지 표시 방법


CSS에서 이미지를 가운데로 배치하는 것은 매우 간단합니다.중심 이미지 클래스가 적용된 이미지를 추가하는 경우 다음 CSS를 추가하여 요소를 부모 요소 가운데 배치할 수 있습니다.
.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
만약 그림이 웹 페이지 자체보다 크다면, 우리도 그림의 폭을 줄일 수 있다.같은 간격 원칙도 대부분의 다른 요소에 사용되어 웹 페이지에서 중심을 잡을 수 있다.더 많은 정보를 얻으려면 read up on flexbox해야 합니다.

CSS에서 텍스트 색상 변경하는 방법


이것은 빠르고 간단한 방법이다.text-color 값이나 유사한 값을 찾고 있을 수 있지만 훨씬 간단합니다.
p {
        color: red;
}
나는 CSS의 색을 전경과 배경으로 나누는 것이 가장 좋다는 것을 발견했다. 전자는 위에서 말한 바와 같고 후자는 background-color 이다.CSS에서 텍스트는 자신이 설정한 전경색을 사용합니다. 그렇지 않으면 부모 요소입니다.

CSS에서 설명 방법


CSS에 주석을 추가하려면 가운데에 두 개의 별이 있는 두 개의 슬래시를 추가하고 주석을 추가합니다.
/* this is a comment */
깨끗한 코드를 작성할 때 주석은 매우 중요한 고려 요소이다.코드를 다시 참고하여 조정하거나 유지보수할 때, 코드를 작성할 때의 생각을 항상 기억하지 못할 수도 있습니다.따라서 주석은 이 과정을 더욱 빈틈없이 한다. 특히 다른 개발자들은 당신이 작성한 코드를 참고해야 하거나 반대로도 마찬가지이다.

CSS에서 글꼴 변경 방법



CSS의 기본 글꼴을 바꾸는 것은 디자이너가 새 페이지를 만들 때 가장 먼저 해야 할 세 가지 일일 수도 있습니다.또한 많은 사람들이 다른 본문과 제목 글꼴을 지정합니다. (다른 다른 복사 요소가 많지 않으면.)
예를 들어, 본문 및 제목 글꼴을 지정하려면 다음 옵션을 사용합니다.
h1, h2, h3 {
    font-family: Arial;
}

p {
    font-family: Karla;
}
그러나 만약 우리가 카르라와 같은 글씨체를 사용하고 싶다면 구글 글씨체에 위탁하여 관리하려면 사이트 방문자가 이 글씨체를 방문할 수 있도록 확보해야 한다.우리는 link provided by Google Fonts를 추가함으로써 이 점을 쉽게 실현할 수 있다.
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
대부분의 글꼴 서비스, 예를 들어 구글 글꼴은 사용자가 사이트를 방문할 때 다운로드하는 파일의 크기를 최소화하기 위해 사이트에서 사용하는 권한과 스타일(사체, 굵은 글꼴 등)만 선택할 수 있다.

링크 CSS에서 밑줄 삭제 방법


기본적으로 HTML 링크나 닻 요소는 매우 엉망으로 보입니다.파란색, 밑줄 긋기, 90년대 조부모님 컴퓨터에서 직접 꺼내세요.링크 요소의 스타일을 재설정하려면 다음 코드 세그먼트부터 시작해야 합니다.
a {
    text-decoration: none;
}
이렇게 하면 링크에서 밑줄이 제거됩니다.그 다음에 링크의 색을 우리가 좋아하는 색으로 간단하게 변경할 수 있습니다. 단락 글꼴 색과 다른 색이 가장 좋습니다. 텍스트의 링크를 구분하는 것이 접근성을 높이는 데 도움이 되기 때문입니다.
a {
    text-decoration: none;
    color: palegreen;
}
또한 링크에 접근할지 여부에 따라 스타일을 추가할 수 있습니다.마찬가지로 이것은 모든 요소에 적용되는 스냅 링크와 활동(클릭) 링크에 적용됩니다.
a {
    text-decoration: none;
    color: palegreen;
}

a:hover {
    text-decoration: underline;
    color: blue;
}

a:visited {
    color: red;
}

a:active {
    color: green;
}

CSS에 배경 이미지 추가하는 방법


CSS에 배경 이미지를 추가하는 것은 응답 이미지를 관리하는 좋은 방법입니다. 응답 페이지의 다른 요소에서 단일 img 요소를 사용하면 까다로워질 수 있기 때문입니다.클래스 bg의 div에 배경 이미지를 추가하려면 다음 코드를 사용합니다.
.bg {
    width: 100vw;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1571319791337-3d18ca429a6c);
    background-position: center;
}
background-position를 center로 설정하지 않으면 이미지는 기본적으로 오른쪽 상단으로 자신을 부착합니다.또한, 이상한 값을 사용하여div의 너비와 높이를 설정한 것을 알 수 있습니다.다음은 이에 대해 상세하게 소개할 것이다.

CSS의 VH 및 VW는 무엇입니까?


VW 및 VH는 뷰포트 너비와 뷰포트 높이를 나타냅니다.그것들은 사용자가 사이트를 방문하는 실제 장치의 크기를 가리키며, 픽셀 측정만이 아니다.뷰포트 높이와 너비를 백분율 계수로 분해합니다100vw는 뷰포트 너비의 100%를 나타냅니다.
이런 방법의 흔한 용법은 다음과 같다.
section {
    height: 100vh;
}
웹 페이지의 영웅적인 부분에서 이동과 데스크톱의 전체 사용자 화면을 덮어씁니다.
단, 이것은 사용자 장치의 전체 높이와 너비입니다. 따라서 웹 브라우저에서는 화면 맨 위에 있는 도구 모음 등에서 사용하는 공간을 포함합니다.

CSS 초보자의 주의사항: 다음 단계는 무엇입니까



일단 당신이 CSS에 기초를 닦았다면, 나는 당신이SCSS/SAss로 신속하게 전환하는 것을 강력히 건의합니다.이것들은 자바스크립트가 보조하는 CSS 도구입니다. CSS에서 더 복잡한 일을 할 수 있고, 대부분의 간단하게 작성된 CSS도 유효합니다.예를 들어, 요소 내의 단락에만 클래스를 지정하지 않고 단순합니다.
.hero {
    color: red;
    p {
        color: blue;
    }
}
여기서 Bootstrap과TailwindCSS와 같은 프레임워크를 볼 수 있습니다. 비록 서로 다른 기능집을 제공하고 학습 곡선이 있지만, 이러한 프레임워크를 어떻게 사용하고 구성하는지에 있어서 CSS에 관한 많은 지식을 배울 수 있습니다.이것은 양방향 거래다.
도해Promise 실현 원리(4)-Promise 정적 방법 실현
groovy에서 each 교체 get 방법으로 얻은 값이 비어 있지 않습니다. 원인 탐구입니다.GStringImpl

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage