본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ

IT기술/html40

[css] radio, checkbox css 바꾸기 원하는 radio, checkbox 를 구현하는 방법은 두가지가 있다. 1. 이미지를 넣어서 라디오 버튼과 체크 박스에 내가 원하는 이미지를 넣는 방법. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 /*css*/ input[type="radio"], input[type="checkbox"] { display:inline-block; width:20px; height:20px; vertical-align:middle; background:url(radio_n.png) no-repeat 0 0; appearance: none; -moz-appearance: none; /* Firefox */ .. 2018. 10. 7.
font 태그 속성 모음 태그 예시 내용 내용 내용 색상을 “RED”로 변경 내용 색상을 “16진수 색상코드”로 변경 내용 내용 폰트를 “궁서”체로 변경 내용 내용 내용 내용 내용 내용을 폰트 5사이즈로 변경 내용을 기본 폰트 사이즈 3에서 +1 만큼 변경 내용을 기본 폰트 사이즈 3에서 -1 만큼 변경 내용을 폰트 사이즈 15pt 으로 변경 내용을 폰트 사이즈 15px 으로 변경 폰트사이즈 비교 points (pt) pixels (px) ems (em) percent (%) 6 8 0.5 50 7 9 0.55 55 8 11 0.7 70 9 12 0.75 75 10 13 0.8 80 11 15 0.95 95 12 16 1 100 13 17 1.05 105 14 19 1.2 120 15 21 1.3 130 16 22 1.4 140.. 2018. 10. 6.
나눔고딕,나눔바른고딕 웹폰트 적용하기 기본 폰트를 지정해놓으면 그냥 쓸때보다 훨~씬 깔끔해 보인다. 설정해놓기 좋은 폰트 중에 무료폰트인 나눔고딕을 적용하는 방법을 알아보자. 1. 나눔고딕 웹폰트를 사용하려면 웹폰트로 만들어진 폰트 파일을 서버에 올립니다. 아래링크를 클릭해서 다운로드 하면 된다. 보통 웹폰트는 용량이 크면 안되기 때문에 ttf를 쓰지 않고 woff, eot 파일을 사용한다. woff : Web Open Font Format의 약자로 W3C권고 표준이고, 파이어폭스, 사파리, 오페라, 크롬, IE 9이상에서 지원 eot : Embeded Open Type의 약자로, 표준형식은 아니지만, IE6~8버전에서는 eot만을 지원하기 때문에, woff, eot 모두 필요 2. CSS에서 다음과 같이 정의함으로 폰트를 적용할 수 있습니.. 2018. 10. 6.
텍스트박스에 힌트 텍스트 넣기 placeholder placeholder 속성은 익스플로러의 경우 10 부터 지원되며, 지금은 거의 윈도우10 쓰는지라 거의 다 될것이라 본다. 사용방법은 간단하다. 이렇고 실제로해보면 이렇다. 2018. 10. 6.
input type="text" 에서 글 쓰지 못하게 막기 ( readonly, disabled ) 위와 같은 input 개체가 있을 때, 글 쓰지 못하게 막는 방법 중, 대표적으로 readonly 와 disabled 가 있다. 이 둘 모두 input 타입의 속성이다. 따라서 다음과 같이 사용할 수 있다. using html 1 2 3 4 5 6 7 using script 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var oEle1 = document.getElementById('txt1') ; var oEle2 = document.getElementById('txt2') ; var oEle3 = document.getElementById('txtfield1') ; var oEle4 = document.getElementById('txtfield2') ;.. 2018. 10. 6.
자바스크립트 쿠키 생성 document.cookie 자바스크립트에서 쿠키를 읽기,작성,삭제할 수 있습니다.이를 위한 속성이 document.cookie 입니다.쿠키 반환document.cookie 쿠키 생성 document.cookie="name=soke"; 만료시간이 있는 쿠키 생성document.cookie="name=soke; expires=Mon, 13 Jul 2015 05:04:24 GMT"; 경로 매게 변수를 사용한 쿠키 생성 (기본적으로 쿠키는 현재 페이지에 속합니다.)document.cookie="name=soke; expires=Mon, 13 Jul 2015 05:04:24 GMT; path=/"; 쿠키 삭제 ( 날짜 매개 변수를 지난 날짜로 쿠키 생성)document.cookie="name=;expires=Thu, 01 Jan 1970 .. 2017. 4. 26.
마크다운(Markdown)으로 글을 써보자 1. 마크다운(Markdown) 소개 마크다운(Markdown)은 일종의 마크업 언어로 텍스트에 태그를 이용해서 글자를 굵게하거나, 이미지를 삽입하거나 하는 일이 가능하다. 엔하위키에 글을 쓸 때 위키 언어를 이용해서 글을 써야하는데, 마크다운 언어는 그 위키 언어와 상당히 유사하다고 할 수 있다. 하지만 마크다운은 위키문법보다 훨씬 더 간단하므로 익히는데 그리 긴 시간이 필요하지 않다는 장점을 가지고 있다.요즘 마크다운은 아주 여러 곳에서 사용되고 있다. 이제 워드프레스에서는 기본적으로 마크다운을 지원하기 시작했고1, Tumblr나 Ghost와 같은 블로그 플랫폼에서도 마크다운 언어를 기본적으로 지원하고 있다. 또한 모니위키의 최신 개발 버전에서는 마크다운 언어와 모니위키 언어를 동시에 지원하도록 하고.. 2017. 4. 4.
z-index 속성으로 배치 순서 결정하기 [html/css] z-index 속성으로 배치 순서 결정하기 어제는 레이아웃이나 배치를 정렬하는 position 속성에 대해 배웠습니다. position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) 그런데 이렇게 배치한 객체가 겹칠 때가 있습니다. 오늘 배울 부분은 z-index란 속성인데요 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성입니다. z-index는 position (relative, absolute, fixed)속성이 적용된 요소에서만 작동합니다. auto : 기본값으로 z-index를 지정하지 않은 것과 같음 number : 배치 순서를 결정, 숫자가 낮을수록 뒤에 배치되며 숫자가 높을수록 앞에 나옴 -1 처럼 음수도 가능합.. 2017. 3. 23.
overflow 속성 (overflow: visible, hidden, scroll, auto 차이) [html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이) 오늘 배워 볼 속성은 overflow입니다. overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다. 상속여부: 상속되지 않음. visible: 기본값으로 내용이 더 길어도 그대로 보입니다. (내용이 흘러넘침) hidden : 내용이 넘치면 자릅니다. 자른 부분은 보이지 않습니다. scroll : 내용이 넘치지 않아도 항상 스크롤바가 보입니다. auto : 내용이 잘릴 때만 스크롤바가 보입니다. 사용 예: #container{overflow: hidden;} 그럼 실제 400x 100 크기의 박스를 만들어서똑같은 내용을 담아보겠습니다.(scroll 만.. 2017. 3. 23.
clear 속성에 대해 배워 보자 (clear:none, right, left, both) [html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both) 얼마 전에 float 속성에 대해 배웠는데요 float는 오른쪽, 왼쪽으로 객체를 띄워서 정렬하는 속성이라고 했습니다. 사진에다가 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 돌러싼 형태가 됩니다. [css 기초] float 속성에 대하여 사진 주위로 글자가 따라 붙지 않게 하려면 어떻게 해야 할까요? 바로 clear 속성을 사용하면 됩니다... clear는 '취소하다'라는 뜻으로 left는 float:left값을 취소하고 right는 float:right값을 취소합니다 clear: none는 기초값으로 clear를 설정하지 않은 것과 같습니다 clear: lef.. 2017. 3. 23.
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) [html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) 지난 시간엔 float 속성을 배웠는데요, float는 객체를 오른쪽 또는 왼쪽으로 정렬해서 레이아웃을 배치할 때 유용하다고 했습니다. [css 기초] float 속성에 대하여 오늘 배울 position 역시 레이아웃을 배치하거나, 객체를 위치시킬 때 사용할 수 있는 속성 입니다 *position 속성은 상속되지 않음* position: static position: static은 초기값으로 위치를 지정하지 않을 때와 같습니다 보통 static은 사용할 일이 없지만, 앞에 설정된 position을 무시할 때 사용되기도 합니다.top, bottom, left, right 속성값이 적용.. 2017. 3. 23.
float 속성에 대하여 [css 기초] float 속성에 대하여 float를 그대로 번역하자면 '띄우다'라는 뜻입니다. float는 css에서 정렬하기 위해 사용되는 속성입니다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있습니다. 지난 시간에 줄 속에 넣는 태그(inline element)와, 묶음 태그(block element)에 대해 배웠는데 [inline element&block element] - span, div 태그 묶음 태그에만 float 속성을 적용할 수 있습니다. 묶음 태그: 등.. [float 속성값] float 속성값은 left,right, none 밖에 없습니다. lef.. 2017. 3. 23.

티스토리툴바