CSS(개요, 글꼴, 목록, 링크)

소개

CSS에서 아웃라인은 웹 페이지에서 요소를 돋보이게 하기 위해 테두리 외부의 요소를 둘러싸는 선입니다. 텍스트의 글꼴 패밀리, 굵기, 크기 및 스타일은 CSS 글꼴 속성에 의해 결정됩니다. CSS 목록 속성을 사용하여 다음을 수행할 수 있습니다. 정렬된 목록과 정렬되지 않은 목록에 대해 서로 다른 목록 항목 마커(글머리 기호)를 설정하고 목록에 배경색을 추가하는 등의 작업을 수행합니다.

CSS 개요

CSS의 개요 속성에는 다음이 포함됩니다.
📌outline📌outline-style📌outline-color📌outline-offset📌outline-width
외곽선은 테두리와 완전히 다릅니다. 외곽선은 요소의 테두리 밖에 있으며 요소 치수의 일부가 아닙니다. 요소의 전체 너비와 높이는 윤곽선의 지정된 너비에 영향을 받지 않습니다.

CSS 텍스트 및 글꼴

CSS에서 나는 텍스트의 스타일을 지정하고 형식을 지정하는 데 사용되는 다양한 속성이 있다는 것을 배웠습니다. 여기에는 다음이 포함됩니다.

📌 The text-align property : 텍스트를 왼쪽/오른쪽 정렬, 중앙 정렬 또는 정렬합니다.

📌text-decoration는 텍스트에서 '장식'을 제거하는 데 사용되는 CSS의 속성입니다. 예를 들어 웹 페이지의 링크. 웹 페이지에 링크를 포함하면 자동으로 링크에 밑줄이 그어집니다. 이 값을 추가합니다.

a {
text-decoration: none;
}

웹 페이지에서 클래스 또는 ID가 없는 모든 링크에서 밑줄을 제거합니다. text-decoration의 다른 값에는 overline , line-through , underline 가 포함됩니다.

텍스트 변환이라는 텍스트 속성도 있습니다. 텍스트의 모든 단어를 대문자, 소문자 또는 대문자로 표시할지 여부를 지정하는 데 사용됩니다. CSS에서 텍스트 스타일을 지정하는 데 사용할 수 있는 다양한 속성이 있습니다. text-indent , letter-spacing , line-height , direction 등. 이러한 속성의 대부분은 이름이 목적을 정의하기 때문에 이해하고 사용하기 쉽습니다.

CSS에도 글꼴 속성이 있습니다. 이러한 속성은 텍스트의 글꼴 모음, 크기, 굵기 등을 정의합니다. 글꼴 패밀리 이름에는 두 가지 유형이 있습니다.

제네릭 패밀리(Serif, Sans-serif, Monospace) 및 글꼴 패밀리(Times New Roman, comic sans, Arial 등). 차이점을 가장 쉽게 알 수 있는 방법은 Serif 글꼴은 문자 끝에 작은 선이 있고(대문자 F 또는 M의 맨 아래에 선이 있음) sans-serif 글꼴에는 이러한 선이 없다는 것입니다. . 모노스페이스 문자의 너비는 동일합니다. 항상 sans-serif 글꼴을 사용하는 것이 좋습니다.
font-family 속성은 "대체"시스템으로 여러 글꼴 이름을 보유해야 합니다. 즉, 브라우저가 첫 번째 또는 이전 글꼴을 지원하지 않는 경우에 대비하여 둘 이상의 글꼴을 포함하는 것이 좋습니다. 지원하는 글꼴을 찾을 때까지 다음 글꼴을 시도합니다. 다른 글꼴을 사용할 수 없는 경우 원하는 글꼴로 시작하고 일반 글꼴로 끝납니다. 또한 둘 이상font-family이 쉼표로 구분된 목록에 지정됩니다.

p {
  font-family: monospace, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

웹 페이지의 텍스트가 브라우저 창을 따르도록 하려면 항상 텍스트 크기를 viewport width(vw)로 설정하십시오.

CSS 목록/링크

list-style-type 속성은 목록 글머리 기호/항목 마커의 유형을 나타냅니다. 목록 글머리 기호의 유형은 원, 사각형 또는 원하는 숫자 또는 알파벳일 수 있습니다.

list-style-image 속성을 사용하여 CSS에서 이미지를 글머리 기호로 사용할 수도 있습니다.

CSS의 링크는 상태에 따라 다르게 스타일이 지정됩니다. 링크 상태에는 네 가지 유형이 있습니다.
📌a:link📌a:visited📌a:hover📌a:active
CSS 외부/내부 스타일 시트에서 스타일을 지정해야 하는 순서가 있습니다.

결론

나는 실제로 이것을 잡고 있습니다! 일관성이 때때로 지불하는 것 같아요 😊. 첫날에 비해 대부분의 개념을 이해하지 못했습니다. 디자인 속성으로 내 웹 사이트를 꽤 예쁘게 보이게 해주기 때문에 지금까지 CSS를 좋아합니다. 오늘 제 진행 상황에 대한 제 블로그 게시물이 마음에 드셨기를 바랍니다. 읽어 주셔서 감사합니다!