본문 바로가기

Publishing/HTML25

사이트 기본 setting html5 기본 레이아웃 주메뉴 바로가기 본문 바로가기 로그인 바로가기 회사이름 하나 하나-1 하나-2 하나-3 하나-4 둘둘둘둘둘 둘-1 둘-2 둘-3 둘-4 셋셋셋 셋셋셋-1 셋셋셋-2 셋셋셋-3 셋셋셋-4 넷넷넷 넷넷넷-1 넷넷넷-2 넷넷넷-3 넷넷넷-4 넷넷넷-5 넷넷넷-6 넷넷넷-7 다섯 다섯-1 다섯-2 타이틀 회사로고 공통 스타일시트 크로스브라우징을 위해 각 태그관련 속성을 초기화 시켜주는 CSS로 PC와 Mobile에서의 환경을 고려하여 각각 reset.css를 정의하고 있다. 각 서비스 개편시 해당 reset.css를 활용하여 초기화시켜준다. 그리고 기능적으로 공통적으로 사용되는 속성은 global 클래스네임을 정의하여 선택적으로 사용한다. 1. 아래 주소에서 reset.css를 다운 받.. 2020. 8. 11.
Event Page 코딩하기 https://www.melon.com/event/ticket/index.htm?gubunId=&keyword=&pageIndex=0 멜론과 멜론티켓의 꿀케미 혜택! 멜론 GOLD이상 누구나! 멜론티켓 예매수수료 무료! 음악이 필요한 순간, 멜론 www.melon.com 멜론 VIP 혜택관 오직 멜론 VIP만을 위한 특별한 문화 혜택 Melon x Melon 티켓 MVG 멜론과 멜론티켓의 슈퍼꿀케미파워! 멜론 GOLD 이상, 누구나! 예매 횟수 제한없이, 무제한! 정말 쉬운 방법으로, 간편하게! 멜론 티켓 수수료 무료 0원 정말 쉬운 헤택받는 방법! 보고 싶은 공연을 클릭하면 결제 시 자동으로 수수료 무료 혜택 제공! Tip 아래에서 꿀잼공연 추천해드릴게요~ 뮤지컬 〈모차르트!〉 10주년 기념공연 202.. 2020. 8. 4.
회원가입 폼 http://flato.kr/work/2000n/s503_write.html 이천시동행누리센터 동서양의 아름다운 정원을 품은 이천시동행누리센터으로 여러분을 초대합니다. flato.kr 2020. 7. 24.
HTML5 Canvas HTML 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. 왼쪽의 그래픽은으로 만들어집니다 . 빨간색 사각형, 그라디언트 사각형, 다색 사각형 및 다색 텍스트의 네 가지 요소가 표시됩니다. HTML Canvas 란 무엇입니까? HTML 요소는 JavaScript를 통해 즉석에서 그래픽을 그리는 데 사용됩니다. 요소는 그래픽 만 컨테이너입니다. 실제로 그래픽을 그리려면 JavaScript를 사용해야합니다. Canvas에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 몇 가지 방법이 있습니다. 캔버스 예 캔버스는 HTML 페이지에서 직사각형 영역입니다. 기본적으로 캔버스에는 테두리와 내용이 없습니다. 마크 업은 다음과 같습니다. 항상 id스크립트에서 참조 할 속성 width과 height캔버스의 .. 2020. 2. 13.
HTML5 Video (fullpage Video) 풀페이지 동영상 http://eehd80.dothome.co.kr/work/forest/v4/ 광릉숲 생물권보전지역 UNESCO Gwangneung Forest Biosphere Reserve 생물권보전지역 자연생태자원 문화역사자원 인적자원 국립수목원 제공 eehd80.dothome.co.kr HTML로 비디오 재생 HTML5 이전에는 플러그인 (예 : 플래시)이있는 브라우저에서만 비디오를 재생할 수있었습니다. HTML5 요소는 웹 페이지에 비디오를 포함시키는 표준 방법을 지정합니다. Your browser does not support the video tag. Your browser does not support HTML5 video. 이 controls속성은 재생, 일시 중지 및 볼륨과 같은 비디오.. 2020. 2. 13.
HTML5 audio 웹 오디오 HTML5 이전에는 오디오 파일을 플러그인 (예 : 플래시)이있는 브라우저에서만 재생할 수있었습니다. HTML5 요소는 웹 페이지에 오디오를 포함시키는 표준 방법을 지정합니다. HTML 요소 Your browser does not support the audio element. Your browser does not support the audio element. 이 controls속성은 재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가합니다. 이 요소를 사용하면 브라우저에서 선택할 수있는 대체 오디오 파일을 지정할 수 있습니다. 브라우저는 처음 인식 된 형식을 사용합니다. 및 태그 사이의 텍스트 는 요소를 지원하지 않는 브라우저에만 표시됩니다 . HTML 오디오 및 비디오 DOM 참조 .. 2020. 2. 13.
HTML5의 새로운 태그 HTML5의 새로운 기능 HTML5에 대한 DOCTYPE 선언은 매우 간단합니다. Content of the document...... HTML5의 기본 문자 인코딩은 UTF-8입니다. 의미 요소를 블록 요소로 정의 HTML5는 8 개의 새로운 의미 요소를 정의합니다 . 이들은 모두 블록 레벨 요소입니다. 이전 브라우저에서 올바른 동작을 보장하기 위해 이러한 HTML 요소 의 CSS 표시 속성을 설정하여 차단할 수 있습니다 . header, section, footer, aside, nav, main, article, figure { display: block; } Internet Explorer 8 문제 모든 새로운 HTML5 요소에 대해 위에서 설명한 솔루션을 사용할 수 있습니다. 그러나 IE8 (및.. 2020. 2. 13.
HTML 기본 layout HTML5의 새로운 의미 요소 많은 웹 사이트에는 탐색, 머리글 및 바닥 글을 나타내는 와 같은 HTML 코드가 포함되어 있습니다 . HTML5는 웹 페이지의 다른 부분을 정의하기위한 새로운 의미 요소를 제공합니다. HTML5 요소 요소는 문서의 섹션을 정의합니다. W3C의 HTML5 문서에 따르면 : "섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹입니다." 홈페이지는 일반적으로 소개, 컨텐츠 및 연락처 정보를 위해 섹션으로 분할 될 수 있습니다. WWF The World Wide Fund for Nature (WWF) is.... HTML5 요소 이 요소는 독립적이고 독립적 인 컨텐츠를 지정합니다. 기사는 독자적으로 이해해야하며, 웹 사이트의 나머지 부분과 독립적으로 읽을 수 있어야합니다. 요소를 사.. 2020. 2. 12.
html header 정보 DOCTYPE 모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 . html 5 권장 XHTML HTML 문서 제목 각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 ( 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔진에 대한 최적화를 꾀한다. 또한 문서 제목에 컨텐츠 제목을 포함시킴으로써, 외부 검색서비스에서 해당 컨텐츠의 노출이 더 잘될 수 있도록 한다. 기본 규칙 컨텐츠 제목 (공백) – (공백) 하위섹션명 (공백) | (공백) 서비스명 경제 | Daum 미디어다음 IT/과학 | Daum 미디어다음 스타존 | Daum 영화 하위섹션명은 서비스명 앞에 표기한다. 하위섹션명의 구분자는 ' | ' (vertical bar / pipe 기호) 를 사용한다. 섹션명은 웹접근성 요.. 2020. 2. 12.
웹접근성 준수 된 회원가입 폼 http://flato.kr/work/2000n/s503_write.html 이천시동행누리센터 동서양의 아름다운 정원을 품은 이천시동행누리센터으로 여러분을 초대합니다. flato.kr * 표시는 필수 입력 사항입니다. 정확하게 입력해 주세요! 기본정보 이용신청서 다운로드 아이디, 비밀번호, 비밀번호 확인 정보를 포함하는 표 아이디필수입력 ※ 최소 6자 이상의 영문, 숫자로 만들 수 있습니다. 비밀번호필수입력 ※ 특수문자, 영문자, 숫자 3종류를 포함한 9~15자리 이어야 합니다. 비밀번호 확인필수입력 이용대상자 성명, 생년월일, 성별, 이메일, 전화번호, 휴대폰번호, 주소 정보를 포함하는 표 성명필수입력 성별필수입력 남성 여성 생년월일필수입력 월 1 2 3 4 5 6 7 8 9 10 11 12 이메일 전.. 2020. 2. 12.
HTML input 속성 value 속성 이 value속성은 입력 필드의 초기 값을 지정합니다. First name: First name: 읽기 전용 속성 이 readonly속성은 입력 필드가 읽기 전용 (변경 불가능)임을 지정합니다. First name: First name: 비활성화 된 속성 이 disabled속성은 입력 필드가 비활성화되도록 지정합니다. 비활성화 된 입력 필드는 사용할 수없고 클릭 할 수 없으며 양식을 제출할 때 해당 값이 전송되지 않습니다. First name: First name: 크기 속성 이 size속성은 입력 필드의 크기 (문자)를 지정합니다. First name: First name: maxlength 속성 이 maxlength속성은 입력 필드에 허용되는 최대 길이를 지정합니다. First nam.. 2020. 2. 12.
HTML Form 요소 요소 가장 중요한 양식 요소는 요소입니다. 요소는에 따라 여러 가지 방법으로 표시 할 수 있습니다. type속성을 생략하면 입력 필드에 기본 유형 인 "text"가 표시됩니다. 요소 요소는 정의 드롭 다운 목록 : Volvo Saab Fiat Audi Volvo Saab Fiat Audi 요소는 선택할 수있는 옵션을 정의합니다. 기본적으로 드롭 다운 목록의 첫 번째 항목이 선택됩니다. 미리 선택된 옵션을 정의하려면 옵션에 selected속성을 추가하십시오 . Fiat Volvo Saab Fiat Audi size표시되는 값의 수를 지정 하려면 속성을 사용하십시오. Volvo Saab Fiat Audi Volvo Saab Fiat Audi multiple사용자가 둘 이상의 값을 선택할 수있게 하려면 속성을.. 2020. 2. 12.
HTML Input Type 속성 HTML 입력 유형 HTML에서 사용할 수있는 다른 입력 유형은 다음과 같습니다. 인라인 요소 1. 사용자로부터 데이터 값을 입력받기 위한 태그입니다. 2. type 속성 값에 따라 다양한 폼 컨트롤을 생성할 수 있습니다. 3. 공통 속성으로 name, value 속성이 있습니다. text 한 줄 글 입력 상자 maxlenhth 속성으로 최대 글자 수를 제한할 수 있다. password 비밀번호 입력 상자 입력된 내용은 '*'로 표시된다. search 검색 입력 상자 email 이메일 입력 상자 tel 전화번호 입력 상자 color 컬러 입력 상자 number 숫자 입력 상자 숫자의 최솟값, 최댓값을 min, max 속성으로 지정할 수 있다. range 슬라이드 바 숫자의 최솟값, 최댓값을 min, ma.. 2020. 2. 11.
HTML 폼 요소 HTML 요소는 사용자 입력을 수집하는 데 사용되는 양식을 정의합니다. HTML 양식은 양식 요소를 포함 합니다 . 양식 요소는 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소입니다. . form elements . 요소 요소는 가장 중요한 형태 요소입니다. 요소는에 따라 여러 가지 방법으로 표시 할 수있는 유형의 속성. 한 줄 텍스트 입력 필드를 정의합니다 라디오 버튼을 정의합니다 (많은 선택 중 하나를 선택하기위한 것) 제출 단추를 정의합니다 (양식 제출). 텍스트 입력 텍스트 입력을 위한 한 줄 입력 필드를 정의합니다 . First name: Last name: First name: Last name: 라디오 버튼 입력 라디오 버튼을 정의 합니다 . 라디오 .. 2020. 2. 11.
HTML 테이블 웹접근성이 준수된 테이블 2007시즌 팀순위 순위 팀 경기수 승 패 승률 승차 최근 우승 콜로라도 845 448 511 0.521 - - 1 콜로라도 163 90 73 0.552 - 9승-1패 2 샌디에이고 163 89 74 0.546 1 4승-6패 3 뉴욕M 163 88 74 0.543 1.5 4승-6패 4 애틀랜타 163 84 78 0.519 5.5 5승-5패 5 밀워키 163 83 79 0.512 6.5 5승-5패 6 LAD 163 82 80 0.506 7.5 3승-7패 널리를 참고하여 테이블을 코딩하세요. https://nuli.navercorp.com/sharing/ui/patternTable UI 라이브러리 Table 패턴 가이드 nuli.navercorp.com HTML 테이블 정의 HTML.. 2020. 2. 10.
HTML 목록 정렬되지 않은 HTML 목록 정렬되지 않은 목록은 태그로 시작합니다 . 각 목록 항목은 태그로 시작합니다 . 목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)로 표시됩니다. Coffee Tea Milk 정렬되지 않은 HTML 목록-목록 항목 마커 선택 CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는 데 사용됩니다. disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked 정렬 된 HTML 목록 정렬 된 .. 2020. 2. 10.
HTML 이미지 HTML 이미지 구문 HTML에서 이미지는 태그 로 정의됩니다 . 태그는 속성 만 포함하고, 닫는 태그가없는, 비어 있습니다. 이 src속성은 이미지의 URL (웹 주소)을 지정합니다. 대체 속성 이 alt속성은 사용자가 어떤 이유로 든 이미지를 볼 수없는 경우 (연결 속도 저하, src 속성 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지의 대체 텍스트를 제공합니다. alt속성 값은 이미지를 설명해야합니다. 브라우저가 이미지를 찾을 수 없으면 alt 속성 값이 표시됩니다 . 참고 :alt 속성이 필요합니다. 웹 페이지가 없으면 웹 페이지의 유효성이 올바르게 검사되지 않습니다. 다른 폴더의 이미지 지정하지 않으면 브라우저는 웹 페이지와 동일한 폴더에서 이미지를 찾을 것으로 예상합니다. 그러나 하.. 2020. 2. 10.
HTML 링크 링크는 거의 모든 웹 페이지에 있습니다. 링크를 사용하면 사용자가 페이지 간을 클릭 할 수 있습니다. HTML 링크-하이퍼 링크 HTML 링크는 하이퍼 링크입니다. 링크를 클릭하고 다른 문서로 이동할 수 있습니다. 링크 위로 마우스를 움직이면 마우스 화살표가 작은 손 모양으로 바뀝니다. 링크는 텍스트 일 ​​필요는 없습니다. 이미지 또는 다른 HTML 요소 일 수 있습니다. HTML 링크-구문 하이퍼 링크는 HTML 태그 로 정의됩니다 . Visit our HTML tutorial HTML 링크-대상 속성 이 target속성은 링크 된 문서를 열 위치를 지정합니다. target속성은 다음 값 중 하나를 사용할 수 있습니다 : _blank -링크 된 문서를 새 창이나 탭에서 엽니 다 _self -클릭 한 .. 2020. 2. 7.
HTML 텍스트 관련 요소 HTML 단락 HTML 요소는 단락을 정의합니다 . This is a paragraph. This is another paragraph. HTML 줄 바꿈 HTML 요소는 줄 바꿈을 정의합니다 . 새 단락을 시작하지 않고 줄 바꿈 (새 줄)을 원할 경우 사용하십시오 . 태그는 끝 태그가 없음을 의미 빈 태그입니다. This is a paragraph with line breaks. 아래 문장은 한줄로 표시됩니다. My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. HTML 요소 HTML 요소는 사전 형식화 된 텍스트를 정의합니다. 요소 내.. 2020. 2. 7.
HTML 제목 HTML 제목 제목은 to 태그 로 정의됩니다 . 가장 중요한 제목을 정의합니다. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 일반 문서를 HTML로 다음과 같은 규칙에 맞게 색인화 한다. H1 : 서비스명 H2 : 메인메뉴, 본문, 이용약관 등 H3 : 세부 컨텐츠, 핵심 컨텐츠 등 H4 : 서브 컨텐츠 H5, H6 : 헤딩요소의 파편화를 불러일으킬 여지가 있으므로 가급적 사용하지 않는다. 제목이 중요하다 검색 엔진은 표제를 사용하여 웹 페이지의 구조 및 컨텐츠를 색인화합니다. 사용자는 종종 제목으로 페이지를 훑어 봅니다. 문서 구조를 표시하려면 제목을 사용하는 것이 중요합니다. 제목은 주 제목에 사용되어야하고 그 뒤에 제목이 사용되며 그 .. 2020. 2. 7.
HTML 전체 태그 TagDescription Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation or an acronym Not supported in HTML5. Use instead. Defines an acronym Defines contact information for the author/owner of a document Not supported in HTML5. Use or instead. Defines an embedded applet Defines an area inside an image-map Defines an article Defines content aside from the page cont.. 2020. 2. 7.
HTML 블록 및 인라인 요소 블록요소, 인라인요소 블록요소 (Block Element) 줄을 바꿔 각각 독립된 줄에 표시된다. 별도의 CSS 컨트롤이 없다면 해당 문서 크기만큼의 너비를 가지며, 문서의 위에서부터 차곡차곡 쌓이는 형태로 표시된다. 인라인 요소와 텍스트 혹은 또 다른 블록요소를 포함 할 수 있다. 인라인요소 (Inline Element) 다른 인라인 요소와 같은 줄에 표시된다. 별도의 CSS컨트롤이 없다면 해당 문서의 좌측부터 우측으로 나열되는 형태로 표시된다. 또 다른 인라인 요소와 텍스트를 포함 할 수 있으나, 블록요소를 포함할 수는 없다. 모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다. 두 표시 값은 블록과 인라인입니다. 블록 레벨 요소 블록 수준 요소는 항상 새 줄에서 시작하여 사용 가능한 .. 2020. 2. 7.
HTML 속성 속성은 HTML 요소에 대한 추가 정보를 제공합니다. HTML 속성 모든 HTML 요소는 속성 을 가질 수 있습니다 속성 은 요소에 대한 추가 정보 를 제공합니다 속성은 항상 시작 태그에 지정됩니다 속성은 일반적으로 name = "value" 와 같은 이름 / 값 쌍으로 제공됩니다. alt Specifies an alternative text for an image, when the image cannot be displayed disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link id Specifies a unique id for an element src Spec.. 2020. 2. 7.
HTML 기본 태그 HTML 문서 모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 . HTML 문서 자체는로 시작 하고로 끝납니다 . HTML 문서에서 보이는 부분은와 사이 에 있습니다. My First Heading My first paragraph. HTML 제목 HTML 제목은 to 태그 로 정의됩니다 . 가장 중요한 제목을 정의합니다. 가장 중요한 제목을 정의합니다. This is heading 1 This is heading 2 This is heading 3 HTML 단락 HTML 단락은 태그 로 정의됩니다 . This is a paragraph. This is another paragraph. HTML 링크 HTML 링크는 태그 로 정의되고 링크 대상이 href속성에 지정되어 있습니다. 속성은 HTML .. 2020. 2. 7.
html이란? HTML이란 무엇입니까? HTML은 웹 페이지 작성을위한 표준 마크 업 언어입니다. HTML은 Hyper Text Markup Language의 약자 HTML은 웹 페이지의 구조를 설명합니다 HTML은 일련의 요소로 구성 HTML 요소는 브라우저에 내용을 표시하는 방법을 알려줍니다 HTML 요소는 태그로 표시됩니다 HTML 태그는 "제목", "단락", "표"등과 같은 콘텐츠를 레이블링합니다. 브라우저는 HTML 태그를 표시하지 않지만이를 사용하여 페이지의 컨텐츠를 렌더링합니다 간단한 HTML 문서 My First Heading My first paragraph. 선언은 HTML5가 될이 문서를 정의 요소는 HTML 페이지의 루트 요소이고 로 시작해서 로 끝납니다. 요소는 문서에 대한 메타 정보를 포함 요.. 2020. 2. 7.