개인 공간

Linux provides a nice little command which makes our lives a lot easier.
GET:
with JSON:
curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X GET http://hostname/resource 
with XML:
curl -H "Accept: application/xml" -H "Content-Type: application/xml" -X GET http://hostname/resource 
POST:
For posting data:
curl --data "param1=value1¶m2=value2" http://hostname/resource 
For file upload:
curl --form "fileupload=@filename.txt" http://hostname/resource 
RESTful HTTP Post:
curl -X POST -d @filename http://hostname/resource 
For logging into a site (auth):
curl -d "username=admin&password=admin&submit=Login" --dump-header headers http://localhost/Login curl -L -b headers http://localhost/

서버 개발을 하면서 image, css, javascript 소스를 수정하고 변경한걸 보기 위해 크롬을 켜서 보면 바로 적용되지 않는 걸 알 수가 있다.

그 이유는 캐쉬를 쓰고 있기 때문인데, 크롬에 있는 캐쉬를 매번 작업할 때마다 제거하면서 로딩을 다시 하기가 번거로웠다.

하지만 그럴 필요가 없었다. 왜냐하면 크롬 기능 중 캐쉬를 제거하면서 새로고침하는 기능이 따로 있기 때문이다.

다만 f12를 하여 개발자 도구에 들어간 후에 새로고침 버튼을 길게 누르면 해당 화면이 나온다.

참조 

http://superuser.com/questions/220179/how-can-i-do-a-cache-refresh-in-google-chrome

http://stackoverflow.com/questions/14969315/whats-the-difference-between-normal-reload-hard-reload-and-empty-cache-a

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;