뉴비코더
나는 코딩뉴비
뉴비코더
전체 방문자
오늘
어제
  • 분류 전체보기 (91)
    • 개발입문뉴비 - 국비지원 ( Front End ) (91)
      • html (26)
      • css (58)
      • javascript (6)
      • Library React.js (0)
    • FrontEnd ( Self-study ) (0)
      • html5, CSS3 (0)
      • Vanilla JS (0)
      • Clone Code (0)
    • BackEnd ( self-study ) (0)
      • Library Node.js (0)
      • Python (0)
      • Go (0)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • css3
  • 국비지원
  • UL
  • js 이벤트객체
  • 가상클래스
  • HTML5
  • 웹개발입문
  • js event object
  • 클론코딩
  • position
  • 코딩진화
  • psuedo-class
  • parseInt
  • Transition
  • boxmodeling
  • 프론트엔드
  • 마크업
  • HTML
  • webfont
  • boxmodel
  • 하이퍼링크
  • ol
  • Javascript 배열
  • js 생성 함수
  • padding
  • Margin
  • js event
  • JavaScript
  • 웹개발
  • transform

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
뉴비코더

나는 코딩뉴비

[2021/12/07] 국비지원-HTML5 코딩툴 기본학습 -1-(1)
개발입문뉴비 - 국비지원 ( Front End )/html

[2021/12/07] 국비지원-HTML5 코딩툴 기본학습 -1-(1)

2021. 12. 14. 00:56

사용 툴 : VSCode

마켓툴in툴 : HTML Snippets, Image Preview, Indenticator, Korean language

브라우저 관련 마켓툴 : MS edge

강사 추천 마켓툴 : X

강사 추천 브라우저 : google chrome

​

방금 정한 개인적인 사용법 : 기본브라우저 = edge / 코딩 브라우저 = chrome

 


 

알던 것

<head>

</head>

<body>

<br>

<h1~6></h1~6>

<embed> - 이 과정에선 안 배움

</body>

​

까먹었던 것

<hr>

<strong></strong>

​

아예 처음 안 것

br/

hr/

---- 위 2형제는 HTML5에서는 br과 br/, hr과 hr/ 차이 없긴 함----

<em></em>

<q>

<p>

<blockquote>

<address>

ctrl + / = <!-- 주석 -->

​


 

이하 수업 중 학습한 내용

​

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewfort" content="width=device-width, initial-scale=1.0">
    <title>html 기본 문서 구조</title>
</head>
<body>
    <!-- 주석 -->
    <!-- //주석 -->
    <!--   
        tag 태그 : 명령어 h1  
        Element 엘리먼트 요소 : <h1></h1> <시작></종료>
    -->
    <!--
        블록레벨요소: h1~h6, hr, p, blockquote, address, 
        인라인 요소: q, strong, em
    -->
    <!-- 
        1.인라인 요소는 블록레벨요소 안에 넣어서 사용해야 한다.
        2.블록레벨요소 안에는 또 다른 블록레벨요소를 넣어서 사용할 수 있다. 
        3.단, 예외 h1~h6, p, address는 또 다른 블록레벨요소를 넣어서 사용할 수 없다. 
    -->
    <h1>Heading H1 큰 제목</h1>
    <h2>Heading H2 제목</h2>
    <h3>Heading H3 제목</h3>
    <h4>Heading H4 제목</h4>
    <h5>Heading H5 제목</h5>
    <h6>Heading H6 제목</h6>
    <hr />
     <!-- hr 구분선 -->
    <h1>웹 접근성 연구소</h1>
    <h2>웹 접근성이란</h2>
    <h2>웹 접근성 개요</h2>
    <h3>웹 접근성이란?</h3>
    <h3>웹 접근성 및 정보통신 접근성에 대한 주요 정의</h3>
    <hr>
    <h1>웹 접근성 연구소</h1>
    <h2>지식마당</h2>
    <h2>개발자아카이브</h2>
    <h2>한국형 웹 콘텐츠 접근성 지침 2.1</h2>
    <h3>한국형 웹 콘텐츠 접근성 지침 2.1</h3>
    <hr> 
    <!-- p 문단, br 줄바꿈, &nbsp; 띄어쓰기, q 인용구, strong 강한 강조, em 약한 강조 -->
    <p>장애에&nbsp;구애&nbsp;없이&nbsp;모든&nbsp;사람들이<br/>
        손쉽게 정보를 공유할 수 있는<br/>
        인터넷 공간 만들기</p>
    <p>월드 와이드 웹 (World Wide Web)을 창시한 <strong>팀 버너스 리(Tim Berners-Lee)</strong>는 웹이란<br/>
        <q>장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간</q>>이라고 정의하였으며,<br/>
        웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야<br/>
        한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고,<br/>
        웹&nbsp;접근성을&nbsp;바라보는&nbsp;입장에&nbsp;따라&nbsp;다르게&nbsp;정의하고&nbsp;있다.</p>
    <p>하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.</p>
    <p><strong>월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium) 웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크</strong>와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 <strong>Wikipedia</strong> 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.</p>    
    <!-- blockquote 인용문 -->
    <blockquote><p>웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다
        <br/><br/>
        (The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
        <br/><br/>
        <em>팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)</em></p></blockquote>
    <hr>    
    <!-- address 사이트 정보, 주소, 연락처 -->
    <address>대구광역시 동구 첨단로 53 (41068) 한국지능정보사회진흥원 디지털포용본부 ☎ 053-230-1388</address>
    <p>Copyright ⓒ 2017 National Information Society Agency</p>
    <!-- > = &gt;, < = &lt;, & = &amp;-->
    <p>HOME &gt; 웹 접근성이란 &gt; 웹 접근성 개요</p>
    <p>HOME &lt; 웹 접근성이란 &lt; 웹 접근성 개요</p>
    <p>HOME HOME &amp; 웹 접근성이란 &amp; 웹 접근성 개요</p>
</body>
</html>

​

​

​

수업 중에 막 따라 작성할 땐 몰랐는데 ... 어... 더럽긴 더럽네

 

 

 


N사 내 블로그에서 가져 옴.

12.12일 몰아서 작성한 7~10일 간 4일의 기록 중 첫 날인 7일내용

살짝 수정.

    '개발입문뉴비 - 국비지원 ( Front End )/html' 카테고리의 다른 글
    • [2021/12/08] 국비지원-HTML5 코딩툴 기본학습 -2-(4) ul -1
    • [2021/12/08] 국비지원-HTML5 코딩툴 기본학습 -2-(3) ol
    • [2021/12/08] 국비지원-HTML5 코딩툴 기본학습 -2-(2) a 링크
    • [2021/12/08] 국비지원-HTML5 코딩툴 기본학습 -2-(1) img
    뉴비코더
    뉴비코더
    FrontEnd 지망 - 코딩뉴비를 위한(?), 뉴비에 의한, 뉴비의 블로그 - 코딩뉴비의 코딩 학습 기록 - 첨가물 : 약간의 불평/사족

    티스토리툴바