-
Html, CSS 2018‧09‧27
텍스트 세로 방향으로 타이핑
글자가 입력된 문장 자체를 90도 돌린 듯 한 표현으로 타이핑 되게 하려면 아래처럼 작성한다. (단, 한글은 제외된다. 한글일 경우에는 적용되지 않고 세로로만 타이핑 된다.) writing-mode: vertical-rl; text-orientation: mixed; 그러면 이렇게 노출된다. 한 줄 내리면 이렇게 나온다. English text 글자들을 각도 조절되지 않고 세로로 타이핑 되게 하려면 아래처럼 작성한다. writing-mode: vertical-rl; text-orientation: upright; 그러면 이렇게 노출된다. […]
-
Android 2017‧11‧29
입력폼 Edit Text에 수정 안되게 하기
안드로이드 만들 때 텍스트 입력 폼을 <Edit Text/>를 이용해서 만든다. 그런데 가끔 readonly, 즉 수정 불가의 입력칸을 만들고 그 곳에 어플에서 만들어진 값을 노출하고 싶을 때가 있다. res > layout > 해당.xml 파일을 열어서 Edit Text에 android:focusableInTouchMode="false" 를 추가해 준다. 아래는 예제이다. <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/deviceip" android:textSize="16dp" android:textStyle="bold" android:focusableInTouchMode="false"/>
-
Javascript, jQuery 2016‧12‧16
JS - textarea의 글자들에 엔터값을 br태그로 변환
DB 데이터를 불러와서 노출하거나 textarea로 부터 입력받은 데이터를 DB에 저장하려 할 때 종종 쓰인다. str = str.replace(/(?:\r\n|\r|\n)/g, '<br />'); str이라는 변수에 textarea에서 입력받은 데이터가 있다면 엔터는 br 태그로 변환된다. 아래는 예제 미리보기이다.
-
Html, CSS 2016‧10‧17
css - div에 글자 입력 받고 placeholder 넣기
<div contenteditable="true" placeholder="여기에 글자를 입력해주세요."></div> 위 처럼 html을 작성한 후 아래처럼 css를 작성한다. [contenteditable=true]:empty:before{ content: attr(placeholder); display: block; /* For Firefox */ } div[contenteditable=true] { border: 1px solid #ddd; color : #333; font-size: 12px; width: 300px; padding: 5px; } 아래는 샘플
-
Javascript, jQuery 2016‧05‧03
jQuery - input과 textarea 글자 입력수 제한
해외에서 공유된 코드이다. 원문 : http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/ (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }); function setCount(src, elem) { var chars = src.value.length; if (chars > limit) { src.value = src.value.substr(0, limit); chars = limit; } elem.html( limit - chars ); } setCount($(this)[0], elem); } }); })(jQuery); 이렇게 플러그인으로 […]
-
Html, CSS 2015‧01‧13
css - 모바일웹 화면 회전시 텍스트 크기가 변경될 때
반응형 웹사이트를 제작하다보면 미디어쿼리를 이용해서 모바일 화면의 폰트 크기를 지정하는 경우가 있다. 그런데 세로로 보는 상태에서 화면을 회전시켜 가로 모드 (Landscape)가 되면 텍스트들이 자동으로 커지는 현상을 발견할 것이다. 픽셀로 정의한 폰트가 아닌 가변적인 치수로 지정할 경우 그러한데 이는 스마트폰의 브라우져가 컨텐츠 정보를 읽기에 최적화된 모드로 렌더링하기 때문이다. 이에 디자인을 기반으로 em이나 %로 폰트 사이즈를 설정한 […]
-
Html, CSS 2014‧06‧11
css - 텍스트에 그림자와 그라데이션 함께 넣는 코딩
코드 미리 보기 : http://jsfiddle.net/2GgqR/2/ 텍스트에 그림자 효과와 그라데이션 효과를 함께 넣고 싶을 때가 있다.물론 정식으로 코드를 제공하진 않지만 많은 사용자들이 이 효과를 위해 여러가지 방법을 동원한다.그 중에서 가장 효율적인 방법은 아래와 같다. h1 { font-size: 72px; background-image: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position:relative; } h1:after { background: none; content: attr(data-text); left: 0; position: absolute; […]
-
Html, CSS 2012‧04‧01
이미지와 텍스트 정렬 (앞 이미지, 뒤 텍스트)
이미지와 글자를 한 줄에 넣고 높이 정렬을 맞추고 싶을 때가 있다. <img src="이미지경로" border="0" align="absmiddle"> 위와 같은 방법이 있기도 하고, 아래 방법을 써보기도 한다. <img src="이미지경로" border="0" style="vertical-align:top;">
-
Html, CSS 2012‧03‧31
이미지와 텍스트 정렬 (위 이미지, 아래 텍스트)
간혹 이미지와 텍스트를 정렬하고 싶은데, 위에는 이미지 아이콘 아래는 설명 글자로 넣고 싶을때 글자가 아래로 내려가게 하는 코드 <img src = "이미지 경로" style=" display:block;"> 글자
-
Flash AS 2.0, Flash AS 3.0 2011‧10‧12
다이나믹 필드를 입력받은 값에 맞춰 크기 맞추기
AS 2.0 에서는 아래처럼 텍스트필드이름.autoSize = true; AS 3.0 에서는 아래처럼 텍스트필드이름.autoSize = TextFieldAutoSize.LEFT;