개인 공간

css triangle 이라 구글에 검색하면 잘 나오겠지만 그래도 설명하도록겠다.

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

왼쪽, 오른쪽, 아래, 위 경계선을 한눈에 알 수가 있다.

이때 Width, Height 가 없게 될 경우, 

 이런 모양으로 표시된다.

만일 border-left, right, top부분을 transparent를 하게 될 경우, 빨간색 부분만 남게 되어 삼각형이 만들어지게 된다.

다만 top 부분은 지정을 해주지 않아야 삼각형 위 빈공간을 차지하지 않게 된다.

#triangle {
    background: purple;
    width :0px;
    height:0PX;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

반응형 삼각형을 만들고 싶다 할 경우엔

/*Up pointing*/

.triangle-up {

    width: 10%;

    height: 0;    

    padding-left:10%;

    padding-bottom: 10%;

    overflow: hidden;

}

.triangle-up:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    margin-left:-500px;

    border-left: 500px solid transparent;

    border-right: 500px solid transparent;

    border-bottom: 500px solid #4679BD;

}

식으로 하면된다.

참조문서

http://jsfiddle.net/josedvq/3HG6d/

http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work

.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; } works for me. –  Tim Mar 4 '13 at 14:11

서식 적용 우선 순위 규칙 ** 

1) 가장 먼저 적용되는 우선 순위

상세하게 정의된 selector의 우선 순위가 높다.

태그명#id > 태그명.class > 태그명

tr#tr1 > tr.class > tr:hover > tr

부모 태그를 명시해준 것이 좀 더 상세하다

table tr > tr

table.table-hover tr > table tr > tr

2) 위 규칙에서 우선 순위가 같다면 그 다음 적용되는 우선 순위

인라인 > 내부 서식 > 외부 서식

3) 위 규칙에서 우선 순위가 같다면 그 다음 적용되는 우선 순위

소스 코드에서 앞 줄 보다 뒷 줄의 우선 순위가 높다

first-child, last-childe 와 nth-child, nth-of-type 정의

first-child는 (해당 아무거나(태그, 클래스):first-child  로 작성하고,

해당 아무거나의 첫 번째로 나오는 태그를 찾는다.

last-child는 (해당 아무거나(태그, 클래스):last-child  로 작성하고,

해당 아무거나의 마지막 번째로 나오는 태그를 찾는다.

번호는 1부터 시작한다.

scrollbar-arrow-color : #fff;

scrollbar-face-color : silver;

scrollbar-darkshadow-color : silver;

scrollbar-highlight-color : silver;

scrollbar-track-color : #ddd;

scrollbar-3dlight-color : silver;

여러가지 스크롤 관련 바꾸는 게 있는 데, 한번 씩 조작해 가면서 해봐야 어떤 부분을 의미하는 지 이해할 수 있다.

{ zoom : 값 } 속성 값 : normal, 숫자 (1.0 = 기본 값), 퍼센트(%)

table .listStyle {

border-collapse : collapse;

border-width : 1px 0px 0px 1px;

border : solid 0px;

border-color : #E3E3E3;

width : 100%;

}

table .listStyle td, table .listStyle th{

min-height : 18px;

padding-left : 3px;

border-width : 0px 1px 0px;

border-style : solid;

border-color : #E3E3E3;

}

table .listStyle th{

background-color : #FAFAFA;

font-weight : normal;

}

<table class='listStyle'>

<colgroup><col width='50%' /></colgroup>

<thead><tr><th></th><th></th></tr></thead>

<tbody><tr><td></td><td></td></tr></tbody>

</table>

* line-height : height 값과 동일하게 설정 ※ 다만 한 줄일 경우에만

.line{

font-size : 9pt;

border : 1px solid black;

whilte-space : nowrap;

height : 18px;

line-height : 18px;

}

<div class='line'> ,,,,, </div>

- 서로 이웃하는 테이블이나 셀의 테두리 선을 겹쳐서 표현

border-collapse : collapse;

- 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현

border-collapse : separate;

가운데 정렬

1.

<style>

body {}

.center { background : url(4.png) no-repeat;

width : 700px;

height : 700px;

margin : 0 auto;

}

</style>

2.

 <div style="width : 100%; text-align : center;">

<div style="width : 860px; height : 700px; margin : auto;"></div>

 < /div>

---------------------------------------------------------------------

중앙 이미지 고정

background : url(*.jpg) no-repeat fixed center center;

---------------------------------------------------------------------

#gotop {

position : absolute;

left : 50%;

top : 50%;

margin-left : 410px;

background : #ddd;

width : 100px;

height : 1000px;

}

---------------------------------------------------------------------

body 요소 가운데

body {

margin : 0 auto;

width : 930px;

position : relative;

}

white-space

공백 문자는 어떻게 다룰 것인지 지정하는 코드. (HTML 코드 상에서 띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등)

white-space : normal;

기본값, 연속 공백과 줄바꿈 등은 통합해서 표현. (보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인 것처럼 적용됨)

white-space : pre; - 원문 그대로 출력. normal과 반대.

white-space : nowrap; - 스페이스 바를 막 눌러서 들어가는 연속 공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함.

white-space : inherit; - 부모 요소의 값을 상속

-------------------------------------------------------------------------------------------

word-break

텍스트가 들어가는 블록 요소의 가로 사이즈에 맞춰 줄바꿈 해줄까. 말까 하는 코드

강제 줄바꿈 방지. 텍스트 길이 제한.

word-break : normal; -> 기본값, 단어단위로 끊어서 줄바꿈.

word-break : break-all; -> 특수문자를 제외하고 강제로 줄바꿈.

word-break : break-word; -> 특수문자를 포함하고 강제 줄바꿈.

word-break : nowrap; -> 줄바꿈하기 싫을 때

word-break : keep-all; -> 한글일 경우 띄어쓰기 기준으로 짤림.

-------------------------------------------------------------------------------------------

word-wrap

텍스트가 들어가는 블록 요소의 사이즈에 따라 줄바꿈 해주는 코드.

word-wrap : break-word;

가로 사이즈나 엘러먼트에 맞춰서 강제 줄 바꿈 해준다.

word-break : break-all; 과 같은 결과물

-------------------------------------------------------------------------------------------

Text-overflow

긴 문자열을 잘라주는 형태를 지정

text-overflow : clip;

엘리먼트의 테두리에 맞춰서 글자를 자른다.

text-overflow : ellipsis;

잘라지는 끝 부분에 자동으로 '...'을 넣어준다. (ie6이상에서만 지원가능. 파폭은 안됨.)

* width 값이 지정되어야함. / 높이를 정해주거나 white-space : nowrap; 속성을 사용해야함.

* span이나 a태그에 사용할 때는 display : inline-block을 줘서 블록 속성을 지정해줘야합니다.

  -> 일반 인라인 속성이라면 아무리 가로 사이즈를 지정해줘도 못 알아먹습니다.

ex) display : inline-block; text-overflow : ellipsis;

overflow : hidden; white-space : nowrap;

* div나 selection 같은 기본 블록 요소들은 display 지정을 안해도 됩니다.