티스토리

꿈꾸는 개발자
검색하기

블로그 홈

꿈꾸는 개발자

b.redinfo.co.kr/m

webmaster@redinfo.co.kr

구독자
0
방명록 방문하기
공지 YMusic 플러그인 개발중단 안내 모두보기

주요 글 목록

  • Uncaught SyntaxError: Unexpected token : Uncaught SyntaxError: Unexpected token : 스크립트 구문 오류로 대부분 새미콜론(;) 을찍다가 콜론(:) 찍는 오타로 발생될때가 많다.검색을 해서 찾아서 수정; 공감수 11 댓글수 0 2018. 9. 4.
  • 웹싸이트의 가장 기본적인 레이아웃 구성 웹싸이트의 틀은 기본적으로 header, sidebar, content, footer 로 이루어져 있다. 이건 꼭 구성되어야할 틀의 구성이 아닌, 오랫동안 구성되어온 하나의 습관처럼 되어 만들어진 규칙이기도 하다. HTML5로 넘어오면서 이런 틀의 규칙을 적용하여 좀더 의미있는 요소들이 많이 생겨나게 되었다. 오늘 설명할 레이아웃 구성을 이미지로 표현하면 바로 아래의 기본적인 레이아웃 구성 이미지와 같다. 기본적인 레이아웃 구성 이미지(이미지1-1)+ 위의 이미지에서는 표시되지 않았지만, 가장 바깥쪽 테두리는 wrap 요소 이며 sidebar 와 content 를 감싸는 요소는 container 이다. 기본적인 레이아웃 구성요소 설명wrap : 모든 레이아웃을 감싸고 있는 레이아웃header : 기본적으.. 공감수 3 댓글수 0 2015. 10. 1.
  • HTML 의 FORM 요소로 지정할 수 있는 속성과 속성값 FORM 요소는 일반적으로 사용자가 데이터를 입력할 수 있는 입력폼 요소들의 범위를 설정하거나, 서버로 전송할 데이터들을 설정할 때 사용한다. 이때 서버란 데이터를 처리할 수 있는 프로그램을 뜻하며 PHP 나 CGI 를 예로 들 수 있다. 이러한 서버는 FORM으로 넘겨진 값들을 가져오기 위해선 꼭 필요하다. 이렇듯 FORM 요소는 데이터를 전송하기 위해 꼭 필요한 요소기이도 하나 요즘은 AJAX를 사용하여, 요소에 구애 받지 않고, 전체페이지의 로드없이 서버로 데이터를 보내고 받고 하는게 추세이다. 물론 AJAX를 사용한다해서 FORM 요소를 사용하지 않는건 아니다. 그 이유는 FORM 은 입력폼이라는 또하나의 자식과 같은 요소들을 컨트롤 할 수 있기때문에 FORM 요소 범위 안에 작성된 값들을 쉽게 .. 공감수 9 댓글수 2 2015. 7. 20.
  • CSS 의 word-wrap, word-break : 텍스트의 줄바꿈 형식을 지정하고 싶을때 사실 word-wrap 프로퍼티와 word-break 프로퍼티는 같은 목적으로 사용된다. 하지만, 브라우저별로 지원하는 방식이 달라서, 쓰기가 애매모호 할때가 많다. 물론 해결방법이 있긴 있지만, 앞으로 꼭 개선되어야 할 부분중 하나이다. 예제를 보여주고 싶지만, 브라우저 마다 전부 달라서, 사용가능한 방법만 소개할까 한다. 우선 word-wrap 프로퍼티 와 word-break 프로퍼티 의값으로 올 수 있는 것들을 살펴보도록 하자. 아래는 각각 프로퍼티 값으로 올 수 있는 값들과 설명이다. word-wrap 프로퍼티normal 브라우저에 설정된 기본값이다, 이값으로 설정하여도 한글같은 경우 줄바꿈이 자동으로 되는것같지만, 영문일경우는 스페이스바 나 탭 또는 엔터로 띄운 공간이 없을경우 줄바꿈이 되지 않.. 공감수 23 댓글수 2 2015. 6. 23.
  • 웹제작시 정말 유용한 CSS CSS는 문서의 스타일을 따로 정의한다는 뜻을 가졌다. 이렇게 따로 정의하는것을 스타일시트라고 하며, 문서내에서 사용되는 방법을 CSS라고 한다. 사실 이러한 설명들은 CSS 책이나 인터넷에 CSS 만 검색해도 나오는것들이다. 그렇다면, "스타일시트와 CSS는 다른것일까?" 라는 의문이 생기기도 한다. 하지만 의문을 가질필요는 없다. 둘다 같은 의미를 가졌다. 일반적으로 문서에 적용되는 스타일은 CSS 방식을 사용한다. 또한 CSS 방식으로 된 스타일들을 묶어놓은것을 스타일시트라고 한다. 암튼 HTML5 에선 CSS가 문서 스타일 타입의 표준이 되었기때문에, 스타일시트와 CSS의 의미를 두고 고민할 필요는 없다. 일단 아래의 예제를 살펴보도록 하자. CSS파일 로드 HTML 문서에 적용 body{ bac.. 공감수 6 댓글수 0 2015. 6. 2.
  • iframe 을 이용하여 페이지 전체 이동없이 원하는 페이지만 로드해보자. 이건 너무나 간단해서 길게 설명을 않해도 될것같다. 일반적으로 iframe 은 아래와 같은 방법으로 사용한다. 대충 감이 올 수 있겠지만, iframe 의 src 속성값을 변경할 수 있다면, 클릭하나로 계속 싸이트의 주소를 변경하여, 페이지의 전체적인 이동없이, iframe 안에 원하는 페이지만 변경시킬 수 있다. 예제와 관련된 소스는 아래와 같다. 전체페이지 이동없이 iframe 안의 페이지만 이동하는 예제 $(document).ready(function(e) { /* a요소를 클릭 했을 시 */ $('a').click(function(){ /* iframe 요소의 src 속성값을 a 요소의 data-url 속성값으로 변경 */ $('#iframe').attr('src',$(this).attr('dat.. 공감수 11 댓글수 0 2015. 6. 2.
  • pre 요소 : 입력한 HTML 소스코드의 내용을 그대로 보여주고 싶을때 이 요소는 HTML 의 태그의 특성도 적용이 되면서 입력한 내용 그대로 화면에 출력을 해준다. 이태그는 형식은 아래와 같다. 내용(태그포함) pre 태그의 본래 목적은 형태 그대로 노출시켜야될 텍스트 등을 쉽게 나타내기 위해서 사용한다. 사용 목적에 속하는 예로 아래와 같은 경우를 들 수 있다. 아래는 code 요소를 사용하여 C언어의 소스코드를 나타내었다. #include #include void main() { printf("Hello World\n"); } 실행결과 위의 예제 코드를 보면 알겠지만, pre 요소안에서는 다른 요소들도 사용할 수 있다. 위의 예제에서는 code 요소를 사용하여 나타내었다. 중요한점은 pre요소 안에서 다른요소를 사용시, 처음시작부분과.. 공감수 4 댓글수 0 2015. 6. 2.
  • noscript 요소를 사용하여 스크립트가 무효한 브라우저를 대처해보자 요즘같은 시대에 스크립트가 지원 안되는 브라우저는 없을것이다. 그렇다면, 이말은 무슨 뜻인가?? 스크립트가 무효하다는 말은 사용자가 특정 싸이트 또는 모든 싸이트에 대한 스크립트 기능을 차단해 놓은 경우이다. 스크립트 차단기능은 스마트폰 기준으로 보면, 메뉴->설정->자바스크립트 를 들어가서 허용/차단 설정을 할 수 있다. 일반 PC 에서 스크립트를 차단 하는방법은 아래의 포스터 링크를 클릭하면 된다. 2015/02/04 - [정보바다/사용팁/다운로드] - IE(익스) 와 Chrome(크롬)에서 특정 싸이트의 스크립트기능을 차단해 보자 아래의 그림은 스마트폰에서 크롬브라우저를 사용하여 자바스크립트를 차단하는 모습이다. (스마트폰 크롬 브라우저 기준) 위의 그림을 보면 붉은색으로 칠해진 부분이 스크립트를 .. 공감수 8 댓글수 0 2015. 6. 2.
  • 하위 브라우저 에서 placeholder 사용하는 방법 placeholder 란 아래 그림과같이 input 태그나 textarea 에 적용 할 수 있는 속성 중 하나이다. 하지만 익스플로러 같은경우 하위 브라우저 에서는 지원이 안되고있기 때문에, Javascript 또는 JQuery를 이용하여 따로 적용시켜주어야한다. (placeholder 속성이 적용된 모습) 이 속성은 위의 그림과 같이 input 요소나 textarea 요소에 적용시킬 수 있으며, 마우스나 포커스가 들어올 시 자동으로 사라진다. 또한, 글이 입력되지 않고 포커스를 빠져나가면, 자동으로 placeholder 속성값이 위의 그림과 같이 다시 생기게 된다. 아래는 placeholder 의 기본적인 사용 예제이다. placeholder 기본 사용 예제 placeholder 속성값에는 사용자에게 .. 공감수 8 댓글수 0 2015. 6. 2.
  • og 개체를 이용하여 웹싸이트의 정보를 넣어보자 og 개체는 왜사용하는가? og 개체를 이용하는 이유는 sns 를 통해 웹페이지를 공유할 시 사용자들에게 정확한 웹페이지의 정보를 알려주기 위해서 이다. 물론 og 개체를 사용하지 않아도, sns 공유하기 시스템에서 자동으로 설정이 된다. 하지만, 웹페이지의 정보가 엉뚱하게 들어 갈 수 있기때문에, og 개체를 사용하여, 웹페이지의 정보를 확실히 해주는게 좋다. 아래의 예제는 og 개체를 이용 한 예제와 sns 에 og 개체가 적용된 이미지이다. og 개체를 이용하여 값을 설정하는 예제 위의 og 개체가 적용된 예제 위의 예제를 보면 알겠지만, og 개체를 등록하면, sns 내보내기(공유하기)시 정확한 정보를 알려줄 수 있다. 또한 이러한 og 개체를 사용하는 방법은 정말 쉽다. 위의 property 값.. 공감수 8 댓글수 0 2015. 6. 2.
  • HTML 에서 data- 속성을 이용하여 태그를 데이터로 사용해보자 과거에 태그의 속성을 사용해 데이터정보를 넣기위해 웹표준이 아닌 비표준 사용자정의 속성을 이용하여 웹을 제작하곤 했엇다. 물론 내가 그렇게 사용하였다. 하지만 HTML이 발전되어 지금은 웹표준 속성인 data- 속성을 사용하여 데이터정보를 넣을 수 있게되었다. 언제부터 나왔는지는 모르겟지만, 이속성은 정말 유용하게 사용할 수 있다. 사용 예제는 아래와같다. 위의 사용 예제를 보면 data- 속성으로 name, info, value 가 설정되었다. 이 3개의 값들은 사용자 정의이기 때문에, 데이터의 정보를 알기 쉽게 이름을 정의하여 사용하는게 좋다. 이렇게 정의된 data- 속성은, 웹 개발 용도에 따라 여러가지로 사용될 수 있다. 또한 자바스크립트 또는 제이쿼리등을 이용하여,좀더 폭넓게 사용할 수 있다... 공감수 12 댓글수 0 2015. 6. 2.
  • meta 요소의 http-equiv 속성 : HTML 문서의 초기정보를 설정할때 meta 요소에서 문서의 초기정보를 나타내는 속성은 http-equiv 속성이다. 이속성을 지정하면 문서의 기본언어(content-language), MIME 타입(content-type), 기본 스타일시트(default-style), 브라우저호환성설정(X-UA-Compatible), 페이지 리로드(refresh) 등을 나타낼 수 있다. 아래는 속성값에 대한 설명이다. 우선 content-language 속성값은 기본언어를 설정할 수 있다. content 속성값에는 그에 맞는 값을 입력해야한다. 여기선 기본언어에 대한 값이 들어가야한다. 아래 예제에서는 ko(한국어) 로 설정되어 있다. content-language 속성값 두번째로 볼 속성값은 content-type 속성값이다. 이 속성값은 문서의 MI.. 공감수 17 댓글수 0 2015. 6. 2.
  • meta 요소의 name 속성 : HTML 문서의 정보를 설정할 때 meta 요소는 맨 처음 오는 속성값에 따라서 여러가지 정보를 설정할 수 있다. 그중에서 문서의 정보를 설정 할 수 있는 mete name 이 있다. 아래는 meta name 의 간단한 사용 예제이다. meta 의 name 속성 간단한 예제 위의 예제에서는 name 속성값으로 author, description, keywords 가 적용되었다. 아래의 표는 name 속성값으로 올 수 있는 값들이 나와있다. 이러한 속성값들을 지정하면 content 속성값에 그에 맞는 값들을 설정할 수 있다. name 속성 값으로 올 수 있는 것들author 이 속성값을 지정하면 문서의 저자를 나타낼 수 있다. description 이 속성값을 지정하면 문서의 개요를 설정할 수 있으며, 검색 엔진의 검색 결과로 표시가 된다.. 공감수 6 댓글수 0 2015. 6. 2.
  • viewport : 모바일웹 제작시 화면의 표시 영역을 설정 요즘 모바일웹 제작은 스마트폰의 사양이 많이 좋아졌기 때문에 일반 PC웹을 제작하는것과 별반 차이가 없다. 단지 모바일웹에서 아직 지원되지 않는 기능을 없애거나, 적용가능한 방법을 찾아서 제작하는 것 밖에는 다른점이 없다. 그리고 모바일웹제작시 꼭 필요한 설정이 있는데, 바로 viewport 이다. viewport 는 스마트폰의 웹화면영역을 확대/축소 해주는 기능을 한다. 물론 웹이 모바일크기에 맞게 제작되어야 한다. 보통 모바일웹을 제작할땐 레이아웃의 크기를 % 로 맞추기 때문에, viewport 를 설정하면 확대된 화면으로 볼 수가 있다. 일반적인 설정법은 아래와 같다. viewport 의 기본 사용 법 위의 소스코드는 html 에서 head 요소 안에 넣어야한다. meta 요소의 name 속성을 사.. 공감수 9 댓글수 0 2015. 6. 2.
  • form 요소 에서 submit 의 return 값을 컨트롤 하기 보통 form 에서 내부적으로 처리해야할 데이터가 있을경우 자바스크립트 또는 제이쿼리를 이용하게 된다. 하지만 자바스크립트 같은 경우 return 값을 설정해 주어도 기본 sumit 기능을 수행하게 되서 골치가 아플때가 있다. 그럴때에는 form 요소의 속성인 onSubmit 에서 아래와 같이 return 값을 붙여주면, 제대로된 값을 받아서 처리시킬 수 있다. 자바스크립트 예제 function form_submit() { /* confirm 함수는 확인창 결과값으로 TRUE 와 FALSE 값을 return 하게 된다*/ var check_submit=confirm('로그인 하시겠습니까?'); return check_submit; } 위에서는 자바스크립트의 사용방법을 알아보았고, 아래는 JQUERY 의 .. 공감수 8 댓글수 0 2015. 6. 2.
  • 모바일 웹 에서 A 태그의 터치되는 영역의 배경색을 전체로 잡아주는 방법 나같은 경우 모바일웹을 따로 공부한 적이 없기 때문에, 항상 여러테스트를 거쳐서 모바일 웹을 제작하곤한다. 많은 사람들이 모바일웹은 따로 구현된 HTML 코드나 JQUERY,CSS 등을 필수적으로 이용하여 제작하는걸로 아는데, 그런건 절대 아니다. 단지 구현된 하나의 프레임워크라 해야하나? 그이상도 아니고 그이하도 아니다. 나같은 경우는 오히려 불편해서 사용을 잘 안하는 편이다. 모든건 직접 테스트 해가면서 하는게 젤 좋은 방법이다. 이런 방법은 내가 늘 공부해온 방식이니, 참고만 하길 바란다. 일단 A 태그의 기본적인 사용 예제를 살펴보자. 일반적인 a요소 사용 예제 아롱다옹 모바일에서 위의 태그를 클릭하면 어떻게 될까? 뭐 padding 을 주었으니, 영역은 5px 만큼 넓어졌을 것이다. 하지만, 모.. 공감수 9 댓글수 1 2015. 6. 2.
  • CSS 에서 정말 유용하게 쓰이는 셀렉터 CSS에서 가장 기본적인 셀렉터 지정방법은 요소, 요소의 ID, 요소의 CLASS 등이 있다. 이런 지정 방법은 가장 이해하기쉽고, CSS를 배우기 위해선 기본적으로 알고 있어야 한다. 아래는 이런 지정방법의 사용 예제이다. CSS 셀렉터 예제 #wrap{ background-color:black; padding:10px; width:300px;} a{ text-decoration:none; color:#95afc9;} .bold_font{ font-weight:900; color:white;} 티스토리 위의 링크를 클릭하시면 티스토리 홈페이지로 이동합니다. 실행결과 위의 예제에서는 가장 기본적인 셀렉터의 사용방법을 보여주었다. 그렇다면, 이것말고도 평소에 자주 쓰이는 유용한 셀렉터는 어떤 것들이 있는지.. 공감수 4 댓글수 0 2015. 6. 2.
  • Jquery 를 이용하여 간단한 심리테스트 만들기 요즘 페이스북이나 카카오스토리를 보면 심리테스트 웹컨텐츠들이 많이 생긴걸 알 수 있다. 이러한 테스트들은 간단하게 재미로 볼 수 있는 것들이다. 믿고, 안믿고는 본인에 따라 다르고, 대부분 재미로 넘기기 때문에, 어느정도 알맞게 작성해도 그럭저럭 심리테스트가 완성된다. 아래는 간단하게 Jquery 를 이용하여 만든 심리테스트이다. 별다른 설명이 없기때문에 아래의 예제를 이용하여, 자신만의 테스트 결과를 만들어도 좋다. jquery 를 이용한 심리테스트 프로그램 예제 $(document).ready(function(){ /* 리스트 중 하나를 선택했을 시 */ $('#sel').change(function(){ /* 선택된 값을 저장 (숫자로 형변환을 해준다) */ var sel_val=Number($(t.. 공감수 11 댓글수 0 2015. 6. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.