CSS Essentials

CSS 레이아웃을 배웁시다

CSS 레이아웃에 관해 설명한 사이트를 발견하였다.
특히, flexbox 부분!

http://ko.learnlayout.com/

<sub>, <sup>를 위한 CSS

윗첨자, 아랫 첨자를 위한 CSS


sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;
 
  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;
 
  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;
 
  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}
 
sup {
  /* Move the superscripted text up */
  top: -0.5em;
}
 
sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}

출처 : https://gist.github.com/unruthless/413930

text-shadow

텍스트의 그림자 효과를 지정합니다.
콤마(,)로 구분해서 여러 효과를 겹쳐서 표시할 수 있습니다. 먼저 지정한 효과가 앞에 표시됩니다.

CSS Level: CSS 3
상속: 예
기본값: none

사용법

text-shadow: 2px 2px 3px #666;

object.style.textShadow = "2px 2px #ff0000"

속성

none: 그림자를 지정하지 않습니다.
<length>: 2~3개의 값을 지정할 수 있으며, 순서대로 수평 옵셋, 수직 옵셋, 블러 입니다.
<color>: 그림자의 색상을 지정합니다.

text-emphasis-position

텍스트 강조점의 위치를 지정합니다. 가로 쓰기 모드에서의 값과 세로 쓰기 모드의 값을 공백으로 구분해서 지정합니다.

CSS Level: CSS 3
상속: 예
기본값: above right

사용법

text-emphasis-position: below left;

속성

above: 텍스트 위에 표시합니다.
below: 텍스트 아래에 표시합니다.
left: 세로 쓰기 모드에서 텍스트의 왼쪽에 표시합니다.
right: 세로 쓰기 모드에서 텍스트의 오른쪽에 표시합니다.

text-emphasis

텍스트의 강조점의 스타일과 색상을 지정하는 단축 프로퍼티 입니다. 스타일과 색상을 공백으로 구분해서 지정합니다. 생략된 값은 각각의 기본값이 적용됩니다.

CSS Level: CSS 3
상속: 예
기본값: currentColor

사용법

text-emphasis: filled circle #f00;

속성

<text-emphasis-style>: 스타일을 지정합니다.
<text-emphasis-color>: 색상을 지정합니다.

text-emphasis-color

강조점의 색상을 지정합니다.

CSS Level: CSS 3
상속: 예
기본값: currentColor

사용법

text-emphasis-color: #fff;

속성

<color>: 색상을 지정합니다.

text-emphasis-style

요소의 텍스트에 지정할 강조점의 스타일을 설정합니다. 도형 앞에 filled 또는 open이 지정되지 않으면 filled인 것으로 간주됩니다.

CSS Level: CSS 3
상속: 예
기본값: none

사용법

text-emphasis-style: filled circle;

속성

none: 강조점을 적용하지 않습니다.
filled: 단색으로 채웁니다. 도형 이름 앞에 지정 합니다.
open: 도형의 속을 채우지 않습니다. 도형 이름 앞에 지정 합니다.
dot: •, ◦
circle: ●, ○
double-circle: ◉, ◎
triangle: ▲, △
sesame: ﹅, ﹆
<string>: 문자를 강조점으로 사용합니다. 단 한글자만 지정해야 합니다.

text-underline-position

텍스트의 밑줄 위치를 지정합니다. 부모 요소로부터 정의된 밑줄에는 적용되지 않습니다.
below만 지정된 경우에는 left도 지정된 것으로 간주합니다. left 또는 right 만 지정된 때에는 below도 지정된 것으로 간주합니다.

CSS Level: CSS 3
상속: 예
기본값: auto

사용법

text-underline-position: alphabetic;

속성

auto: 웹 브라우저가 자동으로 지정합니다.
alphabetic
below
left: 세로 쓰기 모드에서 왼쪽으로 지정합니다.
right: 세로 쓰기 모드에서 오른쪽으로 지정합니다.

text-decoration-skip

텍스트 장식을 적용하지 않을 대상을 지정합니다. none 외의 값은 여러 개를 공백으로 구분해서 지정할 수 있습니다.

CSS Level: CSS 3
상속: 예
기본값: object

사용법

text-decoration-skip: none;

속성

none: 아무 것도 제외하지 않습니다.
object: 이미지나 인라인 블럭에는 적용하지 않도록 합니다.
spaces: 공백 문자등에는 장식을 적용하지 않습니다.
edges: 두 개의 이어진 각각의 장식이 하나로 붙어서 보이지 않도록 합니다.

text-decoration

텍스트 장식을 지정하는 단축형 프로퍼티 입니다. 하나 이상의 속성을 공백으로 구분해서 나열합니다.

CSS Level: CSS 1, CSS 2, CSS 3
상속: 아니오
기본값: none

사용법

text-decoration: underline

text-decoration: navy dotted underline;

object.style.textDecoration = "overline"

속성

<text-decoration-line>: 텍스트 장식 라인 종류를 지정합니다.
<text-decoration-style>: 텍스트 장식 라인 스타일을 지정합니다.
<text-decoration-color>: 텍스트 장식 색상을 지정합니다.
blink: 텍스트가 깜빡이도록 합니다.

text-decoration-style

text-decoration-line 프로퍼티로 지정한 장식의 스타일을 지정합니다.

CSS Level: CSS 3
상속: 아니오
기본값: solid

사용법

text-decoration-style: wavy

속성

solid: 실선.
double: 이중선.
dotted: 점선.
dashed: 점선.
wavy: 물결선.

text-decoration-color

text-decoration-line 프로퍼티로 지정한 장식의 색상을 지정합니다.

CSS Level: CSS 3
상속: 아니오
기본값: currentColor

사용법

text-decoration-color: #fff

속성

<color>: 색상을 지정합니다.

text-decoration-line

텍스트의 라인 장식을 지정합니다. none 이외의 값은 여러 개를 함께 지정할 수 있습니다.

CSS Level: CSS 3
상속: 아니오
기본값: none

사용법

text-decoration-line: underline;
text-decoration-line: underline overline;

속성

none: 텍스트에 줄을 긋지 않습니다.
underline: 텍스트 아래에 줄을 긋습니다.
overline: 텍스트 위에 줄을 긋습니다.
line-through: 텍스트 가운데에 줄을 긋습니다.

text-indent

텍스트의 들여쓰기 간격을 지정합니다. each-line이나 hanging이 함께 지정되지 않으면 첫 줄에만 적용됩니다. 블록 컨테이너 요소에 적용할 수 있습니다.

CSS Level: CSS 1, CSS 2, CSS 3
상속: 예
기본값: 0

사용법

text-indent: 5em;
text-indent: 5em each-line;
text-indent: 5em each-line hanging;

object.style.textIndent = "50px"

속성

<length>: 들여쓰기 간격을 길이 단위로 지정합니다.
<%>: 컨테이너 블록의 너비에 대한 비율로 지정합니다.
hanging: CSS 3. 적용되는 라인을 반대로 적용합니다.
each-line: CSS 3. 강제 줄바꿈된 이후의 모두 첫 줄에도 들여쓰기가 적용됩니다.

letter-spacing

글자들 사이의 최소, 최대, 최적 간격을 지정합니다.
값을 3개까지 지정할 수 있으며, 3개의 값이 지정되면 최적, 최소, 최대 순으로 지정됩니다. 2개의 값이 지정되면 앞의 값은 최적, 최소 간격이고, 뒤의 값은 최대 간격입니다. 하나의 값만 지정되면 3개의 값에 모두 동일한 값이 할당됩니다.

CSS Level: CSS 1, CSS 2, CSS 3
상속: 예
기본값: normal

사용법

letter-spacing: 3px;

object.style.letterSpacing = "10px"

속성

normal: 현재 요소의 글꼴에 맞게 웹브라우저가 알아서 지정합니다.
<length>: 길이 단위를 사용해서 간격을 지정합니다.

word-spacing

단어들 사이의 최소, 최대, 최적 간격을 지정합니다.
값을 3개까지 지정할 수 있으며, 3개의 값이 지정되면 최적, 최소, 최대 순으로 지정됩니다. 2개의 값이 지정되면 앞의 값은 최적, 최소 간격이고, 뒤의 값은 최대 간격입니다. 하나의 값만 지정되면 3개의 값에 모두 동일한 값이 할당됩니다.

CSS Level: CSS 1, CSS 2, CSS 3
상속: 예
기본값: normal

사용법

word-spacing: 30px;

object.style.wordSpacing = "10px"

속성

normal: 현재 요소의 글꼴에 맞게 웹브라우저가 알아서 지정합니다.
<length>: 길이 단위를 사용해서 간격을 지정합니다.

text-justify

text-align 프로퍼티의 값이 justify인 경우에 정렬 방식을 지정합니다.

CSS Level: CSS 3
상속: 예
기본값: auto

사용법

text-justify: inter-word;

속성

auto: 웹브라우저가 자동으로 결정합니다.
none: 정렬하지 않습니다.
inter-word: 단어 사이의 공백 간격을 조절합니다.
inter-ideograph: 단어 사이의 간격과 글자 사이의 간격을 조절합니다.
inter-cluster: 단어 사이의 간격과 글자 사이의 간격을 조절합니다.
distribute: 단어 사이의 간격과 글자 사이의 간격을 동일하게 조절합니다.
kashida: 필기체 문자를 늘입니다.

text-align-last

마지막 줄의 텍스트 정렬 방식을 지정합니다. 블록 컨테이너 요소에 적용할 수 있습니다.

CSS Level: CSS 3
상속: 예
기본값: auto

사용법

text-align-last: right

속성

auto: text-align의 값을 따라 정렬합니다.
start: 시작 위치에 정렬합니다.
end: 끝 위치에 정렬합니다.
left: 왼쪽으로 정렬합니다.
right: 오른쪽으로 정렬합니다.
center: 가운데 정렬합니다.
justify: text-justify 프로퍼티에 따라 정렬합니다.

text-align

인라인 요소의 텍스트 정렬 방식을 지정합니다. 블록 컨테이너 요소에 적용할 수 있습니다.

CSS Level: CSS 1, CSS 2, CSS 3
상속: 예
기본값: start

사용법

text-align: right

object.style.textAlign = "right"

속성

start: CSS 3. 현재 라인 박스의 시작 위치에 정렬합니다.
end: CSS 3. 현재 라인 박스의 끝에 정렬합니다.
left: 왼쪽에 정렬합니다.
right: 오른쪽에 정렬합니다.
center: 가운데 정렬합니다.
justify: text-justify 프로퍼티에 따라 정렬합니다.
match-parent: CSS 3. inherit과 유사하지만 start, end는 계산된 값이 사용됩니다.

overflow-wrap

단어가 길어서 줄바꿈이 일어나는 경우에 단어를 나눌지 여부를 지정합니다. white-space 프로퍼티가 자동 줄바꿈이 작동하도록 지정되어 있어야 적용됩니다.
word-wrap은 overflow-wrap의 다른 이름입니다.

CSS Level: CSS 3
상속: 예
기본값: normal

사용법

overflow-wrap: break-word;

속성

normal: 줄바꿈이 허용된 곳에서만 줄바꿈을 합니다.
break-word: 단어가 단누어질 수 있습니다.

페이지

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

사용법

속성

알립니다!

프로필

태그

구독

블로그 보관함

전체 페이지뷰