CSS_Experience 교환에서 일반적으로 사용되는 단위

1. 길이 단위

길이 단위는 웹 페이지 디자인에서 가장 일반적으로 사용되는 단위입니다. 정리되지 않고 정리되지 않은 페이지는 사람들에게 좋은 인상을 남기기 어렵습니다. 따라서 디자인할 때 원하는 효과를 얻으려면 요소의 위치와 크기에 대한 일부 값을 정확하게 정의해야 합니다.

CSS는 사람들이 즐겨 이야기하는 웹페이지를 정밀하게 제어하는 ​​기능을 제공합니다. 이를 통해 사람들은 모양, 크기, 공간 및 기타 스타일을 정의할 수 있습니다. 그러나 CSS가 제공하는 제어는 디자이너의 경험 부족뿐만 아니라 크기와 공간 값을 부여하는 방법에도 반영되는 위험한 것입니다. 왜? 디자이너가 특정 화면 해상도를 결정할 수는 있지만 다른 사람의 두뇌, 다른 사람의 시력 또는 개인 맞춤 설정을 결정하는 것은 불가능하기 때문입니다.

CSS의 주요 기능 중 하나는 CSS 위치 지정입니다. 위치 지정의 개념에는 위치 지정과 크기 지정이 포함됩니다. 어느 쪽이든 길이 단위를 사용해야 하며, 그렇지 않으면 정확한 위치 지정이 불가능합니다.

CSS에서 길이는 너비, 높이, 글꼴 크기, 단어 및 문자 간격, 텍스트 들여쓰기, 줄 높이, 여백, 웰트, 테두리 선 너비 및 기타 여러 속성에 사용되는 측정 치수입니다. .

1. 길이 정의

Dreamweaver 4에서 길이를 정의하려면 먼저 선택한 옵션 뒤의 텍스트 상자에 기호 부분을 작성해야 합니다. 이 기호는 양수 길이를 나타내는 "+"(양수 기호)일 수 있습니다. 값이거나 음수 길이 값을 나타내는 "-"(빼기 기호)일 수 있습니다. 기호를 쓰지 않는 경우 기본값은 "+"입니다. 기호 바로 뒤에는 정수 또는 소수일 수 있는 숫자 값이 옵니다. 그런 다음 이 옵션의 길이 단위 드롭다운 목록 상자에서 길이 단위를 선택합니다. 길이의 단위는 일반적으로 cm, pt, em 등과 같이 두 글자로 구성된 단위 약어입니다.

2． 절대 길이 단위

웹페이지 정의에 일반적으로 사용되는 절대 길이 값에는 센티미터(cm), 밀리미터(mm), 인치(in), 포인트(pt), 파이카(pc) 등이 있습니다.

단위 인치(in) 센티미터(cm) 밀리미터(mm) 파운드(pt) 파이카(pc) 4.233 12 1.0
cm 0.3937 1 10 28.3464 4.7244
mm 0.0393 7 0.1 1.0 2.83464 0.47244
lbs 0.01389 0.0352806 0.352806 1.0 0.83333

 절대 길이 값의 사용 범위 외부 출력 장치는 완전히 알려져 있습니다. 즉, 프린터 출력 장치에서는 절대 길이 값을 사용하는 것이 가장 좋으며, 화면 표시에만 사용할 경우에는 절대 길이 값을 최대한 사용하는 것이 큰 의미가 없습니다. Knowsky.com

 3. 상대 길이 값

각 브라우저에는 고유한 기본 범용 크기 표준이 있으며, 이는 시스템에서 결정하거나 사용자가 자신의 기본 설정에 따라 설정할 수 있습니다. 따라서 이 기본 크기는 사용자가 가장 적합하다고 생각하는 크기인 경우가 많습니다. 따라서 상대 길이 값을 사용하면 크기를 조정해야 하는 요소의 크기를 기본 크기에 비례하여 조정할 수 있습니다. 이렇게 하면 읽기 어려운 상황을 만드는 것이 불가능해집니다. 실제로 백분율 단위와 키워드는 비슷한 효과를 낼 수 있습니다.

CSS는 em(현재 글꼴에서 문자 M의 너비), ex(현재 글꼴에서 문자 X의 높이) 및 px(크기)의 세 가지 상대 길이 단위도 지원합니다. 1픽셀).

em과 ex를 사용하는 목적은 주어진 글꼴에 적절한 너비를 설정하는 것입니다. 글꼴의 크기는 표시할 때 M과 비교하여 확인할 수 있습니다. 현재 글꼴의 X입니다. 글꼴 크기가 클수록 해당 em 및 ex도 커집니다.

픽셀 단위의 길이는 디스플레이에 있는 픽셀(예: 정사각형)의 높이와 너비를 기준으로 합니다. 이미지 너비와 높이는 종종 픽셀 단위로 제공됩니다. 픽셀 측정은 일반적으로 좋은 방법이 아닙니다. 첫째, 픽셀 크기는 해상도에 따라 크게 다릅니다. 대부분의 사용자는 디스플레이를 가능한 가장 높은 해상도로 설정하므로 픽셀이 너무 작아서 읽을 수 없습니다.

2. 백분율 단위

Dreamweaver 4에서 백분율을 사용하려면 먼저 선택한 옵션 뒤의 텍스트 상자에 기호 부분을 적어야 합니다. 이 기호는 "+"(양수)일 수 있습니다. 부호)는 양의 길이 값을 나타내며 "—"(음수 부호)는 음의 길이 값을 나타냅니다. 기호를 쓰지 않는 경우 기본값은 "+"입니다.기호 바로 뒤에는 숫자 값이 있습니다. 기호 뒤에는 어떤 값이라도 입력할 수 있지만, 브라우저가 소수점 이하의 백분율을 처리할 수 없는 경우가 있으므로 소수점 이하의 백분율은 사용하지 않는 것이 가장 좋습니다. 그런 다음 이 옵션의 길이 단위 드롭다운 목록 상자에서 "%"를 선택합니다.
백분율은 항상 다른 값을 기준으로 합니다. 해당 값은 길이 단위 또는 다른 단위일 수 있습니다. 백분율 값 단위를 사용하여 지정할 수 있는 각 속성은 해당 백분율 값에 대한 참조 값도 정의합니다. 대부분의 경우 이 참조 값은 요소 자체의 글꼴 크기입니다.

3. 색상 단위

이미지를 많이 사용하면 웹페이지가 생동감있게 느껴질 수 있습니다. 하지만 인터넷 서핑을 해본 사람이라면 누구나 사진을 기다리는 불안감을 경험해 본 적이 있을 것입니다. 실제로 다양한 부분에 서로 다른 색상을 적절하게 사용하면 그림 같은 효과를 낼 수 있어 핵심 부분에 대한 독자의 관심을 끌 수 있지만 웹 페이지를 다운로드하는 시간은 크게 줄어듭니다.

color 속성은 요소의 전경색을 정의하는 데 사용됩니다. 대부분의 경우 이 요소에 포함된 텍스트 개체가 사용됩니다. color 속성을 사용하면 요소 테두리의 색상을 결정할 수도 있습니다. 색상을 정의하는 일반적인 구문은 다음과 같습니다: color: 색상 값.

색상 값을 정의하는 가장 간단하고 직접적인 방법은 백분율 값을 사용하는 것입니다. 이 경우 빨간색, 녹색, 파란색 색상 값의 수준은 백분율로 결정됩니다. 형식은 색상:rgb(R%,G%,B%)입니다. 색상을 지정하기 위해 백분율 값을 사용하는 또 다른 이점은 값이 무엇이든 관계없이 실제 숫자 집합을 선언한다는 것입니다.

색상을 지정하는 또 다른 방법은 0에서 255 사이의 정수를 사용하는 것입니다. 형식은 색상:rgb(128,128,128)입니다.
색상을 정의하는 세 번째 방법은 16진수 배열을 사용하여 색상을 정의하는 것입니다. 이 정의 방법은 프로그래밍을 자주 하는 사람들에게는 익숙합니다. 색상을 정의할 때 "#FC0EA8"과 같이 순서대로 배열된 3개의 16진수 배열을 사용합니다.이 정의는 #RRGGBB 형식입니다. 즉, 빨간색, 녹색, 파란색 위치에 필요한 16진수 값을 추가합니다.

색상을 정의하는 마지막이자 가장 쉬운 방법은 색상 이름을 지정하는 것입니다. 예를 들어, 아래 표시된 코드는 텍스트 색상을 보라색으로 지정합니다.

Dreamweaver 4에서는 색상 선택기 아이콘을 클릭하여 열린 색상 선택기에서 적합한 색상을 선택할 수 있습니다.

4. URL 단위

URL 단위는 링크 주소와 관련이 있습니다. 소위 URL은 "Uniform Resource Locator"의 약어이며 링크는 웹 페이지의 영혼입니다. 링크를 통해 다양한 웹 페이지가 연결될 수 있어 웹 사이트의 많은 페이지가 유기적인 전체를 이루며 방문자가 여러 페이지 사이를 이동할 수 있습니다. 링크는 텍스트, 이미지 또는 기타 웹 페이지 요소일 수 있습니다. 브라우저에서 이러한 개체를 마우스로 클릭하면 브라우저는 지침에 따라 새 페이지를 로드하거나 페이지의 다른 위치로 이동할 수 있습니다.

링크를 만드는 과정에서는 경로가 매우 중요합니다. Dreamweaver 4에는 절대 경로와 상대 경로의 두 가지 경로가 있습니다. 상대 경로는 루트 디렉토리에 대한 상대 경로와 파일에 대한 상대 경로로 나눌 수 있습니다.

절대 경로에는 서버 프로토콜의 전체 경로가 포함됩니다(일반적으로 웹페이지에서는 http:// 또는 ftp://). 절대 경로에는 원본 문서의 위치에 관계없이 정확한 위치가 포함됩니다. 그러나 대상 문서가 이동되면 링크가 유효하지 않게 됩니다. 현재 사이트 외부의 파일에 대한 링크를 생성할 때는 절대 경로를 사용해야 합니다.

루트 디렉터리에 대한 상대 경로는 항상 현재 사이트의 루트 디렉터리에서 시작됩니다. 사이트에서 공개적으로 사용 가능한 모든 파일은 사이트의 루트 디렉터리에 저장됩니다. 루트 디렉터리에 대한 상대 경로는 슬래시를 사용하여 서버가 루트 디렉터리에서 시작하도록 지시합니다. 예를 들어 /Dreamweaver/index.html은 사이트 루트에 있는 Dreamweaver 폴더에 있는 index.html 파일로 연결됩니다. 콘텐츠가 자주 이동되는 환경에서 파일을 연결하는 경우 루트 디렉터리에 대한 상대 경로를 사용하는 것이 가장 좋은 방법인 경우가 많습니다. 루트 디렉터리에 상대적인 경로를 사용하면 링크가 포함된 문서가 링크가 끊어지지 않고 사이트 내에서 이동합니다. 그러나 루트 디렉터리에 대한 상대 경로는 사이트를 로컬로 보는 데 적합하며, 이 경우 문서에 대한 상대 경로를 사용할 수 있습니다.

참고: 브라우저에서 로컬로 파일을 미리 볼 때 루트 디렉터리에 대한 상대 경로에 링크된 콘텐츠는 표시되지 않습니다. 이는 브라우저가 서버와 동일한 방식으로 사이트 루트를 인식하지 못하기 때문입니다. 루트에 대한 상대 경로에 연결된 콘텐츠를 미리 보려면 파일을 원격 서버에 배치하고 그곳에서 봐야 합니다.

문서 상대 경로는 현재 문서가 위치한 폴더를 기준으로 한 상대 경로를 의미합니다. 예를 들어 test.swf 문서는 Flash 폴더에 있으며 현재 폴더의 문서를 지정합니다. …/test.swf는 현재 폴더의 상위 디렉토리에 있는 문서를 지정하고 /test/test.swf는 Flash 폴더 아래의 test 폴더에 있는 test.swf 문서를 지정합니다. 문서 상대 경로는 일반적으로 현재 문서와 항상 동일한 폴더에 있는 파일에 연결하는 데 사용할 수 있는 가장 간단한 경로입니다.

참고: 시작점이 정의되지 않으면 문서에 대한 상대 경로가 유효하지 않기 때문에 문서에 대한 상대 경로를 만들기 전에 새 파일을 저장해야 합니다. Dreamweaver 4에서는 문서를 저장하기 전에 자동으로 File://로 시작하는 절대 경로를 사용합니다.