LATEST POSTs 가장 최근에 등록된 포스팅 목록입니다.
-
html
html로 탭메뉴(Tab Menu) 만드는 방법
-
html
ie(익스플로러)에서 textarea disabled 텍스트 색 변경하는 방법
textarea를 사용하여 내용을 보여주고 수정할 수는 없도록 하기위해 disabled 속성을 적용하게되면 익스플로러, ie에서 텍스트색상이 적용되지 않습니다. 태그에 브라우저가 가지는 <span style="font-weig
-
html
테이블 태그 colgroup 알아보기
html에서 테이블 태그는 가장 많이 쓰이는 태그 요소 중 하나죠. 특히 명단이나 리스트를 보여줄 때 가장 쉽게 구현이 가능한 방법입니다. 이런 테이블을 구성하는데 사용할 수 있는 태그는 참 많습니다.table, thead, tbody, tr, td 등등등 정말 많습니다. 오늘은 그중에 하나인 <span data-custom-style
-
html
IE에서 height 100% 사용시 div 태그에 margin-bottom 적용 안되는 현상
-
html
테이블 태그 td 또는 tr에 min-height 적용 방법
테이블안에 존재하는 태그 중 콘텐츠를 보여주는 tr, th, td 태그들은 table-row의 display 속성 값을 가지게 됩니다. 하지만 이 속성 때문에 min-height를 사용한 최소 높이를 설정할 수가 없는데 어떻게 방법이 없을까요?아쉽지만 결론부터 얘기하면 display 값을 바꾸지 않는 이상 방법은 없습니다. 다만 아래와
-
html
input 태그 placeholder 텍스트 색상 변경하기
-
html
이메일 html 아웃룩에서 발생하는 문제 수정방법 line-height
이메일 HTML 작성시 아웃룩을 맞추기 위한 테스트 메일이 실패하는 경우가 상당합니다. 그 중에서 가장 큰 이슈중 하나인 line-height 문제를 해결해 보고자 합니다. 가장 많은 이슈사항이 바로 테이블 태그 또는 a 태그에 line-height가 적용이 안되는 부분입니다...<span style="color: #333333; fo
-
html
[웹접근성] table에서 scope 속성 사용하기
웹접근성을 위해 사용하는 코딩기술 중 하나가 바로 table에서 scope 속성을 이용하는 방법입니다. scope 속성은 테이블의 th 또는 td 등의 해당 셀에게 사용하며 컬럼(column)인지 행(row)인지의 여부를 알려주는 역활을 합니다.<b
-
html
[HTML5] 파일 업로드시 다중 선택 및 드래그 이동 방법
-
html
[자바스크립트] 드래그앤드랍 draggable IE9 안되는 문제
HTML 5에서부터 지원되는 드래그앤드랍(Drag & Drop) 기능이 IE 9에서는 정상적으로 동작하지 않는 경우가 많습니다. CSS3가 익스플로러에서 정상적으로 지원되지 않기 때문이라는 의견도 있지만 자바스크립트만으로 해결된다는 글도 많아 단순하게 CSS3 문제라고 보기에도 무리가 있어보입니다. 해결가능한 방법에 대하여 알아볼까 합
-
html
[HTML] legend 태그, 동일 입력폼 그룹 지정 태그
입력 양식에서 동일한 그룹의 태그를 묶는 태그로 legend 태그와 fieldset 태그가 존재합니다. 이 둘의 차이점이라면 fieldset은 기능적인 측면에서 동일 그룹을 컨트롤할 수 있다는 부분이라면.... legend 태그는 시각적으로 어떤 그룹인지 나타낼 수 있습니다.<legend>
-
html
[CSS] padding 영역을 선택하여 색 지정하기, background-clip
만약 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 어떻게 해야할까요? 즉 패딩값이 적용되지 않은 콘텐츠 영역만 테두리 색을 지정하는 방법입니다. padding 값에 색을 지정할지 말지를 결정하기 위해 <span style="col
-
html
[HTML5] canvas 태그를 이용하여 사각형 그리기
-
html
textarea 태그에 이미지를 넣는 방법
textarea 태그에 이미지를 넣는다... 만약 textarea에 이미지를 넣어야한다면 왜 넣으려고 할까요? 가장 큰 이유는 아래일 것입니다.' textarea를 통해 텍스트만 보여주는 것이 아니라 중간에 삽입될 이미지도 함께 보여주고 싶다.'예를 들어 어떤 글을 작성할때 이미지를 함께 첨
-
html
[CSS] color 속성 지정시 border color 색상 자동 지정
말그대로 color에 색이 지정되어 있으면 border에 영향을 받는다. 이는 글꼴이 가진 폰트 색상이 테두리의 색상에 default 값으로 지정된다는 것을 의미한다. 결국 테두리의 색상과 폰트생이 같아야 한다면 font의 색상만 color 속성으로 지정할 경우 함께 변한다는 것을 의미한다.<br
-
html
IE에서 input 태그안에 있는 clear button 지우는 법
익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요?<span data-custom-style="ct
-
html
[CSS] 해당 Contents의 앞, 뒤에 특정 문장 삽입하기, content
CSS를 사용하여 콘텐츠를 추가하는 방법에 대하여 알아봅니다.텍스트 또는 기호 등을 html 문서가 아닌 방법으로 추가하려고 합니다. 자바스크립트를 사용하여 노드를 추가할 수도 있겠지만 CSS를 사용할 수도 있습니다. CSS의 pseudo 선택자를 이용하면 됩니다.<span data-custom-style=
-
html
input 태그 엔터키를 누를 경우 자동으로 submit 안되게 하기
-
html
[HTML] 라디오 버튼(radio button) 만들기, 선택방법
-
html
[HTML] input 태그 placeholder 속성, 텍스트 스타일 변경하기
input 태그의 placeholder 속성을 사용해 input 태그안에 보여지게 될 문구를 넣을 수 있습니다. 이 값은 방문자에게 어떤 정보에 대한 폼양식인지 전달할 뿐 실제 이 값이 전송되지는 않죠. 그런데 이 안에 있는 default 속성값... 예를 들어 색상이나 투명도 등을 설정하기 위해서는 어떻
-
html
position absolute에서 특정요소 세로 정렬하는 방법
세로 정렬을 하기 위한 방법들은 몇가지의 방법들이 있습니다. 가장 쉬운 방법중 하나가 table 태그를 사용하는 방법입니다. table을 사용하면 안에 있는 요소는 자동으로 세로정렬됩니다. 아니면 display의 속성을 table과 table-cell로 변경하는 방법 역시 유용합니다. 이 방
-
html
[HTML] a 태그 안에 ul 태그를 넣는 것이 올바른가?
a 태그안에 ul태그를 넣어서는 안됩니다. 그 이유는 a 태그는 span 태그처럼 inline 태그이기 때문입니다. 하지만 ul 태그는 div 태그처럼 block형태이기 때문에 inline 내부에 block 태그를 넣는 것은 실행이 가능할지라도 잘못된 방법입니다.결국 안됩니다. ul 태그의 li 안에 a태그를 넣도록 변경해야 합
-
html
파이어폭스 firefox에서 background-position 속성 적용 안될 경우
크로스 브라우징 작업을 하던중에 Firefox에서 background-position값 중 일부가 적용이 안되는 부분을 발견했습니다. Chrome(크롬)에서는 잘 되던 속성인데 말입니다... 알아보니 이 속성은 표준 CSS 속성이 아니더군요. 그래
-
html
[HTML] select 태그 사용시 내부 스타일 제거하는 방법
select 태그는 기본적으로 브라우저가 가지고 있는 스타일이 적용되어 있습니다. 그렇기 때문에 새로운 스타일을 적용하기 위해서는 기존 스타일을 제거할 필요가 있죠. 이때 사용할 수 있는 방법으로 appearance 속
-
html
[HTML] 버튼 태그 알아보기, button tag
button 태그에 대하여 알아보겠습니다. button 태그는 웹사이트에서 매우 많이 사용되는 엘리먼트 요소 버튼 모양의 레이아웃을 보여주고 특정 기능을 실행하거나 form 태그에 submit하는 등의 용도로 사용됩니다. 그럼 button 태그를 어떻게 사용하는지 아래에서 자세히 알아봅니다.<span data-custom-st
-
html
[CSS] 폰트와 관련된 모든 속성들 알아보기
! 자간, 글자와의 사이값을 수정, letter-spacingletter-space: 수정값수정값의 단위는 pt, em, px 단위가 사용되며 특이한 점은 음수 사용이 가능하다는 점으로 0px을 입력할 경우 자간이 0이 되지 않고 기본값이 적용됩니다. 그렇
-
html
[HTML] ip 미리 조회를 위한 dns-prefetch 알아보기
dns-prefetch는 해당 url의 웹페이지 로딩을 더 빠르게 하기 위해 미리 ip를 조회해 두는 기능입니다.특정 url주소의 ip를 미리 조회하기 위한 방법으로 아래의 내용을 헤더에 추가합니다.<link rel="dns-prefetch" href="webisfree.com
-
html
[HTML] XHTML에서 스크립트 오류없이 사용하는 방법
HTML에서의 자바스크립트 사용하는 경우와 달리 XHTML에서 스크립트 언어를 사용하면 파싱과정에서 오류가 생길 수 있습니다. 이를 방지하기 위해 CDATA 섹션을 사용해 XHTML에서 텍스트에 대한 파싱을 방지할 수가 있습니다.<script type="text/javascript"&
-
html
[HTML] hr 태그 사용방법 및 예제보기, 구분선 수평선 넣기
hr 태그는 수평선을 보여주어 섹션 또는 단락을 구분짓기 위해서 간편하게 사용할 수가 있습니다. 디바이더로 불리기도 하죠. 이 부분을 표현하기 위해서 섹션 상단 또는 하단에 스타일을 지정하기도 하지만 hr 태그를 사용하면 알아보기가 쉽기 때문에 더 좋죠. 그럼 아래 예제를
-
html
[HTML CODE 태그의 쓰임 및 활용
# code 태그란? 사용 예제; code 태그는 html에서 컴퓨터에 사용되는 코드의 조각을 나타낼 때 사용합니다. 예를 들어 변수 및 속성, XML 이름, 파일 이름 등이 이에 해당합니다. 아래처럼 코드를 모니터에 출력하는 경우 code</
