2/26(金)FrontEnd/HML 5(1)

65957 ワード
html css テキストリンク

HTML5



<例><properties> </properties> <entry> </entry>

1.文字に関するラベル

<!DOCTYPE html> <!-- HTML5 문서형식 선언-->
<html lang = "ko"> <!-- 문서의 시작과 끝을 표시해주는 태그(lang속성: 언어)-->

    <!-- head: 현재 이 문서의 각종 정보와 제목, 설명 등등 표기, 화면 노출 x
                <meta>, <title>, <style>, <link>, <script>
-->
<head>
    <meta charset="UTF-8">
    <meta name="generator" content="VScode"> <!-- generator : 문서를 생성한 프로그램-->
    <meta name="author" content="gooks">     <!-- author : 문서의 저자-->
    <meta name="keywords" content="글자,태그"><!-- keywords : 검색어로 사용(검색엔진)-->
    <meta name="description" content="이 문서는 글자관련된 태그들을 공부하는 문서입니다.">
    <title>
        글자 관련 태그 공부중
    </title>
</head>

    <!-- body: 화면에 출력해서 보여주고자 하는 모든 내용 표기(화면 노출)-->

    
<body>
    crtl + q 눌렀다가 바로 s 누르면 preview창 
    crtl + / 바로 주석
    <br> 띄어쓰기 태그
    <h1> h1 태그입니다. </h1>
    <h2> h2 태그입니다. </h2>
    <h3> h3 태그입니다. </h3>
    <h4> h4 태그입니다. </h4>
    <h5> h5 태그입니다. </h5> 
    <h6> h6태그입니다. </h6>
    <hr> 
    <!-- <hr> 수평선 넣어주면서 줄 바꿈 태그 -->

    <h3> *문단을 나누는 태그 (p, pre) </h3>

    <p>
        문단 영역을 나누는 태그로 p태그와 pre태그가 있다. p태그는 문단 영역을 나누는 태그지만 줄 바꿈을 하고자 한다면 
        br 태그를 별도로 기술해야함, 뿐만 아니라 한 개의 공백만 표시하기 때문에
        추가적인 공백을 넣고자 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 한 특정 구문을 작성해야 됨
    </p>
    <pre>
        pre 태그는 이러한 띄어쓰기 적용됨
        줄 바꿈도 알아서 적용 됨 
        즉, 작성한 내용 있는 그대로를 표현하는 태그는
    </pre>

    <hr>

    <h3> *기타 글자 관련 태그</h3>
    <b> b: 글자를 굵게 표시하는 태그 </b>
    <str> str: 글자를 굵게 표시하는 태그 </str>

    <em> em: 글자를 기울이는 태그</em>
    <mark> mark: <em><b>형광펜 u: 글자 밑에 밑줄 긋는 태그 효과를 나타내는 태그</b></em> 
    효과를 나타내는 태그</mark> <br>
    <u> u: 글자 밑에 밑줄 긋는 태그 </u><br>
    <s> s: 글자에 취소선을 넣는 태그 </s><br>
    <small> small: 글자를 작게 표시하는 태그</small>

    기본 글자에 <sub> sub : 아래첨자 </sub> 를 나타내는 태그와 
    <sup> sup: 윗첨자 </sup>를 나타내는 태그 <br>

    <abbr title="Internet Of Things">IOT</abbr> 란 
    각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기능이다.
    
    <h3> 태그를 중첩으로 사용</h3>
    <p>
        태그들 간에 중첩으로 사용 가능<br>
        <b>굵은</b> 글자를 사용할 수 도 있고, <em>기울이거나</em> <s><b>굵게</b> 
        표시하면서 <mark>취소선</mark></s>도 넣을 수 있다.
    </p>

</body>
</html>



2.リストラベル

<!DOCTYPE html5>
<html>
    <head>

    </head>

    <body>
        <li>목록1</li>
        <li>목록2</li>

        <h1> ul : 순서 없는 목록 태그 </h1>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>

        </ul>
        <!-- 불릿기호 : 채워진원, 빈원, 네모난거... 변경 가능 CSS에서-->

        <ul>
            <li>
            HTML5
                <ul>
                    <li>글자관련</li>
                    <li>목록관련</li>
                </ul>
            </li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ul>
        <hr>

        <h1>ol: 순서 있는 목록 태그</h1>
        <ol>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ol>
        <!-- 순서 있는 목록 태그의 기본 타입 : 1부터 시작하는 숫자값 -->
        <br>
        <!-- type 속성을 이용해서 변경가능(1, A, a, i, I) -->
        <ol type="I">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ol>
        <br>
        <!-- start 속성을 이용해서 변경 가능 -->
        <ol start="5">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ol>
        <br>
        <!-- 여러개의 속성 지정 가능 -->
        <ol type="A" start="5">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ol>

        <br>

        <!-- Reversed 속성을 통해 역순으로 표기(속성값 굳이 작성x) -->

        <ol reversed>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ol>

        <hr>

        <h1> d1: 설명과 관련된 목록 태그</h1>

        <dl>
            <dt> 이곳은 제목을 작성하는 곳 </dt>
            <dd> 이곳은 해당 설명을 작성하는 곳 </dd>
            <dd> 여러 줄을 작성할 수 있음</dd>
            <br>
            <dt> 또 다른 제목 작성 가능</dt>
            <dd> 설명도 마찬가지.... </dd>
        </dl>




    </body>
</html>



3.表に関するラベル


:表:主にWebドキュメントでの資料整理に使用
行と列
行と列の交差をセルと呼びます
表中のラベル:`````
        <table>, <tr>, <th>, <td>

            <table> : 기본적으로 표를 생성
            <tr> 표의 한 행을 나타내는 태그
            <th> 표의 제목셀을 나타내는 태그 => 글자 굵게, 가운데 정렬
            <td> 표의 일반 셀을 나타내는 태그
            ```
            
<!DOCTYPE html>
<html>
    <head>
        <title> 표 관련 태그 공부</title>
    </head>
    <body>
        <!-- 
            표 : 웹 문서에서 자료를 정리할 때 주로 사용
                 행과 열로 이루어져있음
                 행과 열이 만나는 지점을 셀이라고 함
            표를 구성하는 태그 : <table>, <tr>, <th>, <td>

                <table> : 기본적으로 표를 생성
                <tr> 표의 한 행을 나타내는 태그
                <th> 표의 제목셀을 나타내는 태그 => 글자 굵게, 가운데 정렬
                <td> 표의 일반 셀을 나타내는 태그

                *기본구조(3행 2열)
                <table>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>                         
         --> 

         <h1> 기본적인 표 만들기(4행 3열)</h1>

         <table border="1"> <!-- border 속성 : 테두리 두께-->
            <!-- <caption> 테이블의 중간위치에 위치하게 됨-->
            <caption> <b>그냥 하고 싶은 말 </b> </caption>
             <tr>
                 <th width="130" height="30">안녕하세요</th>
                 <th width="80">반갑습니다</th>
                 <th width="150">잘 오셨습니다.</th>>
             </tr>
             <tr>
                 <td>이게 바로</td>
                 <td>무엇입니까</td>
                 <td>하하하하하하</td>
             </tr>
             <tr>
                 <td>이것은</td>
                 <td>저의</td>
                 <td>세계지요</td>
             </tr>
             <tr>
                 <td>놀라셨는지요</td>
                 <td> 아니리라</td>
                 <td> 믿습니다용 </td>
             </tr>

         </table>

         <figure>
             <figcaption>테이블의 설명 혹은 이미지의 설명에 주로 사용</figcaption>
         </figure>

         <hr>

         <h1> 표의 행과 열을 합치는 속성</h1>
         <!-- 셀 태그에 속성을 반영시켜 행 또는 열을 합칠 수 있음 
        
        colspan ="2" : 2개의 열을 합치기
        rowspan ="3" : 3개의 행을 합치기
        -->

        <h3> 이력서 </h3>
        <table border="1">
            <tr>
                <td colspan="2" rowspan="2" width="130" height ="130">사진</td>
                <td width="80">이름</td>
                <td width="200"></tdw>
            </tr>
            <tr>
                <td>연락처</td>
                <td></td>
            </tr>
            <tr>
                <td width="70" height="50">주소</td>
                <td colspan ="3"></td>
            </tr>
            <tr>
                <td height="130">자기소개</td>
                <td colspan ="3"></td>
            </tr>
        </table>

        <h1> 테이블 내에 영역잡기
            <table border="1">
                <thead>
                    <tr>
                        <td>이름</td>
                        <td>나이</td>
                        <td>주소</td>
                    </tr>
                </thead>
                <tbody style="background-color: pink;">
                    <tr>
                        <td>김개떵</td>
                        <td>20</td>
                        <td>서울시 관악구</td>
                    </tr>
                    <tr>
                        <td>빅밀슨</td>
                        <td>10</td>
                        <td>경기도 남양주</td>
                    </tr>
                    <tr>
                        <td>박개똥</td>
                        <td>50</td>
                        <td>서울시 동작구</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan ="2">총 인원</th>
                        <td>3명</td>
                    </tr>
                </tfoot>
            </table>
        </h1>
    </body>
</html>
20210514 CSS Sign in page例
C言語:type