반응형

1) SEO(Search Engine Optimization)란?

-웹 사이트가 검색 엔진에게 노출되게 최적화하는 작업.

 

2) HTML 마크업

- robot.txt

<head>
<meta name="robots" content="명령어">
</head>

- 오픈그래프

<head>
<meta property="og:type" content="website"> 
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/myimage.jpg">
<meta property="og:url" content="http://www.mysite.com">
</head>

- 파비콘

 

3) SEO 최적화 사이트

 

Google Search Console (https://search.google.com/search-console)

반응형

'HTML5' 카테고리의 다른 글

11. 접근성  (0) 2023.07.21
10. 양식 유효성 검사  (0) 2023.07.21
09 시멘틱 태그  (0) 2023.07.20
08. 파비콘  (0) 2023.07.20
07-3. 양식 태그  (0) 2023.07.20
반응형

1) 접근성(Accessibility)이란?

 

- 웹, 앱을 사용하는 모든 사람들이 쉽게, 차별없이 동등하게 웹 콘텐츠에 접근할 수 있도록 하는 원칙.

 

  • 시각 장애가 있는 사용자 : 스크린 리더 또는 점자 출력 장치를 통해 콘텐츠에 접근합니다. (alt, title)
  • 청각 장애가 있는 사용자 : 자막, 수화를 통해 웹 콘텐츠에 접근합니다.
  • 운동 장애가 있는 사용자 : 키보드, 보조 기기를 사용하여 웹 콘텐츠에 접근합니다.
  • 인지적인 제약이 있는 사용자 : 사용자가 이해하기 쉬운 웹 콘텐츠 제작이 필요합니다.

2) 웹 접근성 검사 도구/ 사이트

 

WAVE Web Accessibility Evalution Tool 

https://wave.webaim.org/

 

WAVE Web Accessibility Evaluation Tools

WAVE Browser Extensions You can use the online WAVE tool by entering a web page address (URL) in the field above. WAVE Chrome, Firefox, and Edge browser extensions are available for testing accessibility directly within your web browser - handy for checkin

wave.webaim.org

 

Axe

https://www.deque.com/axe/

 

Lighthose : google chrome 개발자 도구 내장

 

반응형

'HTML5' 카테고리의 다른 글

11. SEO  (0) 2023.07.21
10. 양식 유효성 검사  (0) 2023.07.21
09 시멘틱 태그  (0) 2023.07.20
08. 파비콘  (0) 2023.07.20
07-3. 양식 태그  (0) 2023.07.20
반응형

1) 양식 유효성 검사(form Validation Check)란?

 

- 웹페이지에 제출되는 양식의 데이터가 유효한지 검사하는 과정.

 

  • 클라이언트 측 유효성 검사 :웹 브라우저에서 사용자가 양식을 작성하는 동안 실시간으로 유효성을 검사하는 것.
더보기

예시)

  • "올바른 이메일 주소를 입력해주세요"
  • "이 필드는 필수입니다"
  • "이름을 입력해주세요"
  • 서버 측 유효성 검사 : 데이터가 서버로 전송된 후 서버에서 유효성을 검사하는 것.

2) 유효성 검사 도구

 

W3C Markup Validation Service : HTML, XHTML 문서 유효성 검사 도구

- https://validator.w3.org 

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

 

W3C CSS Validation Service : CSS 문서 유효성 검사 도구

- https://jigsaw.w3.org/css-validator/

 

W3C CSS 검사 서비스

파일 업로드를 통한 검사 직접 입력을 통한 검사

jigsaw.w3.org

 

JSHint : Javascript 코드의 구문 오류, 잠재적인 문제를 확인하는 온라인 검사 도구

- https://jshint.com/

 

JSHint, a JavaScript Code Quality Tool

Report Cyclomatic complexity Unused variables Undefined variables Warn About == null About debugging code About unsafe for..in About arguments.caller and .callee About assignments if/for/... About functions inside loops About eval About unsafe line breaks

jshint.com

 

Nu HTML Checker : 구글에서 개발한 HTML5 문서 유효성 검사 도구

- https://validator.github.io/validator/

 

The Nu Html Checker (v.Nu)

To run the checker inside of an existing servlet container such as Apache Tomcat you will need to deploy the vnu.war file to that server following its documentation. For example, on Apache Tomcat you could do this using the Manager application or simply by

validator.github.io

 

반응형

'HTML5' 카테고리의 다른 글

11. SEO  (0) 2023.07.21
11. 접근성  (0) 2023.07.21
09 시멘틱 태그  (0) 2023.07.20
08. 파비콘  (0) 2023.07.20
07-3. 양식 태그  (0) 2023.07.20
반응형

1) 시멘틱(Sysmentic) 웹이란?

 

- W3C(World Wide Web Consortium)에 의해 제안된 개념으로, 자연어(인간이 사용하는 언어)와 웹 상의 소프트웨어가 상호작용될 수 있도록 하는 기술과 방법이다.

 

2) Sysmentic 구조

  • header : 문서의 상단 영역으로 h1, nav, search form 등이 들어간다.

  • nav : navigation의 약자. 메뉴영역을 만들 때 사용하며, GNB 또는 LNB를 제작한다.
    GNB : Global Navigation Bar의 약자. 전역 네이게이션바로 웹 사이트의 주요 섹션, 카테고리를 포함하고 있다.
    LNB : Local Navigation Bar의 약자. 특정 페이지에서만 보여지는 지역 네비게이션바로 해당 섹션 안에서 다른 콘텐츠로 이동하는 역할이다.

  • main : body tag에 한번만 사용 가능하며, 콘텐츠들의 묶음이다. section, article, aside 태그를 포함하고있다.

  • section : 여러 콘텐츠 영역을 묶을 때 사용한다. section tag 사용시 필수로 제목태그(h2~h6)가 들어가야한다.

  • article : 독립적인 영억을 만들 때 사용한다. article tag 사용시 필수로 제목태그(h2~h6)가 들어가야한다.

  • aside : 주로 한쪽에 고정되어 위치되어있는 콘텐츠를 만들 때 사용된다.

  • footer : 문서의 하단 영역으로 copyright, 회사정보 등이 들어간다.

  • details : 콘텐츠 섹션을 표시하는데 사용된다..

  • summary : 접을 수 있는 콘텐츠 영역의 제목을 표시하는데 사용된다.

  • figure : 콘텐츠 자체를 마크업하는데 사용된다.

  • figcaption : 콘텐츠의 캡션, 설명을 마크업하는데 사용된다.

  • time : 날짜 또는 시간을 표시한다. 

  • progress : 진행률 표시줄을 표시할 때 사용된다.
반응형

'HTML5' 카테고리의 다른 글

11. 접근성  (0) 2023.07.21
10. 양식 유효성 검사  (0) 2023.07.21
08. 파비콘  (0) 2023.07.20
07-3. 양식 태그  (0) 2023.07.20
07-2. 양식태그  (0) 2023.07.20
반응형

1) 파비콘(favicon)이란?

 

- Favorites icon의 약자.
  웹사이트의 아이콘을 뜻한다.

  일반적으로 16x16px 크기의 작은 정사각형 이미지를 사용한다.

 

1) 파비콘 삽입 방법

 

My Page Title

 

 

 

반응형

'HTML5' 카테고리의 다른 글

10. 양식 유효성 검사  (0) 2023.07.21
09 시멘틱 태그  (0) 2023.07.20
07-3. 양식 태그  (0) 2023.07.20
07-2. 양식태그  (0) 2023.07.20
07. 양식 태그  (0) 2023.07.20
반응형
16_추가Form속성

1. required - form 양식 중 반드시 입력해야하는 양식에 적용하며, 필수 입력이라고도 한다.

추가 Form 속성

2. placeholder : 각 field 항목에 대한 입력 형식 흰트를 제공해주는 속성이다.

Search Form

3. autofocus : page가 loading되었을 때 Focus가 설정된 항목에 커서가 위치하도록 한다. 주로 Web Site의 자주 사용하는 Contens에 초점을 맞추는 경우가 많은데 검색 Site ( naver, google, daum )의 경우는 검색창에 초점을 맞춘다.

Search Form

4. disabled , readonly : 서식을 사용 불가능하게 하는 속성 ( disabled ), 선택하지 않고 읽기만 가능한 속성( readonly )

반응형

'HTML5' 카테고리의 다른 글

09 시멘틱 태그  (0) 2023.07.20
08. 파비콘  (0) 2023.07.20
07-2. 양식태그  (0) 2023.07.20
07. 양식 태그  (0) 2023.07.20
06) 멀티미디어 태그  (0) 2023.07.20
반응형
html5 추가 FormTag와 속성

1. Form 양식 그룹을 지정하기 위한 요소 - fieldset, legend

필수 입력 정보
선택 입력 정보

placeholder 속성 : 사용자가 입력할 내용을 미리 알려주어 오류가 나지 않도록 방지해줌. Web 접근성 측면에서 도움이 많이 된다.

2. search : 사용자가 입력양식에 키워드를 입력하여 검색할 수 있도록 하고자 할 때 사용하는 양식으로서 단어를 입력하면 오른쪽 끝에 'X' 표시가 뜨며 Click 할시 내용이 삭제되는 양식

3. email : email 주소를 입력하기 위한 박스로서 입력양식이 맞지 않을 경우 에러가 난다.

4. url : 사용자가 도메인 주소를 입력할 수 있도록 하는 양식이며, 주소 형식이 맞지 않을 경우 에러 메세지가 나온다.

5. tel : 전화번호를 입력하기 위한 양식(mobile)

6. number : 숫자를 입력하기 위한 박스로 직접 입력하거나 화살표로 설정이 가능하다.

개

7. range : 숫자 범위를 슬라이드 바로 조정

8. date : 년, 월, 일을 선택하기 위한 요소로서 Click 할시 달력창이 활성화된다.

9. datetime : 연, 월, 일, 시, 분까지 선택하기 위한 요소로서 html5에서 없어졌다가 5.1부터 다시 사용된다.

종료 날짜 :

10. month : 연과 월만 선택하는 요소이다.

11. week : 연도와 주를 선택하는 요소이다.

12. time : 시, 분을 선택하는 요소이다.

13. color : 색상을 선택하기 위한 요소이다.

14. progress : 진행 정도를 나타내는 바를 만드는 태그로서 max, value 속성을 사용한다.

통화하기 SMS 문자 보내기
반응형

'HTML5' 카테고리의 다른 글

08. 파비콘  (0) 2023.07.20
07-3. 양식 태그  (0) 2023.07.20
07. 양식 태그  (0) 2023.07.20
06) 멀티미디어 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
반응형

1) form tag란?


- 사용자가 입력한 정보를 서버로 전송하는 역할을 한다.

 

2) 폼그룹 지정, 폼제목 설정

 <fieldset>
        <legend>양식Groub의 제목</legend>
        <p></p>
  </fieldset>

fieldset : form을 영역별로 구분하기 위한 테두리.

legend : fieldset으로 지정된 영역의 제목 설정

 

3) form tag 종류

14_Form_Tag

1. text box : 한글, 영문자를 입력하고자 할 때 사용되는 양식이며, 양식 Tag 중 가장 많이 사용되는 Tag이다.

2. password box : password, 주민번호, 인증번호 등 보안을 요구하는 내용을 입력하고자 할 때 사용하는 양식이며, 글자가 보이지 않도록 '기호'로 대체되어 표시된다.

3. radio button : 다수의 항목 중 하나를 선택하는 양식으로, 하나를 선택하기 위해서는 name 속성을 사용해야 한다.

radio button을 click할때만 선택이 가능하지만, click을 용이하게 사용하기 위해 접근성을 높일 필요가 있다. lable tag에 for 속성을 사용하고 input tag에 id="name"으로 연결해주는게 그 방법이다. 주로 모바일 화면에서 버튼을 편하게 선택하기 위해 사용된다.

4. check box : 여러 항목 중 사용자가 원하는 항목만 선택 가능하다.

나의 취미 :

5. 선택 목록 : Shopping mall obtion 선택, 전화번호 입력, 통신사 선택, 예매 목록, 인원 수, 언어 설정, family site 등의 양식을 만들고자 할 때 사용하는 양식이다.

6. 다중 Text box : 한줄 입력이 아닌 여러줄의 내용을 입력하고자 할 때 사용한다. 한줄 평, 댓글, Mail, 글 작성, 문의하기 등에 사용된다.

7. file 첨부 : 게시판이나 E-Mail 양식에서 상대방에게 File을 전송하기 위한 양식이다.

8. button : 전송하기, 취소하기, GeneralButton, ImageButton

반응형

'HTML5' 카테고리의 다른 글

07-3. 양식 태그  (0) 2023.07.20
07-2. 양식태그  (0) 2023.07.20
06) 멀티미디어 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
04. 하이퍼링크 태그  (0) 2023.07.20

+ Recent posts

티스토리툴바