초보 개발자의 기록

HTML기초 본문

Korea/HTML&CSS

HTML기초

bambinodeveloper 2020. 12. 1. 00:01
728x90

HTML

<!DOCTYPE html> : 웹브라우저에게 HTML의 버전을 알려주는 역할(자동으로 html5를 사용)

<meta charset="UTF-8"> : html문서에 한글이 사용될 경우 한글을 지원해주는 인코딩 방식을 이용해야 한다.

                                   <meta> 요소는 반드시 <head> 요소 내에 있어야 하고,

                                    HTMl파일의 첫 1024바이트 내에 존재해야한다.

 

<title> : 웹사이트의 제목

<h1>~<h6> : 머리말(heading) 크기를 설정해주지 않을 경우, h1부터 순서대로 크기가 작아짐

<p> : 문단(paragraph), 태그 위, 아래에 기본적으로 여백이 조금씩 있음

<b> : 텍스트 굵게 (bold)

<i> : 텍스트 기울이기 (italics) , 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다.

<strong> : <b> 태그와 효과는 동일해 보이지만, 텍스트가 중요하다고 표시하는 것이 목적이다.

                스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의

                웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽어준다.

<em> : 강조하는 것이 목적 (emphasized) , <i> 태그와 효과는 동일해 보인다.

<cite> : 책이나 영화 등의 제목에 사용한다.

<ol> : 순서가 있는 리스트(ordered list)

<ul> : 순서가 없는 리스트 (unordered list)

<li> : 목록(list)을 만드는 태그. 혼자 사용하지 않고 <ol><ul> 태그 내부에 들어간다.

<br> : 줄 바꿈(line-break) 태그

<hr>: 구분선(수평선)(horizontal rule)을 그리는 태그

<a>

<a href="링크의 절대 경로/상대 경로/엘리먼트 아이디#"> : 연결할 주소를 지정한다. 

<a href="" target=""> : 링크를 클릭할 때 창을 어떻게 열지 설정한다.

               target="-self" : 링크를 클릭한 해당 창에서 오픈

               target="_blank"  : 링크를 새창으로 연다.

               target="_parent"  : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)

               target="_top"  : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성 처리)

<a href="" title="설명"> : 해당 링크에 마우스 커서를 올릴 때 설명을 설정한다.

 

 

 

테이블 기초

<!-- 테이블을 작성할 때는, 건물과 비유하면 공부하기 좋다 -->

<table border="1px" width="500px">

  <tr>

    <td>201호</td>

    <td>202호</td>

    <td>203호</td>

    <td>204호</td>

  </tr>

<tr>

    <td>101호</td>

    <td>102호</td>

    <td>103호</td>

    <td>104호</td>

  </tr>

</table>

 

셀 합치기

rowspan: 행을 합칠 때 사용

colspan : 열을 합칠때 사용

<tr>

    <td rowspan="2">301호</td>

    <td>302호</td>

    <td>303호</td>

    <td>304호</td>

  </tr>

  <tr>

    <td>202호</td>

    <td>203호</td>

    <td>204호</td>

  </tr>

  <tr>

    <td colspan="3">101호</td>

    <td>104호</td>

  </tr>

 

로그인 폼 만들기

<button>: 버튼을 구현할 수 있음

<table width="300px" border="2px">

    <tr>

      <td><input type="text" placeholder="Your ID..." size="38"/></td>

    </tr>

    <tr>

      <td><input type="password" placeholder="Your Password..."  size="38" maxlength="8"/></td>

    </tr>

    <tr>

      <td>

        <button>가입하기</button>

        <button>Login</button>

      </td>

    </tr>

  </table>

 

 

jenkwon92/HtmlCss_Workspace

Korea it academy HTML/CSS class. Contribute to jenkwon92/HtmlCss_Workspace development by creating an account on GitHub.

github.com

 

 

728x90
반응형

'Korea > HTML&CSS' 카테고리의 다른 글

CSS 배경  (0) 2020.12.04
CSS 색상  (0) 2020.12.04
HTML & CSS 기초  (0) 2020.12.01
HTML과 CSS를 공부하는 이유와 목표  (0) 2020.11.30
'Korea/HTML&CSS' Related Articles more