CSS(40)
-
4-4. 서체(font)와 글(text) 스타일 - 7
1.글자 들여쓰기긴 단락의 경우 첫 줄의 텍스트를 한 글자 정도 들여쓰기라기 위해 "text-indent" 속성을 활용합니다. 간격을 마이너스 값으로 지정하면 화며에서 글자가 보이지 않도록 만들 수 있습니다. 이 방법은 css를 이용해 메뉴를 만들거나 본문의 텍스트를 이미지로 변환하는 경우 활용합니다. 2. 영문의 대/고문자 관련영문의 경우 css를 통해 대문자와 소문자를 변경하는 방법으로 "text-transform"속성과 "font-variant"속성이 있습니다. ※ HTML 문서를 작성할 경우 대문자로만 작성하게 되면 익스플로러 버전 6에서 css를 통한 대/소문자 병경이 안 될 수 있습니다. 1-1. 대문자와 소문자로 변경하는 "text-transform"속성의 값은 다음과 같습니다. 1-2. "..
2018.01.31 -
4-4. 서체(font)와 글(text) 스타일 - 6
1. 글의 정렬 방법"text-align" 속성은 블록 요소에 지정하면 그 내부에 포함된 글이나 인라인 요소들이 영향을 받습니다.left 왼쪽 정렬 center 가운데 정렬 right 오른쪽 정렬 justify 양쪽 정렬 2. 글의 간격 조절하기글자와 글자 사이의 간격은 "letter-spacing"속성을 사용하고, 단어 간의 간격은 "word-spacing"을 사용합니다. 줄 간격은 "line-height" 속성으로 지정합니다. ※ 주의할 점은 본문에 한글과 영문, 숫자 등이 섞여 있는 경우 각 종류 별 간격이 달라 보일 수 있는 점입니다. 한글 자간은 어울려 보이는데 영문은 좁아 보이거나, 숫자는 거의 붙어버리는 경우가 있을 수 있습니다. 2-1. 자간 조절(letter-spacing) 2-2. 단어..
2018.01.30 -
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) 스타일 - 2
1. 글자 크기 지정하기들자 크기는 "font-size" 속성으로 지정합니다. 기본으로 가지고 있는 절대값과 상대값이 있고 CSS의 길이 값을 표현하는 단위 중에서 "px", "em"을 사용할 수 있으며, 비율을 표현하는 "%"를 활용하기도 합니다. # 아무런 지정도 하지 않은 기본 그잘의 크기는 픽셀로 환산했을 때 16픽셀이 됩니다. 1-1. 글자 크기는 7단계의 절대값을 가지고 있습니다. "medium"값이 기본값이고 "small"방향으로 점점 작아지며, "large"방향으로 점점 큰 폰트를 표현합니다. 1-2. "font-size" 속성은 상속을 받게 되는데, 부모요소로부터 한 단계 더 크게 만들거나 작게 만드는 "상대적인" 값을 표현하는 방법이 있습니다. 크게 할 때는 "large", 작게하려면 ..
2018.01.24 -
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