ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML] 개요
      생활코딩/WEBn 2020. 8. 20. 18:31

      [강의 출처] opentutorials.org/course/3084

       

      WEB1 - HTML & Internet - 생활코딩

      --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여�

      opentutorials.org

      HTML

      • Hyper Text Mark-up Language

      • 웹페이지를 만드는 컴퓨터 언어

      • 퍼블릭 도메인(Public Domain: 저작권이 없음)

      • 웹브라우저에서 파일 열기를 통해 내 컴퓨터 로컬에 있는 html 파일을 열 수 있음

       

      TAG

      • Tag가 감싸는 텍스트의 정보(구조나 형태)를 표현하기 위한 문법적인 표시

        • 태그를 가리키는 기호인 <>는 HTML상에서 &lt;(less than), &gt;(greater than)으로 표기함

      • 감싸는 텍스트가 없는 경우 닫을 필요 없음 (ex br, img, input, hr, meta)

      • 좋은 태그: 웹페이지를 정보로서 보다 가치 있게 해주는 태그 (ex 단락을 구분하는 경우 p > br)

      • 유의미하게 작성된 태그는 검색 최적화나 정보 청각화 등의 여러 경우에서 정보 접근성을 강화함

      • 태그는 의미나 상관관계에 따라 부모/자식 태그로 작성하기도 함 (ex <ul> <li></li> </ul> )

       

      Attribute

      • 태그만으로 정보가 부족할 때, 시작태그에 추가해서 사용
      • <태그 속성="값">content</태그>

       

      (사용 빈도에 따른) 태그 예시

       

       

      <tag> 정의 특징 예제
      html html문서의 기본 요소 -head, body 요소를 포함
      -<!doctype html>를 문서에 시작에 추가하여 이 문서가 html 문서임을 명시      		 <!doctype html>
      <html>
          <head>
              여기가 head
          </head>
          <body>
              여기가 body
          </body>
      </html>
      head 문서에 사용되는 메타데이터의 집합
      (body를 설명하는 정보들)      		 <meta charset="utf-8">
      <title>타이틀</title>
       <script>~</script> 등등
      body 문서의 메인 컨텐츠 -올바른 문서라면 하나의 body만 존재
      title 문서의 제목으로, 브라우저의 타이틀 바에 표시됨 *중요* -head 요소 / 반드시 1번만 지정
      -문맥 독립적으로 표현되어야 함      		 <title>HTML 태그 예시 테이블</title>
      meta title, base, link, style, script 외의 나머지 메타데이터들 name(메타데이터 설정)
      or http-equiv(전처리구문 지시)
      or charset(문자 인코딩 방식 명시)      		 <meta charset="utf-8">
      div 문서의 영역 지시(Division),
      사각박스형 레이아웃 지정      		 -영역을 나누고 id or class 등으로 식별자를 지정. css 효과를 주기도 함.
      -별다른 정보를 주지 않기 때문에 후순위 사용 권장      		 <div class="example">
      a 링크 설정 href: 링크 주소 지정 <a href="https://www.apple.com/kr">Apple</a>
      script 웹페이지에 (주로 javascript) 코드를 삽입할 때 사용 -script 태그 내에 코드를 작성하거나

      -외부 파일로 분리      		 <script type="text/javascript">
          var hw = document.getElementById('hw');
          hw.addEventListener('click', function(){
          alert('Hello world');
          })
      </script>

      <script type="text/javascript" src="외부파일로_분리하는_방법.js"></script>
      link 다른 리소스와 연결 -css 같은 스타일시트나, 웹 폰트 등  
      img 이미지 삽입 -로컬이나 웹상의 이미지를 가져옴
      -닫는 태그 없음      		 <img src="이미지.jpg" width="100" height="100">
      span div와 유사하나, 문장 단위(inline)로 구역을 지정 -class, lang, dir 등과 함께 사용 <span style="color:blue;">Facebook</span>
      p 문단 표시 -텍스트를 단락으로 정의
      -'단락'이라는 정보를 주기 때문에, 단락 구분시에 <br>보다 가치 있음      		 <p>단락시작
      단락끝</p>
      li 목록 아이템 -ol(ordered list) or
      -ul(unordered list)와 함께 사용

      -ol에 붙은 경우 순번을 지정함      		 <ul>
          <li>첫번째</li>
          <li>두번째</li>
      </ul>
      ul 목록을 표시 -li 태그들의 목록이 따라옴
      style 스타일 정보를 문서에 포함시킴 media: 스타일 적용 매체 default "all"
      type: 스타일 언어, default "text/css"
      head 태그 안에 들어감      		 <style>
          body { color: black; background: white; }
      </style>
      br 줄바꿈 -닫는 태그 없음 줄바꾸기<br>
      <br>
      h1 섹션의 제목 지정 -h1 > h2 > h3 순으로 크기가 큼
      -중요도에 따라 볼드/크기 옵션이 다름
      -헤딩을 잘 이용하면 검색에 잘 나옴      		 <h1>대주제</h1>
          <h2>중주제</h2>
              <h3>소주제</h3>
      h2
      input form 안에 기본적인 컨트롤을 생성 -type: text, password, checkbox 등
      -name: 컨트롤 이름 지정      		 <form action="/owner/admin.php" method="post">
          <input text="TEXT"></input>
      </form>
      form 상호작용을 위한 form 생성 속성: action, method, name
      nav (연관 있는) 다른 페이지들로 이동하기 위한 내비게이션 링크 제공 메뉴, 목차, 색인 등 <nav class="menu">
          <ul>
              <li><a href="#">Home</li>
              <li>Contact</li>
          </ul>
      </nav>
      header 웹페이지 소개 및 탐색에 도움을 주는 콘텐츠 제목, 로고, 검색 폼, 작성자 이름 등 <header class="page-header">
      </header>
      footer 특정 섹션의 메타 정보를 포함 해당 섹션의 작성자 정보, 저작권 정보, 관련 문서 링크 등 <footer>
          <p>Copyright 2020</p>
      </footer>
      iframe 다른 문서를 프레임 모양으로 포함시킴 -src 속성에 불러올 문서 주소를 지정 <iframe src="1.html"></iframe>
      strong 해당 내용이 중요함을 표시 -여러 개 중첩해서 사용가능
      -브라우저 상에선 bold로 표시됨      		 제일 <strong>중요</strong>한 부분
      button 버튼 생성 -데이터를 전송하거나
      -다른 링크로 연결하거나
      -그냥 장식의 용도로 쓰거나      		 <button oncliech="location.href='2.html'">Next Page</button>
      i 텍스트를 이탤릭체로 표시   <i>italic</i>

       

       

      '생활코딩 > WEBn' 카테고리의 다른 글

      [CSS] 레이아웃: Box Model, Grid  (0) 2020.08.25
      [CSS] Selector: class, id  (0) 2020.08.24
      [CSS] 정의, Selector, Declaration, Property, Value  (0) 2020.08.24
      [Internet] Mac 내장 Apache로 웹서버 운영하기  (4) 2020.08.21
      [Internet] 개요  (0) 2020.08.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바