다양한 스타일

CSS의 여러 속성

흘러서넘치는것이 안보이는 속성값. hidden

float속성을 주었을 때 전체적으로 레이아웃이 틀어지는 것을 방지하기 위해 부모요소에 overflow:hidden을 꼭 설정해야 한다!!

 

넘치는걸 스크롤바를 이용해서 다보려면 scroll이라는 속성을 주면된다.

세로스크롤만 필요하다면

overflow-y : scroll;

 

clear : both는 float로 공간을 붙일때 나누고싶은곳에 구조를 짠 뒤 clear라는 속성을 줘서 float끼리 붙지않게 방지해주는 역할이다.

 

부모가 %면 자식에게 고정값을 주나 %를 주나 같은값인다.

부모의 값이 먼저이기때문이다..

 

박스에 width, height를 줄 때 기본적으로 padding, border는 가로, 세로 사이즈 안에 포함되지 않는다. 그런데 box-sizing:border-box로 설정하면 width, height에 padding, border값이 포함된다. 단, margin값은 포함되지 않는다!!

 

그림자를 주는 속성 box-shadow: 가로이동값 세로이동값 블러값 색상

 

 

인라인 블록과 달라 인라인 요소는 width와 height가 적용되지않는다.

 

대표적인 인라인요소인 span태그를 inline-block요소로 바꾸면 width, height의 설정값도 인식하면서 인라인 특유의 가로로 배치되는 속성값도 유지한다.

 

대표적인 블럭요소이 div태그도 inline-block요소로 바꾸면 가로로 배치되는 속성값인 inline요소의 특징을 갖게된다.

 

display속성을 inline 혹은 inline-block으로 바꾸었을 때 그 다음에 오는 요소는 전혀 영향을 받지 않아서 clear:both 속성값을 활용할 필요가 없다!

 

css카테고리

 

outline

: 아웃라인은 요소의 경계 외부에 그려진 선을 말한다.

 

outline-style ex)solid; 선의 종류를 정할 수 있다

outline-color ex)red; 선의 색을 정할 수 있다

outline-offset ex)15px; 가장자리/테두리 사이에 공간을 추가할 수 있다 (가장자리 바깥쪽에 15px의 윤곽선이 있는 형태)

outline-width ex)medium; 선의 너비를 지정할 수 있다

 

*외곽선은 테두리와는 다르다! 테두리와 달리 외곽선은 요소의 테두리 밖에 그려지며 다른 콘텐츠와 겹칠 수 있다. 또 한 외곽선은 요소 치수의 일부가 아니다. 요소 전체 너비와 높이는 윤곽선의 너비에 영향을 받지 않는다.

 

text

:text 서식 지정을 위한 많은 속성이 있다.

color ex)blue; 텍스트의 색상을 설정한다.

background-color ex)black; 텍스트의 배경색상을 설정한다.

 

aligument

:텍스트 정렬 및 텍스트 방향 설정

text-align ex)center; 텍스트의 가로 정렬을 설정한다 (글을 가운데로 정렬)

text-align-last ex)right; 텍스트의 마지막 줄을 정렬한다.

direction 및 unicode-bidi을 사용하여 요소의 텍스트 방향을 변경할 수도 있다.

direction: rtl; (기본 텍스트 방향으로 왼쪽에서 오른쪽으로 글이 쓰여진다)

unicode-bidi: bidi-override; (반대방향으로 왼쪽에서부터 첫 번째 글이 입력된다.)

vertical-align을 이용하여 수직 정렬을 설정한다.

vertical-align: baseline; 기본 정렬이 있는 이미지

text decoration을 이용하여 여러 가지로 꾸밀수 있다.

text-decoration-line 속성은 텍스트에 장식선을 추가하는데 사용된다.

overline; 장식선이 텍스트 위에 기술

line-through; 장식선이 텍스트를 가로지르고 있다

underline; 텍스트 밑줄을 긋는다

overline underline; 텍스트 장식에 윗줄과 밑줄을 긋는다

text-decoration-color는 라인 색상을 설정한다.

text-decoration-style은 라인의 스타일을 설정하는데 사용한다. (double; 밑줄이 두 개 그어짐)

text-decoration-thickness 라인의 두께를 설정한다. (ex: auto, 5px, 25%)

text-transform은 텍스트에서 대문자와 소문자를 지정하는데 사용한다. 모든 것을 대문자나 소문자로 바꾸거나 각 단어의 첫글자를 대문자로 바꾸는데 사용할 수 있다. (ex: uppercase, lowercase, capitalize)

text spacing 텍스트의 간격을 설정할 수 있다.

text-indent는 텍스트 첫 줄의 들여쓰기를 지정하는데 사용된다(px로 설정)

letter-spacing은 텍스트에서 문자 사이의 간격을 지정하는데 사용된다.(px로 설정)

line-height 줄 사이의 간격을 지정하는데 사용된다.(숫자로 설정)

word-spacing은 텍스트에서 단어 사이의 간격을 지정한다.(px로 설정)

white-space는 요소 내부의 공백을 처리하는 방법을 지정한다. (white-space: nowrap; 텍스트 줄 바꿈을 비활성화하는 방법)

text-shadow는 텍스트에 그림자를 추가한다.

(수평 그림자px 수직 그림자px 색상 흐림 효과px)로 설정

 

overflow는 너무 커서 영역에 맞지 않는 콘텐츠에 발생하는 작업을 제어한다.

visible-기본, 오버플로우는 잘리지 않는다. 콘텐츠는 요소의 상자 외부에 렌더링된다.

hidden- 오버플로가 잘리고 나머지 콘텐츠는 보이지 않습니다.

scroll- 오버플로가 잘리고 스크롤바가 추가되어 나머지 콘텐츠를 볼 수 있습니다.

auto- 와 유사 scroll하지만 필요한 경우에만 스크롤바를 추가합니다.

*이 속성은 지정된 높이의 블록 요소에만 적용된다.

 

디스플레이: inline-block와 비교할 때 display: inline주요 차이점은 display: inline-block요소에 너비와 높이를 설정할 수 있다는 것.

또한 display: inline-block에서는 상단 및 하단 여백/패딩이 존중되지만 에서는 display: inline그렇지 않다.

display: block와 비교할 때 가장 큰 차이점은 display: inline-block요소 뒤에 줄 바꿈을 추가하지 않기 때문에 요소가 다른 요소 옆에 놓일 수 있다는 것이다.