'html' 카테고리 - 3 페이지. 웹개발 커뮤니티 블로그 - webisfree.com

Close

CATEGORIES

LATEST POSTs 최근 등록된 포스팅 목록 최신순
인기순

html [HTML] XHTML에서 스크립트 오류없이 사용하는 방법 HTML에서의 자바스크립트 사용하는 경우와 달리 XHTML에서 스크립트 언어를 사용하면 파싱과정에서 오류가 생길 수 있습니다. 이를 방지하기 위해 CDATA 섹션을 사용해 XHTML에서 텍스트에 대한 파싱을 방지할 수가 있습니다.<script type="text/javascript">//<![CDATA[function() { ...}]]></script>
View : 2425 / 2014-11-17
html [HTML] hr 태그 사용방법 및 예제보기, 구분선 수평선 넣기 hr 태그는 수평선을 보여주어 섹션 또는 단락을 구분짓기 위해서 간편하게 사용할 수가 있습니다. 디바이더로 불리기도 하죠. 이 부분을 표현하기 위해서 섹션 상단 또는 하단에 스타일을 지정하기도 하지만 hr 태그를 사용하면 알아보기가 쉽기 때문에 더 좋죠. 그럼 아래 예제를 참고하세요.[ 1 ] hr 태그 예제 보기<html>
View : 6168 / 2014-10-08
html [HTML CODE 태그의 쓰임 및 활용 # code 태그란? 사용 예제; code 태그는 html에서 컴퓨터에 사용되는 코드의 조각을 나타낼 때 사용합니다. 예를 들어 변수 및 속성, XML 이름, 파일 이름 등이 이에 해당합니다. 아래처럼 코드를 모니터에 출력하는 경우 code태그를 사용합니다.<html><body> <span
View : 9446 / 2014-08-20
html PRE 태그와 XMP 태그를 이용한 줄바꿈 및 모든 것 안녕하세요^^ PRE 태그와 XMP 태그... 쓰이는 빈도가 아주 높은 것은 아니지만 알아두면 너무나도 편리하기 때문에 반드시 알아두어야 하는 코드 중 하나입니다! 이 태그를 이용해 할 수 있는 건 무엇이고 어떤 차이가 있는지 알아보도록 하겠습니다. 먼저 태그의 쓰임은 무엇일까요?[ 1 ] PRE 태그; PRE태그는 preformatted를 의미하며 이미 형식화 되었음을 뜻합니다. 즉, 개행 문자를 사용해 줄바꿈 할 필요가 없이 태그 안에 입력한 그대로 보여줄 수 입니다.<
View : 9921 / 2014-08-19
html [HTML5] 시맨틱 요소의 사용과 IE8에서의 문제점 시맨틱(Semantic)이란 ’의미있는’이란 사전적 의미를 가지고 있습니다. 결국 의미가 있는 요소를 시맨틱 요소라고 할 수 있는데요... 기존의 시맨틱 요소는 아래를 보시면...<form><input><textarea>이와 같이 어떤 기능을 가지고 있는데 의미를 알 수 있는 요소를 말합니다. 이와 달리 div나 span 요소들은 그 의미를 알 수가 없죠... 결국 시맨틱 요소가 많아지는 것은 좀 더 의미가 담긴... 이해하기 쉬운 웹 페이지 빌드가 가능하다
View : 2534 / 2014-07-12
html [HTML] input 태그, placeholder 속성을 이용 비밀번호 입력폼 만들기 안녕하세요 ~ 예전에는 단문의(매우 매우 짧은...) 글을 자주 올렸는데 컨텐츠도 부족한데 글까지 부족하면 왠지 안될 것 같아서... 아무래도 인사부터 시작하면 좀 더 심의를 기울여 작성하지 않을까요?ㅎ 오늘은 비밀번호 입력을 위한 input 태그에 대해 알아보겠습니다.! 다른 input 태그와의 차이점; type 속성에 일반적으로 text를 넣지만 비밀번호는 password를 넣어줍니다. 그렇게 되면 아래처럼 패스워드가 ******표시로 보이게
View : 17742 / 2014-07-07
html [CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법 안녕하세요. position 속성이 absolute인 경우 정렬을 맞추는 방법입니다. 해당 요소의 position이 absolute일때 정렬하는 방법은 relative와는 다른 방법을 사용해야 합니다. absolute일 경우의 특징을 고려해서 레이아웃을 설정해야 하는데요...1. position 속성이 absolute?; absolute 속성이 되는 경우 주변의 다른 레이어 객체들과 상관하지 않은채 정렬이 가능하게 됩니다. 예를 들어 position이 relative인 경우는 다른
View : 17084 / 2014-03-24
html [CSS] float속성과 clear속성으로 레이아웃 구성하기 홈페이지를 빌드할 때 layout은 상당히 중요한 요소입니다. 특히 모바일 및 태블릿 환경을 고려해야 하기 때문에 더욱 신경 쓸 수 밖에 없는데요... float 속성을 사용하면 layout 간의 빈 여백을 없도록 도와줍니다. Example <style>float: left;float: right;</style>위처럼 float 속성을 사용한 뒤 다음 레이어는 위에서 미리 선언된
View : 2604 / 2014-02-20
html [CSS] Media query, 디바이스별 미디어쿼리 설정 안녕하세요! 모바일 웹페이지 제작을 위한 디바이스별 CSS 미디어쿼리(media query)를 아래에 정리하고 있습니다. 미디어 쿼리는 반응형 웹을 구현하는데 매우 중요한 css 스킬입니다. 처음 등장하였을 때는 기준이 되는 기준 resolution이 없었으나 현재는 많이 다릅니다. 아래와 같은 기준이 많이 쓰이지 않죠...요즘은 모바일의 경우 786px을 기준으로 구분하는 것이 대부분입니다. 테블릿과 랩탑의 경우는 비슷하기
View : 3592 / 2014-02-05
html [HTML] 이미지 태그 테두리 삭제하는 방법 홈페이지를 크로스 브라우징 하는 과정에서 IE, Internet Explorer에서만 생긴 이미지의 테두리를 발견할 수 있다. 이는 구 버전의 IE에서 발견되는데 IE를 확인하지 않는 경우 이런 이슈가 나타나는지 알아채기 어려울 수도 있다.이 이슈를 간단하게 해결하는 방법은 CSS 제일 첫 부분에 모든 img 태그의 테두리 값, border를 0으로 설정하는게 가장 효과적인 방법이다. 일반적으로 reset.css를 사용하는 경우에 이런 코드가 상단에 포함되어 있다. reset.css와 같은 미리 만들어두어 웹퍼블리싱
View : 12031 / 2014-01-31
html [CSS] 공통선택자 *(Asterisk) 알아보기 그리고 활용방법 CSS 선택자에 대하여 알아봅니다. CSS의 선택자는 아래와 같이 4가지로 크게 나뉩니다.공통선택자타입선택자아이디선택자클래스선택자여기서 제일 상위의 선택자가 바로 오늘 알아볼 공통 선택자입니다. 공통선택자는 무슨 역할을 할까요?# CSS 공통 선택자가 하는 일<br
View : 5405 / 2014-01-31
html [HTML] 문서 형식 정의(DTD)가 중요한 이유와 기본 코드 문서 형식 정의(Document Type Definition 이하 DTD)는 페이지를 불러오기 위한 가장 기초적이면서도 기본이 되는 문서타입을 정하는 것으로 브라우저에 현재의 웹페이지가 어떤 문서 형식을 가지는지 전달해줍니다. 이는 웹표준을 지킨 웹사이트를 위해서 가장 기본이 되는 과정이며 정확한 문서 형식이 중요한 또 다른 이유는 DTD가 올바르지 않은 경우 브라우저에 따라 다르게 나타날 수 있습니다. 반드시 HTML5, XHTML 등등 자신의 문서타입을 고려하여 html 최상단에 DTD를 써 두어야 합니다.참고로
View : 2164 / 2014-01-31
html [HTML] 페이지에 아래첨자 또는 윗첨자 넣기, sub, sup 태그 HTML을 사용하여 웹페이지에 윗첨자 또는 아래첨자를 넣을때 사용하는 방법을 알아봅니다.# HTML에서 윗첨자 또는 아래첨자 추가하는 방법HTML 태그를 사용하여 sub 그리고 sup 태그를 사용할 수 있습니다. 그렇다면 언제 이 태그를 사용할까요? 첨자는 주석을 넣기 위해서도 많이 사용합니다. 예를 들어 부가적인 설명을 나타내기 위해서 첨자를 넣은 후 문서의 하단또는 우측등에 세부 설명을 적는 경우가 있을 수 있습니다.
View : 23879 / 2014-01-31
html [HTML] HTML이란 무엇이며 그 특징 알아보기 HTML (Hyper Text Markup Language)은 정적인 홈페이지를 브라우저를 통해 Client, 방문자에게 보여주도록 만들어진 언어입니다. 마크업 언어라고도 부릅니다. 웹사이트의 시작은 매우 간단한 HTML로부터 시작하였습니다.초창기 HTML의 시작은 매우 단순했습니다. 간단한 텍스트와 링크가 전부였습니다. 사실 링크도 간단한 메뉴 이동뿐이었죠. 이런 웹은 크게 발전했는데 아래와 같은 사건들이 있은 후 입니다.<h4 data-custom-style="c
View : 4134 / 2014-01-31
html [CSS] 태그의 스크롤바 지정 및 삭제하기, div, iframe 스크롤바를 지정 및 삭제(숨기기, 안보이게 하기)하는 방법입니다. 스크립트를 사용해 반응형 웹을 만들때 많이 사용됩니다. 참고로 IE 8 이하에서는 overflow가 안되니 스크립트를 쓰거나 position을 relative로 바꿔주는 등 다른 우회 방법을 찾으셔야 합니다^^Ex)- 문서태그의 경우overflow-x: none; // 좌우 스크롤바 숨기기overflow-y: none; // 상하 스크롤바 숨기기overflow: auto; // 스크롤바 생성- i
View : 6549 / 2014-01-25
html [HTML] 태그에 사용자 임의 속성의 입력 상황에 따라 태그에 사용자 임의의 속성을 넣고 싶을때가 있죠. class나 id값을 사용하기도 하지만 data가 많거나 복잡하면 다른 방법을 찾아야합니다.자주 사용되는 예는 게시판에 번호나 특정 style을 부여하려는 경우입니다. 사용자 속성의 경우 속성 이름을 짓는데 제한은 없지만 W3C의 권고사항으로 "data-" 형의 이름을 사용하면 좋죠.data-user="..." //user와 관련된 속성을 넣을 경우data-product="..." //produc
View : 4831 / 2014-01-22
html [HTML] textarea 태그의 특징 및 기본 속성 알아보기 textarea 태그는 홈페이지를 만들때 많이 사용되는 태그 중 하나입니다. 사용자의 입력을 받아 처리할 수 있는 입력폼으로 일반적인 레이아웃에 관련 속성외에 이벽값에 대한 추가적인 속성을 가지고 있습니다.입력폼의 경우 자주 사용되는 태그는 보통 짧은 글이나 문장에 input 태그가 사용되고 긴 글 또는 띄어씌기를 보여줘야하는 경우는 대부분 textarea 태그가 사용됩니다.아래는 textar
View : 10929 / 2014-01-21
html [HTML] Meta viewport 제어, 뷰포트 변경, 모바일 환경 meta 태그중 viewport 속성은 특히 모바일 웹페이지가 있는 경우 사용됩니다. 뷰포트는 사용하는 디바이스에서 웹페이지를 열었을 때 보여줄 화면의 크기와 부가적인 옵션을 제어할 수 있도록 도와줍니다~ 아래 예를 보시면...<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><br
View : 4335 / 2014-01-17
html [CSS] media query에서 screen과 only screen의 차이점 CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.# Example 1@media screen (min-width: 1024px) { color: #000
View : 7175 / 2014-01-11

VISITOR COUNTER

5613 Today 7415 07/03 5994 07/02 12480 07/01 17668 06/30 14493 06/29 14281 06/28

CATEGORIES