ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML]HTML 1
      웹 2016. 10. 30. 16:54
      반응형

      HTML 예제


      <!DOCTYPE html>
      <html>
      <head>
      <title>Page Title</title>
      </head>
      <body>

      <h1>My First Heading</h1>
      <p>My first paragraph.</p>

      </body>
      </html>


      <p>

      <h1> ~ <h6>

      <a> : 링크를 걸때 사용한다.

      ex) <a href = "링크를 걸 주소"> text </a>

      <img> : 이미지를 정의할 때 사용한다.

      ex) <img src = "이미지의 경로나 주소" alt = "이미지를 대체할 텍스트" width = "너비" height = "높이">


      * 이미지는 태그를 닫지 않아도 되는 듯

      HTML tags are not case sensitive HTML은 대소문자 구별이 엄격하지 않다. 소문자 사용가능 


      Attribute


      HTML요소들은 attribute를 가진다.

      ex) <HTML lang = "en-kr">

      <p title= "툴팁에 표시될 텍스트">


      <img src = "~" width = "~" height = "~">
      : width와 height는 pixel 단위이다.

      대소문자 구별이 엄격하지 않지만 attribute는 소문자로 표시할것은 추천한다.
      XHTML은 HTML보다 엄격하기 대소문자 구별에 엄격하기 때문

      작은 따옴표, 큰 따옴표 모두 사용가능 심지어 안써도 가능

      자주 사용되는 속성들

      1. alt
      2. disabled
      3. href
      4. id - element의 unique한 아이디 부여
      5. src
      6. style - 
      Specifies an inline CSS style for an element
      7. title - Specifies extra information about an element (displayed as a tool tip)


      모든 attribute 목록을 알고 싶다면

      http://www.w3schools.com/tags/ref_attributes.asp


      HTML heading


      <h1> ~ <h6>


      heading은 검색엔진들이 웹 페이지의 내용의 구조를 인덱스하는데 사용하기 때문에 중요해요

      Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.


      HTML Horizontal rules


      <hr> 가로로 선을 그어줍니당


      <head>에는 주로 메타데이터, 문서제목, 캐릭터셋, 스타일, 링크, 스크립트 등이 들어갑니다


      <br> : line breaker. 엔터랑 같은 효과


      <pre> preformatted text.

      <pre>태그 안의 텍스트들의 고정폭 글꼴로 그대로 표시됨 엔터키 같은것도 


      <style> attribute

      <tagname style="property:value;">

      property is a CSS property, The value is a CSS value.


      ex) <body style="background-color:powderblue;">

      배경색


      ex) <h1 style="color:blue;">This is a heading</h1>

      <p style="color:red;">This is a paragraph.</p>

      글자색


      <h1 style="font-family:verdana;">This is a heading</h1>
      <p style="font-family:courier;">This is a paragraph.</p>

      폰트

      <h1 style="font-size:300%;">This is a heading</h1>
      <p style="font-size:160%;">This is a paragraph.</p>

      글자크기

      <h1 style="text-align:center;">Centered Heading</h1>
      <p style="text-align:center;">Centered paragraph.</p>

      문자정렬


      • <b> - Bold text
      • <strong> - Important text
      • <i> - Italic text
      • <em> - Emphasized text
      • <mark> - Marked text
      • <small> - Small text
      • <del> - Deleted text
      • <ins> - Inserted text
      • <sub> - Subscript text
      • <sup> - Superscript text

      그리고 잘 닫아줘야 합니다

      <q> for Short Quotations

      <blockquote> </bockquote>

      <blockquote cite="인용한곳 주소">


      <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

      축약형


      <address>주소 글자체로 바뀜

      <cite> 인용체로 바뀜

      <bdo dir="rtl"></bdo>


      <bdo dir="rtl">This text will be written from right to left</bdo>

      텍스트 거꾸로 출력해줌


      <code>Defines programming code
      <kbd>Defines keyboard input 
      <samp>Defines computer output
      <var>Defines a variable
      <pre>Defines preformatted text


      HTML 주석


      <!-- 주석내용 -->


      COLOR


      <h2 style = "background-color:rgb(255,0,0)"></h2>

      이런식이나 

      rgb()자리에 바로 red, yellow, blue 가능 혹은 #FFFFFF같은 16진수 색상코드가능

      rgba(255,255,255,0~1) 0~1은 투명도


      <style>Defines style information for an HTML document
      <link>Defines a link between a document and an external resource


      id

      <p id="p01"> dfdf</p>

      #p01 {
          color: blue;
      }

      Class Attribute

      <p class="error">I am different</p>

      p.error {
          color: red;
      }

      HTML Links - The target Attribute

      The target attribute specifies where to open the linked document.

      The target attribute can have one of the following values:

      • _blank - Opens the linked document in a new window or tab
      • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
      • _parent - Opens the linked document in the parent frame
      • _top - Opens the linked document in the full body of the window
      • framename - Opens the linked document in a named frame


      /* unvisited link */
      a:link {
          color: green;
      }

      /* visited link */
      a:visited {
          color: green;
      }

      /* mouse over link */
      a:hover {
          color: red;
      }

      /* selected link */
      a:active {
          color: yellow;
      }

      • Use the <a> element to define a link
      • Use the href attribute to define the link address
      • Use the target attribute to define where to open the linked document
      • Use the <img> element (inside <a>) to use an image as a link
      • Use the id attribute (id="value") to define bookmarks in a page
      • Use the href attribute (href="#value") to link to the bookmark



      table

      http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id2


      Unordered List

      <ul>

      ex) 

      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>


      CSS list-style-type 

      disc
      circle
      square
      none

      <ul style="list-style-type:disc">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>

      이런식으로 

      Ordered List

      <ol>

      ordered는 unordered와 다르게 숫자가 나와서 순서가 명확히 보임

      type="1"The list items will be numbered with numbers (default)
      type="A"The list items will be numbered with uppercase letters
      type="a"The list items will be numbered with lowercase letters
      type="I"The list items will be numbered with uppercase roman numbers
      type="i"The list items will be numbered with lowercase roman numbers


      <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>


      '이런식입죠

      간단한 메뉴바를 살펴보자면

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333333;
      }

      li {
          float: left;
      }

      li a {
          display: block;
          color: white;
          text-align: center;
          padding: 16px;
          text-decoration: none;
      }

      li a:hover {
          background-color: #111111;
      }
      </style>
      </head>
      <body>

      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>

      </body>
      </html>

      이런식임여 개꿀 이쁘당


      Block-level Elements


      <div>

      <h1>~<h6>

      <p>

      <form>


      <div>Defines a section in a document (block-level)
      <span>Defines a section in a document (inline)


      Iframe - 아마 한페이지 내에서 새로고침을 할수 있게 해주는? 그러니깐 내가 구현해야할 게시판폼에 가장 알맞는? ㅇㅋ 굿


      <iframe src = "URL주소" height="숫자나 %, px를 붙여야 하는지 잘 모르겠다", width = ""></iframe>

      <iframe src="demo_iframe.htm" style="border:none;"></iframe>

      <iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>


      <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

      <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>



      HTML Layout Elements

      Websites often display content in multiple columns (like a magazine or newspaper).

      HTML5 offers new semantic elements that define the different parts of a web page:

      HTML5 Semantic Elements
      • <header> - Defines a header for a document or a section
      • <nav> - Defines a container for navigation links
      • <section> - Defines a section in a document
      • <article> - Defines an independent self-contained article
      • <aside> - Defines content aside from the content (like a sidebar)
      • <footer> - Defines a footer for a document or a section
      • <details> - Defines additional details
      • <summary> - Defines a heading for the <details> element



      HTML head까지 

      반응형
      저작자표시 비영리 변경금지

      '웹' 카테고리의 다른 글

      [HTML] HTML에 관한 고찰  (0) 2022.12.06
      [JAVASCRIPT]2. callback  (0) 2017.09.11
      [JAVASCRIPT]1. javascript Json 처리하기  (0) 2017.09.10
      [CSS]과구 CSS분석 1  (0) 2016.11.04

      관련글 관련글 더보기

      댓글

    Designed by Tistory. Flag Counter

    티스토리툴바