웹 표준 퍼블리싱 바이블(37)
-
4-4. 서체(font)와 글(text) 스타일 - 5
1. 글자 스타일 지정하기글자를 기울이는 방법으로 "font-style" 속성을 사용합니다. 기울이는 값은 "italic(기울임)"과 "oblique(비스듬하게)"가 있으며, 기울어진 글자를 바로 세울 때에는 "nomal"을 적용합니다.1-1. 기울이는 값은 "italci"과 "obliique"가 있습니다. 1-2. , 요소 등은 원래 기울어진 형태로 표현됩니다. font-style 속성에 "nomal" 값을 지정함으로써 해당 요소의 글자를 바로 세울 수 있습니다. 2. 글자의 색상 설정하기"color"속성으로 글자의 색상을 지정합니다. 다음 예제는 요소의 글자에 색상을 지정했습니다.
2018.01.29 -
4-4. 서체(font)와 글(text) 스타일 - 4
1. 글자 장식하기"text-decoration" 속성으로 선택한 요소의 위, 아래, 가운데에 선을 긋거나 깜박거리게 할 수 있습니다. 그 설정값으로는 다음과 같은 종류가 있습니다.none 장식이 없습니다. underline 밑줄을 만듭니다. overline 윗줄을 만듭니다. line-through 가운데 지나가는 선을 만듭니다. blink 깜박거리게 만듭니다. 1-1. 요소는 기본값으로 밑줄(underline)을 가지고 있는데, "마우스를 올리는 경우(hover)"에 밑줄이 나타나게 하는 방법이 많이 쓰입니다. 1-2. 문장을 깜박거리게 하는 효과는 파이어폭스와 오페라 브라우저에서 지원하는 기능입니다. 주의할 점은 깜박거리는 개체는 3Hz~49Hz 사이인 컨텐츠 요소를 포함해서는 안 된다는 점입니다. ..
2018.01.26 -
4-4. 서체(font)와 글(text) 스타일 - 3
1. 글자 두께 지정하기"font-weight"속성은 글자의 두께를 지정하는 속성입니다. 다양한 값을 가지지만 브라우저에서는 "기본 값(normal)"과 "볼드체(bold)"의 2가지로 표현됩니다. 1-1. normal 두께로 표현되는 값은 다음과 같습니다. 1-2. bold체 두께로 표현되는 값은 다음과 같습니다.
2018.01.25 -
4-4. 서체(font)와 글(text) 스타일 - 2
1. 글자 크기 지정하기들자 크기는 "font-size" 속성으로 지정합니다. 기본으로 가지고 있는 절대값과 상대값이 있고 CSS의 길이 값을 표현하는 단위 중에서 "px", "em"을 사용할 수 있으며, 비율을 표현하는 "%"를 활용하기도 합니다. # 아무런 지정도 하지 않은 기본 그잘의 크기는 픽셀로 환산했을 때 16픽셀이 됩니다. 1-1. 글자 크기는 7단계의 절대값을 가지고 있습니다. "medium"값이 기본값이고 "small"방향으로 점점 작아지며, "large"방향으로 점점 큰 폰트를 표현합니다. 1-2. "font-size" 속성은 상속을 받게 되는데, 부모요소로부터 한 단계 더 크게 만들거나 작게 만드는 "상대적인" 값을 표현하는 방법이 있습니다. 크게 할 때는 "large", 작게하려면 ..
2018.01.24 -
4-4. 서체(font)와 글(text) 스타일 - 1
1. 서체 지정하는 방법1-1. font-family 속성 알아보기서체를 지정하는 방법으로 "font-family"속성을 활용합니다. 서체지정 시에는 쉼표(,)를 통해 여러 개의 후보 서체를 제시할 수 있습니다. 값의 마지막에는 서체의 타입을 지정하는데, "sans-serif(고딕체), serif(명조체) 등이 있습니다.* 일반적인 서처 지정의 방법은 다음과 같습니다.다음의 예제에서는 에 "돋움체"를 지정했습니다. 서체 값이 두 단어 이상이거나 영어가 아닌 경우에는 따옴표를 꼬해줘야 하며, 한글로 값을 작성했다면 "dotum"과 같이 폰트의 영어명을 추가합니다. "helvetica"체는 윈도우가 아닌 맥 OS 기반의 컴퓨터일 경우를 대비했으며, 마지막으로 고딕체 계열이므로 "sans-serif"를 지정했..
2018.01.23 -
4-3. 선택자의 우선순위
1. 선택자의 우선순위란?어떤 대상을 여러 번 선택하고 샅은 속성을 지정했다면, 순서에 관계없이 우선 순위가 높은 선택자가 적용될 것입니다. 선택자의 우선 순위를 값으로 표현한다면 공통 선택자는 "0", 타입 선택자는 "1", 클래스 선택자는 "10", 아이디 선택자는 "100"의 우선 순위를 가집니다. 물런 그 값이 클수록 우선 적용됩니다. 1-1. 다음의 예제에서 ".area p" 선택자는 그 값이 클래스와 타입을 더해 "11"을 가지고 "area #text"는 클래스와 아이디를 더해 "110"의 값을 가집니다. 결국 ".area #text"로 선택한 방법이 적용됩니다. 앙큼한유채`s 일상 Story 1-2. 한편 스타일을 시작태그에 인라인 형식으로 지정한다면 그 값이 "1000"정도로 아주 높아집니..
2018.01.19