신문과 프로그래머.

white-space는 요소 안에 공백 처리에 대한 속성입니다.

white space란 여백이라고도 하는데 html에서는 공백 같은 것이지요.

< 속성값 >

normal : 기본값으로 공백을 여러개 넣어도 공백 1개만 표시됩니다. 글이 길어지면 텍스트가 자동 줄바꿈(wrap) 됩니다.

nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시됩니다.

pre : 공백을 코드에 있는 그대로 표시함. <pre>와 같은 기능이지요. 코드에 줄바꿈이 없다면 자동 줄바꿈 되지 않습니다.

pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈 됩니다.

pre-line : 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈 됩니다.

감사합니다.

CSS로 한줄이 넘어가는 문자를 한줄로 줄일 수 있다.

한줄 뿐만 아니라 여러 줄로 설정도 가능하다.

1. 한줄로 내용 자르기.

  간단한 방법으로 overflow: hidden; 을 통해 한줄이 넘어가는 문자를 숨길 수 있다.

  뒤에 말줄임표를 추가하기 위해서는 text-overflow: ellipsis; 를 넣어주면 된다.

2. N줄로 내용 자르기.

text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로 하여야 함.

word-wrap: break-word : 잘라버릴 글자를 단어 단위로 잘라줌.

display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환.

-webkit-line-clamp: 3 : 보여줄 줄 수.

-webkit-box-orient: vertical : 플렉스 박스의 방향 설정.

저는 개발자이지만 유용한 정보라 포스팅 하였습니다.

감사합니다.

vertical-align 안먹을 때는

div, p, span 스타일에 display:table-cell을 주는 것이 핵심!!

하하.. 잘되네.

마우스 우클릭 막기

oncontextmenu = "return false"

텍스트 블럭지정 막기

onselectstart = "return false"

마우스 드래그 막기

ondragstart = "return false"

< body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" >

....

</body>

< div oncontextmenu="return false" onselectstart="return false" ondragstart="return false" >

....

</div>

* response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

 - POST, GET, OPTIONS, DELETE 요청에 대해 허용하겠다는 의미입니다.

<meta http-equiv="Access-Control-Allow-Methods" content="POST, GET, OPTIONS, DELETE"/>

* response.setHeader("Access-Control-Max-Age", "3600");

 - HTTP Request 요청에 앞서 Preflight Request 라는 요청이 발생되는데, 이는 해당 서버에 요청하는 메서드가 실행 가능한지(권한이 있는지) 확인을 위한 요청입니다. Preflight Request는 OPTIONS 메서드를 통해 서버에 전달됩니다. (위의 Methods 설정에서 OPTIONS 를 허용해 주었습니다.)

 여기서 Access-Control-Max-Age 는 Preflight request를 캐시할 시간입니다. 단위는 초단위이며, 3,600초는 1시간입니다. Preflight Request를 웹브라우저에 캐시한다면 최소 1시간동안에는 서버에 재 요청하지 않을 것입니다.

* response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

 이는 표준화된 규약은 아니지만, 보통 AJAX 호출이라는 것을 의미하기 위해 비공식적으로 사용되는 절차입니다. JQuery 또한 AJAX 요청 시, 이 헤더(x-requested-with)를 포함하는 것을 확인하실 수 있습니다. 여기서는 이 요청이 Ajax 요청임을 알려주기 위해 Header 에 x-request-width를 설정합니다. Form을 통한 요청과 Ajax 요청을 구분하기 위해 사용된 비표준 규약지만, 많은 라이브러리에서 이를 채택하여 사용하고 있습니다. (참고로 HTML5 부터는 Form 과 Ajax 요청을 구분할 수 있는 Header가 추가되었습니다.)

* response.setHeader("Access-Control-Allow-Origin", "*");

 이 부분이 가장 중요한 부분입니다. * 는 모든 도메인에 대해 허용하겠다는 의미입니다. 즉 어떤 웹사이트라도 이 서버에 접근하여 AJAX 요청하여 결과를 가져갈 수 있도록 허용하겠다는 의미입니다.

 만약 보안 이슈가 있어서 특정 도메인만 허용해야 한다면 * 대신 특정 도메인만을 지정할 수 있습니다.

<meta http-equiv="Access-Control-Allow-Origin" content="*"/>

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
• Access-Control-Max-Age: 3600
• Access-Control-Allow-Headers: Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization

Number 필드는 이름에서 볼 수 있듯이 숫자 입력을 편하게 하기 위해서 제안된 태크 입니다. 다른 웹 폼들도 대부분 그러하지만 Number 도 모바일 같이 입력이 제한된 환경에서 유용하게 사용됩니다. 

<input id="age" type="number" value="0"/>

숫자를 입력하기 위해서 제안된 용도에 맞게 이 항목을 선택하게 되면 모바일 환경과 같이 입력기가 별도로 뜰 때에는 숫자를 입력하기 위한 용도의 입력기가 나타 납니다. 

 Number는 단순히 숫자 입력을 요구하기 위한 용도로 사용되지는 않습니다. 숫자 이외에 다른 문제는 입력을 거부하거나 지정된 범위를 벗어나는 숫자의 입력을 거부하는 용도로도 활용 될 수 있습니다. 

value : Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.

min : Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.

max : Apprently, this represents the biggest number of the number input.

step : Step scale factor, default value is 1 if this attribute is not specified.

일반적인 데스크탑 환경에서는 Chrome, Opera에서 Number 태그가 사용 가능합니다. Number 객체 옆에는 숫자를 올리거나 내일 수 있는 버튼이 함께 붙어 있습니다. Step 속성은 숫자를 높이거나 낮출 때 사용하는 버튼을 눌렀을 때 증가 혹은 감소되는 양을 지정하기 위한 속성입니다. 

Browsers Render "Number" input as Spinner

IE 9

Firefox 4

Safari 5 ✓ (in Mac OS, but not Windows)

Chrome 8 ✓

Opera 11 ✓

Java Script에서 Number 객체를 활용 할 때에는 stepUp(), steopDown(), valueAsNumber 등의 속성을 사용할 수 있습니다. 

spinner.stepUp(x) - x being the value you want to increase in the field.

spinner.stepDown(x) - x being the value you want to decrease in the field.

spinner.valueAsNumber - return value of input as floating point number instead of string.

하지만 역시 웹 폼의 기능들은 모바일 환경에서 제일 유용합니다. 

accept="image/*" 옵션 사용시 갤러리등 이미지 선택 어플 동작.

capture="camera" 옵션 추가시 카메라 촬영 동작.

#div {
    position: relative;
    z-index: 10;
}

속성 추가.

참고 : http://stackoverflow.com/questions/4407878/why-does-adding-floatleft-to-my-css-make-my-link-unclickable

iframe  사용 시 다음과 같은 문제점이 있다.

1. iframe을 포함하는 페이지의 도메읶과 iframe에서 불러오는 페이지의 도메인이 다르면, 크로스 도메인 설정을 위해 별도의 소스 코드가 추가되어 성능에 영향을 줄 수 있다.

2. iframe의 높이값이 콘텎츠에 따라 유동적이어야 한다면 별도의 자바스크립트 코드가 추가되어 성능에 영향을 줄 수 있다.

3. 검색 엔진에서 iframe의 내용이 추출하여 표시하면 전체 페이지의 레이아웃이 비정상적으로 보일 수 있으며, 주변 맥락(머리글, 바닥글, 메뉴)이 노출되지 않아 검색 엔진 최적화 (SEO) 관점에서 적합하지 않다.

4. iframe은 가장 마지막으로 로딩되기 때문에 페이지 로딩 초기에는 화면이 비어 보일 수 있다.

5.모바일에서는 iframe 스크롤에 대한 랜더링이 브라우저별로 다르며, CSS  말 줄임이 동작하지 않는 브라우저가 있다.