더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
LATEST POSTs
최근 등록된 포스팅 목록 최신순
인기순
- 폼태그에서 그룹화하는 fieldset 태그 웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한
- [HTML5] Mark tag를 사용하기, highlighted or marked text 스타일을 강조하기 위한 방법으로 mark태그를 사용할 수 있다. mark 태그는 간단하게 해당 텍스트에 하이라이트 효과를 주며 백그라운드 색상을 가지게 된다. 물론 우리가 잘 알드시 요소에 스타일을 부여하는 경우 c
- [html] table 태그 summary 속성 알아보기 테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인
- meta 태그 http-equiv 설정방법과 차이점 웹브라우저의 헤드 영역에 다음과 같이 meta 태그와 함께 사용된 http-equiv 속성을 볼 수 있다. 이 속성은 왜 사용되고 각각의 태그마다 차이점을 알아보고자 한다.! 왜 http-equiv를 사용하는가?마이
View Count : 20,266 Created : 2016-03-23 - iOS 아이폰 input 태그에 기본 둥근 테두리 및 그림자 제거 방법 아이폰에서 input 태그를 보면 디바이스에 따른 스타일 속성이 기본으로 적용되는데 그 중 하나가 바로 테두리이고 내부의 그림자이다.만약 사용자가 둥근 테두리를 제거하거나 그림자를 삭제하길 원하는 경우 어떻게 해야할
- [html] Accordion 어코디언 방식의 인터페이스 UI 배우기 웹사이트 UI 인터페이스 중에서 부분 영역을 숨기는.. 즉, 히든기능을 통해 필요한 콘텐츠만 우선적으로 보여주는 어코디언 또는 탭 방식을 사용할 수 있다. 그 중에서 오늘은 어코디언 방식을 알아보고자 한다.어코디언은
View Count : 5,901 Created : 2016-03-13 - [HTML] 드랍다운(Drop down)과 콤보박스(Combo box) 차이점은? HTML 퍼블리싱에서 매우 자주사용되는 입력양식 중 하나로 콤보박스(Combo box) 그리고 드랍 박스 또는 드랍 리스(Drop Box or List)가 있습니다. 이 둘이 같은 것이 아니면 다른 것인지... 차이
View Count : 5,753 Created : 2016-01-27 - 반응형 웹페이지를 가장 쉽게 만드는 팁과 노하우 안녕하세요~ 퇴근 후 집에 가는 길... 날씨가 너무 춥군요;; 내일은 서울이 영하 16도까지 내려간다는데;; 얼마나 추울지 벌써부터 걱정이되는군요... 오늘은 반응형 웹사이트를 쉽게 만드는 방법에 대하여
View Count : 36,179 Created : 2016-01-18 - [HTML 소스코드] 라디오 버튼 만들기, radio button 아래는 효과적인 라디오 버튼을 생성하기 위한 방법과 이미지, CSS, 자바스크립트의 모든 방법에 대하여 정리한 내용입니다. 주요 내용은 아래와 같습니다.1. 라디오 버튼 생성을 위한 html 코드2. 라디오 버
- IE에서 유투브 iframe 동영상이 z-index 미적용 되는 경우 해결방법 만약 자신의 웹사이트에 유튜브 영상의 코드를 추가하여 보여주려고 한다면 해당 동영상 코드를 iframe 태그에 사용하는 것이 일반적입니다.그런데 만약 태그를 넣었음에도 정상 동작하지 않는 문제가 나타날 경우가 있는데
- meta charset, 메타태그에서 문자 인코딩 설정하는 방법 HTML을 사용하여 맨 처음 문서를 작성할 때 하는 몇 가지 중 가장 먼저 문자 인코딩(언어셋) 선언이 필요합니다. 아래는 html에서 문자 인코딩(Encoding)은 무엇이고 어떻게 선언하며 사
- height 100퍼센트 최대길이 적용 안되는 이슈 특정 요소의 높이가 페이지 전체 높이와 같게 맞춰야 하는 경우가 있을 수 있습니다. 반응형으로 브라우저가 늘어나면 자동으로 해당 영역의 끝이 맞도록 말이죠 ~ 간단하게 예를 들어 아래의 이미지를 보시면 더 쉽게 이해
- figure 그리고 figcaption 태그 알아보기 html5의 큰 특징 중 하나가 바로 시멘틱 태그의 사용이라고 할 수 있죠. 그 중 하나인 figure 태그에 대하여 알아보겠습니다.# figure 태그의 쓰임figure 태그는 단독으로 사용할 수 있는 요소들...View Count : 5,215 Created : 2015-11-05
- html로 탭메뉴(Tab Menu) 만드는 방법 자바스크립트를 사용하여 웹사이트에 탭메뉴(Tab menu)를 만들어보겠습니다. 어떻게하면 탭메뉴를 만들 수 있을까요?! 탭메뉴 UI란?탭 방식으로 화면을 전환하는 인터페이
- ie(익스플로러)에서 textarea disabled 텍스트 색 변경하는 방법 textarea를 사용하여 내용을 보여주고 수정할 수는 없도록 하기위해 disabled 속성을 적용하게되면 익스플로러, ie에서 텍스트색상이 적용되지 않습니다. 태그에 브라우저가 가지는 기본 스타일 값이 우선되기 때
- 테이블 태그 colgroup 알아보기 html에서 <table>(테이블) 태그는 가장 많이 쓰이는 태그 요소 중 하나죠. 특히 명단이나 리스트를 보여줄 때 가장 쉽게 구현이 가능한 방법입니다.이런 테이블을 구성하는데 사용할 수 있는 태그는 참
- IE에서 height 100% 사용시 div 태그에 margin-bottom 적용 안되는 현상 div 태그에 height가 100% 적용된 경우 안에 있는 요소의 margin-bottom이 반영이 안되는 문제가 IE(익스플로러)에서만 발생하였습니다. 이 문제를 해결할 수 있는 방법이 무엇이 있는지 알아봤으며
View Count : 5,748 Created : 2015-10-26 - 테이블 태그 td 또는 tr에 min-height 적용 방법 테이블안에 존재하는 태그 중 콘텐츠를 보여주는 tr, th, td 태그들은 table-row의 display 속성 값을 가지게 됩니다. 하지만 이 속성 때문에 min-height를 사용한 최소 높이를 설정할 수가 없View Count : 15,046 Created : 2015-10-26
- input 태그 placeholder 텍스트 색상 변경하기 넓리 사용되는 입력폼 중 하나인 input 태그는 다양한 속성을 가지고 있습니다. 그 중에서도 사용자가 아무것도 입력하지 않았을때 팁으로 텍스트를 보여주는 속성이 바로 placeholder 속성입니다.#
View Count : 36,034 Created : 2015-10-23 - 이메일 html 아웃룩에서 발생하는 문제 수정방법 line-height 이메일 HTML 작성시 아웃룩을 맞추기 위한 테스트 메일이 실패하는 경우가 상당합니다. 그 중에서 가장 큰 이슈중 하나인 line-height 문제를 해결해 보고자 합니다. 가장 많은 이슈사항이 바로 테이블 태그 또