HTML5, CSS3/HTML5, CSS3

23-02-13 html5, css3

모건이삼촌 2023. 2. 13. 13:59

* HSL : 색상, 채도, 명도

   RGB : 

※ 웹표준

 1. 뷰포트 

  - 

 

 2. 크로스 브라우징

  - 동일한 페이지 구현이 가능하도록 하는 기술과 방법등을 크로스브라우징 이라고 한다.

  - 멀티브라우저에 적용되는 기술

 

 3. 웹 접근성

1) 개요

장애인도 비장애인과 동등한 경험을 하게 하는것

 

2) 웹 접근성 준수 고려사항

 - 시각

  시각장애인 대상 (실명, 색각이상, 다양한형태의 저시력을 포함한 시각장애)

  -  이동성

    근육제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태 (키보드를 통한 UI이동 예)TAB키)

 - 청각

  영상이나 음성컨텐츠에 자막 추가

 - 인지

  문제해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 발달 장애, 학습장애(난독증, 난산증 등)

 - 웹 브라우징에 쓰이는 보조과학기술

  스크린리더 소프트웨어, 화면 확대 도구, 음성 인식, 키보드 오버레이 등이 있다.

 

 * 접근성을 지키지 않았을 때 패널티

 1. 심의에 통과할 수 없음

 2. 벌금

 

4. XML

 4-1) 개요

  - 다목적 마크업언어 

  - XML은 주로 다른시스템, 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을수 있게 하여 HTML의 한계를 극복할 목적으로 만들어짐

  - Javascript&jQuery AJAX기술에 많이 사용되고 있음

 

 * 비동기통신

 

 5. 서버 사이드 스크립트 언어 (PHP, JSP, ASP)

   5-1) JSP (가장 수요가 높음)

    - Oracle사의 Java base, DB는 MYSQL, Oracle 등 사용

   5-2) PHP

    - 객체지향 베이스가 아닌 함수기반, 대표적으로 블로깅도구 워드프레스, 미디어위키등이 있고, 국내에서는 그누보드 등이 있다. DB는 MYSQL을 사용한다.

    - 단점 : 경력인정이 힘듬

   5-3) ASP

    - 비주얼베이직 기반, MS사에서 서비스하는 프로그래밍 언어이고 DB는 MSSQL을 사용

   5-4) DB

     - 사실상 위 스크립트 언어에 어떠한 DB를 사용하던 상관은 없지만 가장 잘 어울리는 DB를 사용하는게 좋다.

 

* LAMP

 

 

경로설정

java에서 작업한 workspace 폴더를 workspaces로 변경

workspaces폴더 안에 workspace-ui 폴더 생성

아래 사진 폴더열기 클릭

workspace-ui 폴더 선택

* 폰트설정

 

* 현재 설정상태 (우측하단)

 

* 플러그인

Auto계열 설치 안해도됨

Live Server 설치

alt+L+O 누르면 라이브서버에서 

 

※hello world 출력

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

1. Live Server로 출력

위 코드 입력 후 라이브서버 on 상태에서

Ctrl + L, Ctrl + O 입력하면  

가 출력된다.

 

2. open in browser

1의 코드 입력 후 Art + b 입력하면

가 출력됨

open in browser는 서버를 거치지 않고 파일 경로를 통해 출력해준다??

 

※ VS Code 젠 코딩 (좀 더 코드에 익숙해지면 사용)

1. 젠코딩 문법

 1) 반복생성

  - div * 5 [엔터]

 

※ 로렘입숨(Lorem ipsum)

  - 레이아웃에 대한 확인목적

한글 로렘입숨 사이트

http://guny.kr/stuff/klorem/

 

한글 Lorem Ipsum (간세네)

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종

guny.kr

※엔티티코드

 1. 개요

  - 키보드로 입력할 수 없는 특수문자를 사용하도록 만들어진 특수문자 코드

 

※ 웹 표준검사 & W3C Validator

 1. 개요

  - 

웹 표준검사 사이트

https://validator.w3.org/#validate_by_input

 

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

※ HTML5 프레임워크 기본 구조

1. 기본구조

 

 

2. 구조 알아보기

1). <!DOCTYPE html>

  - html5 정의문, 선언문이라고도 불림

 

 

2) <html lang="en"..</html>

  - html태그 열기, 최고조상 태그(Root)

  - 언어속성 lang

  - 언어속성값 "en" 웹 문서 내용이 한글문서이면 "ko"사용 (en 영국기준영어, en_us미국기준)

 * 인용부호는 자동으로 겹따옴표로 표기되는데 홑따옴표도 상관없음

 

 3)  <head> ... <head>

  - 이 문서에 대한 메타데이터 기록

  - 메타데이터 : 머릿말(뷰포트, 

  - 

 

 4) <meta charset="UTF-8"> 문자셋(charset)문자 정보

  - 닫는 태그가 없음

  - 메타태그로 상단 해드태그 내에 한글 인코딩 표기

 

※ 웹 문서 객체 모델링

 1. 모델링

p.55 모델링 삽입 필요

 

 2. DOM이란

  1) 개요

     - 웹페이지가 로드될 때 브라우저가 생성한 DOM은 문서 객체모델의 트리 객체

     - DOM은 W3C 표준

 

2) 돔 레벨

 

 

3) 파싱트리

  - DOM요소와 속성노드의 트리로서 출력 DOM트리가 딘다.

    HTML문서의 객체 표현이고 자바스크립트와 같은 이부를 향하는 HTML요소의 연결지점

    트리의 최상위 객체는 DOCUMENT이다.

 

 

 4) 최상위 계층 DOCUMENT

  - DOCUMENT : 웹 문서 최상위 계층

  - HTML - root

  - head

  - body

※ 인라인(수평배치) 요소의 개념

* 디스플레이 기본요소 

  - 인라인(수평배치), 블럭(수직배치), 없음, ????

 

 1. 개요

  - 줄바꿈이 없는 요소들로서 텍스트를 감싸면 텍스트 내용이 줄 바꿈이 발생하지 않아 한줄로 표시되는 태그들이다.

 1-1) 인라인요소의 특성

  - 줄바꿈 없이 한줄로 표시되는 요소

  - text-align으로 좌, 우측, 가운데 정렬을 할 수 잇음

  - 인라인 요소는 너비 width 속성, 높이 height가 적용되지 않음

  - line-height로 줄 높이를 적용할 수 있음, 그러나 요소의 높이에는 적용되지 않음

  - 인라인 요소는 스타일속성 display:block(블록 요소) 또는 display:inline-block으로 변경할 수 있음

 

 2. 박스모델과 인라인 요소 & 블록 요소 

  

 

※ 태그

 1) a 태그

  - 하이퍼링크 정의

  - Anchor 약어

  - href 속성은 Hypertext Reference 약어이며 링크의 목적지 속성

  - href 속성값은 http://웹주소, 파일명, 전화번호, 메일주소, #아이디 등을 사용

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <p>
    <a href="http://www.tjoeun.co.kr" title="TJ">더조은</a>
  </p>
  
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <p>
    <a href="http://www.tjoeun.co.kr" title="TJ">더조은</a>
    <a href="http://www.tjoeun.co.kr" title="더조은 레스토랑">
      <img src="../img/restaurant-img4.jpg" alt="tj" width="200">
    </a>
  </p>
  
</body>
</html>

 

 

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

23-02-17 CSS3  (0) 2023.02.17
23-02-16 HTML5  (0) 2023.02.16
23-02-15 HTML5  (0) 2023.02.15
23-02-14 HTML5, CSS3  (0) 2023.02.14
23-02-10 html5, css3 (설치, 웹표준)  (0) 2023.02.10

'HTML5, CSS3/HTML5, CSS3'의 다른글

  • 현재글23-02-13 html5, css3

관련글

댓글

티스토리툴바