~

전체메뉴

웹 표준 개발 FAQ

아이콘
웹 표준 개발 관련 질문과 답변을 확인 하실 수 있습니다.

전체 18건 (1페이지/2페이지)

  • HTML5 문서페이지에 CSS를 적용시키는 방법은 무엇인가요?

  • 1. 내부 스타일 시트


    HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.


      <head>
        <style type="text/css">
        <!--
          body {font-size:9pt;}
        //-->
        </style>
      </head>

    HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.



    2.외부 스타일 시트


    css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.


      <link rel="stylesheet" type="text/css" href="mystyle.css">

    이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.


    반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.


    그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.



    3.HTML태그내에 스타일 지정


    위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.


      <p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

    내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법입니다.


    그러나 위의 소스에서도 보듯이 직관적으로 사용이 가능하다는 장점이 있습니다.


  • HTML5의 설계원칙은 무엇인가요?

  •  HTML5는 다음과 같이 호환성, 실용성, 상호운용성, 보편적 접근성을 염두하고 설계해야 합니다.



    ▷ 호환성


    호환성이란 하드웨어나 소프트웨어를 다른 종류의 컴퓨터나 장치에서도 변경하지 아니하고, 그대로 사용할 수 있는 성질로서 다음과 같은 특징을 지닙니다.


    · 첫째 , 콘텐츠의 호환성입니다. 콘텐츠의 호환성은 HTML5 이전 버전에서 제작된 콘텐츠도 문제없이 구동되는 것을 말합니다.

    · 둘째 , 이전 브라우저와의 호환성입니다. 이전 브라우저와의 호환성은 HTML5가 지원되지 않은 이전 버전의 브라우저에서도 이용할 수 있는 것을 말합니다.

    · 셋째 , 기능의 재사용입니다. 각 브라우저에서 구현된 서로 다른 기능들을 HTML5라는 이름 아래 공통된 사양으로 정의하여 브라우저들간의 호환성을 가져야 합니다.

    · 넷째 , 이용방법의 호환성입니다. 이는 기존에 사용하던 HTML Tag의 사용법을 그대로 사용할 수 있어야 함을 의미합니다.

    · 다섯째 , 혁신보다는 발전을 우선시 한다는 점입니다. HTML5의 버전업은 새로운 MarkUP Languege를 구현하는 것이 아니라 기존에 존재하던 HTML의 개량을 우선시 합니다.



    ▷ 실용성


    실용성이란 실제적인 쓸모가 있는 성질이나 특성을 말하는 것으로서 웹 현장에서 필요로 하는 것들을 중점적으로 진행해야 합니다. 이러한 중점적 우선순위는 사용자, 개발자, 브라우저 개발자, 사양서, 이론상의 순수함의 순서로 하며, 보안성을 고려하며 새로운 사양을 개발해야 합니다.



    ▷ 상호운용성


    상호운용성이란 웹 개발자가 브라우저의 차이를 의식하지 않더라도 HTML5를 적용한 브라우저라면 똑같이 동작하도록, 가능한 쓸데없이 복잡한 것들은 없애는 원칙을 말합니다.

    예를 들어 개발자가 HTML5로 작성된 프로그램은 최대한 간단하게 작성해야 하며, 인터넷 익스플러로, 파이어폭스, 크롬, 사파리 등과 같이 어떠한 브라우저에서 동작이 되어야 합니다.



    ▷ 보편적 접근성


    마지막으로 보편적 접근성은 모든 사람이 다양한 조건의 환경에서 다양한 장치를 이용하여 웹 콘텐츠에 접근할 수 있도록 보장하는 것을 말합니다.

    여기서 말하는 다양한 조건의 환경이란 신체적 조건은 물론 외부 환경까지도 포함하며, 다양한 장치는 하드웨어와 소프트웨어까지 포함된 범주를 가집니다. 따라서 데스크 탑 환경의 웹 브라우징 장치나, 모바일 기기, 그리고 장애인들이 사용하는 보조기는 보편적 접근성의 다양한 정치에 해당된다 할 수 있습니다.




    HTML5의 설계 원칙은 HTML5의 사용자 또는 개발자라면 반드시 알아야 하는 사항들입니다.

  • HTML5 엘리먼트는 무엇인가요?

  •  HTML5의 엘리먼트는 HTML문서의 구성요소 중 하나로서, HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들을 의미합니다. 이와 같은 HTML5 엘리먼트 구문의 특징으로는 다음과 같습니다.



    첫째, 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝이 납니다. 예를 들어 <p> 엘리먼트로 시작하였다면, 반드시 </p> 엘리먼트로 끝이나야 합니다. 두 번째, 일부 HTML 엘리먼트는 빈 콘텐츠를 가질 수 있는데, 예를 들어 <br> 엘리먼트는 단지 라인 브레이크만 삽입하며, <img>엘리먼트는 이미지를 참조할 뿐 콘텐츠를 가지고 있지 않습니다.


    세 번째, 빈 엘리먼트는 시작 태그로 종료된다는 점입니다. 이는 <br>이나 <img> 엘리먼트는 콘텐츠가 없는, 시작 태그만 존재하는 빈 엘리 먼트이기 때문입니다.

    네 번째 특징으로는 대부분의 엘리먼트는 속성을 가지며,다섯 번째는 대부분의 엘리먼트는 중첩이 가능하다는 특징을 지닙니다.



    엘리먼트 태그
    HTML을 문서 형식으로 구성할 때 의미를 표현하는 약속된 단어들 부등호 기호(<>)로 둘러싸인 엘리먼트의 조합을 부르는 이름

  • HTML5 Cross Browser Polyfills 이란 무엇인가요?

  • polyfill은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말합니다.



    polyfill은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당하고 있습니다.



    주요한 Polyfill List


    · html5shiv : HTML5의 섹셔닝 요소(예: <header>, <nav>)를 지원하지 않는 브라우저를 위한 라이브러리


    · selectivizr : CSS3의 의사 클래스(pseudo-class)와 속성 선택자들을 IE6~8에서 지원하기 위한 라이브러리


    · Respond : 반응형 웹의 필수 속성중에 하나인 미디어쿼리를 IE6~8에서 지원하기 위한 라이브러리


    · Placeholder : HTML5의 플레이스홀더(placeholder)의 지원을 통일하기 위해서 제공하는 라이브러리


    · mediaelement.js : HTML5의 <video>와 <audio> 요소들을 모든 브라우저에서 하나의 파일로 같은 UI를 제공하기 위한 라이브러리


    · css3pie : CSS3의 border-radius와 box-shadow, liner-gradient를 IE6~9 브라우저에서 지원하기 위한 라이브러리


  • HTML5Shiv 는 무엇인가요?

  • shiv는 HTML5 요소를 구형 브라우저에서 지원되지 않는 새로운 요소를 지원하고 스타일화할 수 있도록 도움을 주는 라이브러리입니다.



    HTML5Shiv 구문


    · HTML5Shiv는 <head>태그 내에 배치됩니다 .


    · HTML5Shiv는 <script>태그 에서 참조되는 자바 스크립트 파일입니다 .


    · 새로운 HTML5 요소를 사용하는 경우 HTML5Shiv를 사용한다 : <article>, <section>, <aside>, <nav>, <footer>.



    강조해야 할 두 가지 핵심사항


    · shiv는 요소 안에서 링크시켜야 됩니다. HTML5 페이지가 다 렌더링 되기 전에 IE 브라우저가 새로운 요소에 대해 인지하고 있어야 하기 때문입니다.


    · shiv는 그 기능을 제대로 할 수 있게끔 하는 JavaScript에 의존하고 있습니다. 만약 유저의 대부분이 JavaScript의 기능을 끈 채로 웹 페이지를 브라우징하고 있다면, 마크업에 HTML5 요소명을 클래스 명으로 사용하는 등 대안을 고려해야 할 것입니다.


  • HTML5 SSE 란 무엇인가요?

  •  Server-Sent Events란?


    HTML5가 등장하기 전까지는 HTML에 서버 푸시를 위한 표준화된 기술이 없었기 때문에 웹에서 실시간 정보를 받아와야 할 때 외부 플러그인을 이용하거나 서버 푸시를 흉내 낸 Ajax 폴링(polling) 기법 등을 사용했습니다. 하지만 플러그인 종속적인 웹은 해당 플러그인을 설치해야 한다는 불편함이 있으며 폴링처럼 주기적인 요청을 통한 구현은 쓸모없는 요청의 발생으로 인한 대역폭의 낭비가 불가피하였습니다. HTML5의 Server-Sent Events(이하 SSE)는 이러한 문제 없이 서버가 필요할 때마다 클라이언트에게 데이터를 줄 수 있게 해주는 서버 푸시 기술입니다.




     브라우저 지원


    표의 숫자는 서버가 보낸 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.


    API 구글 엣지 파이어폭스 사파리 오페라
    SSE 6.0 Not supported 6.0 5.0 11.5


     SSE의 장점


    · 전통적인 HTTP를 통해 통신하므로 다른 프로토콜이 필요가 없습니다.


    · 재접속 처리 같은 대부분의 저수준 처리가 자동으로 됩니다.


    · 표준 기술답게 IE를 제외한 브라우저 대부분을 지원합니다.

    · HTML과 JavaScript만으로 구현할 수 있으므로 현재 지원되지 않는 브라우저(IE 포함)도 polyfill을 이용해 크로스 브라우징이 가능합니다.


  • HTML5에서 중단된 태그는 무엇인가요?

  • HTML5가 등장하면서 기존에 사용하던 태그들 중에는 중단된 태그들이 생겨났습니다. 대표적으로 다음과 같이 basefont, big, center, font, frame, flameset, s, strike, tt, u태그가 해당되는데 이 태그들의 공통점은 CSS로 대체할 수 있는 태그들입니다. 그렇기 때문에 HTML5에서는 더 이상 사용을 권장하지 않습니다. 하지만 현 시점에서 HTML5로 작성되지 않은 문서들이 많기 때문에 , 브라우저에서는 계속 지원되고 있습니다.



    이 뿐만 아니라 다른 태그들과 함께 사용하면서 혼란을 야기하는 태그 또한 HTML5에서 제외되었습니다. 축약어를 나타낼 때 사용되던 <acronym>태그는 약어 태그인 <abbr>태그로 대체되었고, <applet>과 <isindex> 그리고 <dir>은 각각 <object>, 폼양식, <ul> 태그로 대체 되었으며, <noscript>태그는 아직 HTML문법에서는 사용되지만, XML문법에서는 더 이상 사용하지 않습니다.



    태그 변경 내용
    <acronym> 약자를 의미하는 <abbr> 태그 사용
    <applet> <object> 태그로 대체
    <isindex> 폼 양식을 통해 대체
    <dir> ul태그를 통해 대체
    <noscript> HTML 문법에서는 사용하고 XML 문법에서는 더 이상 사용하지 않음

  • HTML5를 사용해야하는 이유는 무엇인가요?

  • 1. 빨라진 이미지 다운로드, 모바일 사용자에게 유리


    · 이론상으로 다운로드 비용을 낮추기 위해 구식 그래디언트를 즉각적으로 처리할 수 있습니다. 이것은 일반적으로 적용되지 않습니다.


    · HTML5에는 CSS3 외의 기타 그래디언트 효과도 포함되어 있습니다.


    · 그래디언트의 CSS3 지원 덕분에 새로운 수준의 프로그램이 가능해졌습니다. 예를 들어 보는 사람의 연령 또는 위치에 따라 그래디언트를 조정할 수 있습니다.



    2. 향상된 SEO


     CSS3 표현을 가진 기타 보편적인 그래픽 효과로는 불투명(전면의 이미지가 충분히 투명해야 배경 이미지가 부분적으로 보일 수 있습니다), 가장자리 다듬기, 드롭 섀도우(Drop Shadow) 등이 있습니다. 이 모든 것들이 CCS3 그래디언트의 간소화된 업로드와 더 쉬워진 크로스 플랫폼(Cross Platform) 유지/보수를 공유할 수 있습니다. 또한 이것들은 매우 중요한 SEO(Search Engine Optimization)에 있어 유리한 점이 있습니다.


     CSS3 그래디언트의 또 다른 기술적 이점은 SCCS(Source Code Control System)와의 호환성이 높아졌다는 점입니다.


     CSS3 이전에 그래디언트는 사진으로 인식됐습니다. 일반적인 SCCS에서 사진을 바꾸는 것은 이해하기 힘든 작업이다. SCCS 자체는 오직 발생하는 변화와 그 변화에 대한 코멘트(Comment)만을 기록합니다.


     하지만 CSS3 그래디언트의 의미론적 마크업(Markup)을 통해 SCCS는 그래디언트를 표현하는 텍스트에서 알맞게 동작할 수 있습니다. SCCS는 특정 시점에서 그래디언트의 색조 또는 강도 변화를 다음과 같은 형식에 따라 자동으로 보고할 수 있습니다.


     <background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear-gradient(#FFB260, #FF3F13);


    이것은 프로그래머에게 매우 편리한 기능입니다. 검증된 개발 버전 구성 등의 소스 코드를 관리하기 위해 그들이 사용하는 툴은 웹 디자인의 그래픽 구조로 더욱 자연스럽게 확장될 수 있습니다.



    3. 세련된 에니메이션 효과


    HTML5는 이미 앞서 소개한 특징을 가진 다양한 기능을 갖추고 있습니다. HTML5는 최고 수준의 디자이너가 제공하는 것과 동일한 디자인을 저렴한 비용으로 구현할 수 있게 할 뿐만 아니라 더 빨라진 로드(Load)와 의미론적 마크업의 SEO 및 유지/보수 장점 등이 있습니다. 또한 HTML5는 초기 버전에서는 불가능했던 효과도 제공하고 있습니다. 그 중 하나가 애니메이션입니다.



    4. 쉬워진 앱 개발, 모바일 사용자에게 유리


    마지막으로 HTML5가 제공하는 질적인 장점은 네이티브 애플리케이션과 경쟁하기 위한 충분한 프로그래밍 환경을 제공한다는 점입니다. 이것은 특히 모바일 최종 사용자들에게 있어 중요합니다. 네이티브 앱 개발에는 비용이 많이 듭니다. 프로그래머 비용이 비싸고 라이선스는 문제는 까다롭다 못해 엉뚱하기까지 하며 휴대성도 문제가 됩니다. HTML5는 매우 강력하기 때문에 많은 앱들을 HTML5 내에서 효과적으로 코딩(Coding) 할 수 있습니다. 네이티브 앱과 비교했을 때의 장점은 다음과 같습니다.


    · 검색 엔진에 의한 자동 검색


    · 추가적인 설치 없이 최종 사용자에게 즉시 접근 가능


    · 내부 데스크톱, 모바일, 원격 가정 또는 사무실 사용자를 잇는 단일 코드 기반



    HTML5는 오랫동안 그 기준이 마련되고 있습니다. 많은 사람들이 웹 사이트 구조의 가장 중요한 부분을 의미론적인 마크업과 이해할 수 있는 API로 개발했습니다. HTML5를 현명하게 사용하면 더 빠르고 민첩한 다운로드, 향상된 검색엔진 배치, 수월한 개발이 가능합니다.


  • HTML5 SVG의 장점과 Canvas와의 차이점은 무엇인가요?

  •  SVG 란 무엇인가요?


    · SVG란 확장 가능한 벡터(Vector) 그래픽을 의미합니다.


    · SVG는 웹을 위한 벡터 기반 그래픽을 정의하는 데 사용됩니다.


    · SVG는 XML 형식의 그래픽을 정의합니다.


    · 확대하거나 크기를 변경해도 SVG 그래픽의 품질은 전혀 손상이 없습니다.



     SVG의 장점은 무엇인가요?


    · SVG 이미지를 생성한 후 텍스트 편집기로 편집할 수 있습니다.


    · SVG 이미지는 검색 색인, 스크립트 및 압축 할 수 있습니다.


    · SVG 이미지는 확장 가능합니다.


    · SVG 이미지는 해상도에 관계없이 고품질로 인쇄 할 수 있습니다.


    · SVG 이미지는 품질의 손실없이 줌(Zoom: 크게보기/작게보기)이 가능합니다.



     브라우저 지원


    표의 숫자는 <svg>요소 를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다 .

    Element 구글 엣지 파이어폭스 사파리 오페라
    <svg> 4.0 9.0 3.0 3.2 10.1


     HTML Canvas 란 무엇입니까?


    · Canvas요소는 JavaScript를 통해 즉석에서 그래픽을 그리는 데 사용됩니다.


    · Canvas요소는 그래픽 만 컨테이너입니다. 실제로 그래픽을 그리려면 JavaScript를 사용해야합니다.


    · Canvas에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 몇 가지 방법이 있습니다.



     브라우저 지원


    표의 숫자는 <canvas>요소 를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다 .

    Element 구글 엣지 파이어폭스 사파리 오페라
    <canvas> 4.0 9.0 2.0 3.1 9.0

     SVG와 Canvas의 비교

    SVG Canvas
    해상도 독립적 해상도에 의존
    이벤트 핸들러에 대한 지원 이벤트 핸들러에 대한 지원없음
    가장 큰 렌더링 분야와 응용 프로그램에 적합 텍스트 렌더링 기능 미약
    DOM이 복잡하면 렌더링도 복잡해져서 느려짐 .PNG 또는 .JPG로 생성 된 이미지를 저장할 수 있음
    게임앱(응용프로그램)에는 적합하지 않음 그래픽 집약적인 게임에 적합

  • 뷰포트란 무엇인가요? (반응 형 웹 디자인)

  • ▷뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역입니다.

     뷰포트는 장치에 따라 다르며 컴퓨터 화면보다 휴대 전화에서 더 작습니다. 태블릿과 휴대전화 이전에는 웹 페이지가 컴퓨터 화면 전용으로 설계되었으며 웹 페이지는 정적 디자인과 고정 크기를 갖는 것이 일반적이었습니다. 그런 다음 태블릿과 휴대 전화를 사용하여 인터넷 서핑을 시작했을 때 고정 크기 웹 페이지가 너무 커서 뷰포트에 맞지 않았습니다. 이 문제를 해결하기 위해 해당 장치의 브라우저는 전체 웹 페이지를 화면에 맞게 축소했습니다.


    ▷뷰포트 설정


     viewport(뷰포트)를 사용하는 방법은 매우 간단합니다. 태그 사이에 작성하며, 기본 형식은 아래와 같습니다.

      <meta>name=“viewport” content=“속성=값, ...” </meta>


    속성 설명
    width 뷰포트 너비 device-width
    heigth 뷰포트 높이 device-heigth
    user-scaleble 확대/축소 가능 여부 yes(기본값),or
    initial-scale 초기 확대/축소 값 1(기본값)~10
    minimum-scale 초기 확대/축소 값 0~10 / 기본값(0.25)
    minimum-scale 초기 확대/축소 값 0~10 / 기본값(1.6)

12

이메일 무단 수집 거부

팝업 닫기

본 웹사이트에 게시된 이메일 주소가 전자우편수집 프로그램이나 그밖의 기술적장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망 이용촉진 및 정보보호등에 관한 법률에 의해 처벌 받을 수 있습니다.

닫기
TOP