본문 바로가기
Frontend/HTML , CSS

2월 1일 HTML (01~11)

by howdyoon 2023. 2. 6.

 

01_HTML 기본문법
<html>
    <head></head>
    <body>
        ● [HTML 기본 규칙]
        - Hyper Text Markup Language
        - 웹페이지(홈페이지)를 작성할때 사용하는 문법
        - 확장명 .html 저장한다
        - HTML문서는 웹브라우저(크롬,엣지,파이어폭스)에서 출력한다
        - HTML명령어를 Tag라 한다
        - 태그는 대소문자를 구분하지 않는다
        - <>기호 안에 명령어를 쓴다
        - 여는 태그와 닫는 태그로 구성되어 있다
        - 엔터(줄바꿈)을 허용하지 않는다
        - 공백은 1칸만 허용한다

        [참고사이트]
        https://www.w3schools.com/

    </body>
</html>
02_HTML 기본구조
<!DOCTYPE html>
<html>
    <head>
        <title>환영합니다</title>
    </head>
    <body>
        <!-- 주석 (보충설명) -->
        무궁화 꽃이 피었습니다
    </body>
</html>
태그는 동일하지만 브라우저에 표시하는 방식(랜더링)은
               각각 다르기 때문에 표준화된 방식으로 랜더링을 하겠다
03_글자모양
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>03_글자모양.html</title>
    </head>
    <body>
        <!-- 줄바꿈 <br> <br/> -->
        서울특별시 강남구 테헤란로 124<br>
        삼원타워 4층<br>
        아이티윌<br>

        <!-- 특수문자 
            &nbsp;   공백
            &nlt;     <
            &ngt;     >
            &amp;     &
            &quot;    "
            &apos;    '
        -->
        #&nbsp;#   
        &nlt;     
        &ngt;     
        &amp;     
        &quot;    
        &apos; 
        <br>   
        HTMl<br>
        H&nbsp;T&nbsp;M&nbsp;l<br>


    <!-- 글자크기 -->
    <h1>서울특별시</h1>
    <h2>서울특별시</h2>
    <h3>서울특별시</h3>
    <h4>서울특별시</h4>
    <h5>서울특별시</h5>
    <h6>서울특별시</h6>

    <!-- 닫는 태그는 순서에 주의 -->
    <strong><u><i> 진하게 밑줄 기울임 </i></u></strong>
    <br>

    <!-- 수평선 -->
    <!-- 속성="속성값" -->     <!-- ' = 오른쪽에있는값을 왼쪽에 ' --> 
    <!-- 속성='속성값' -->
    <!-- 사용자 임의 설정값은 " 또는 ' 로 반드시 감싼다 -->
    <hr>
    <hr width="50px"> <!-- 절대적 크기. 기본 pixel 단위 -->
    <hr width='50%'> <!-- 상대적 크기 -->
    <hr width=50> <!-- 비추천 -->
    
    <!-- 참조 https://www.w3schools.com/css/css_font_size.asp -->



    </body>
</html>
04_색상
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>04_색상.html</title>
    </head>
    <body>
        <!-- 색상 -->
        <!-- 참조 https://www.w3schools.com/colors/default.asp -->
        <!-- 색상표현 : 이름, 16진수, rgb함수 -->
    <!--
            ● [수의 체계]
               2진수 : 0 1
               8진수 : 0 1 2 3 4 5 6 7
              10진수 : 0 1 2 3 4 5 6 7 8 9 
              16진수 : 0 1 2 3 4 5 6 7 8 9 a b c d e f
        -->
        <!-- Color Names -->
        <font color="red">제주도</font>
        <font color="green">제주도</font>
        <font color="blue">제주도</font>
        <hr>

        <!-- Hexadecimal colors 16진수 -->
        <font color="#FF0000">제주도</font>
        <font color="#00FF00">제주도</font>
        <font color="#0000FF">제주도</font>
        <hr>

        <!-- RGB colors -->
        <font color="rgb(255,0,0)">제주도</font>
        <font color="rgb(0,255,0)">제주도</font>
        <font color="rgb(0,0,255)">제주도</font>
        <hr>
<!-- font 태그는 현재 쓰이지않음 -->
    </body>
</html>
05_이미지
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>05_이미지.html</title>
    </head>

    <body>
        <!--
            ● 이미지(.jpg .png .gif) 추가
              <img src="경로명+파일명">
              <img src="경로명+파일명"/>

              1) 상대경로
                현재 문서가 저장되어 있는 폴더를 기준으로 
                여기서는 /frontend/html
                images/          현재 폴더안에서 하위폴더 images
                ./images/        현재 폴더안에서 하위폴더 images
                ../images/       현재 폴더의 상위폴더 images
                ../../images/    현재 폴더의 상위의 상위폴더 images

              2) 절대경로
                웹프로젝트의 홈디렉토리(root)부터 시작
                http://itwill.com/
        -->

        <img src="../images/tube.png">
        <hr>
        <img src="../images/apeach.png">
        <hr>
        <img src="../images/coffee.png" width="150px" height="100px">
        <hr>
        <img src="../images/coffee.png" width="50%" height="50%">
        <hr>
        <!-- 크기에 대한 기준은 가로(width) -->
        <img src="../images/coffee.png" width="150px">

        <!-- 테두리선 -->
        <img src="../images/coffee.png" border="2px">
        <hr>
        <img src="../images/coffee.png" border="0">

    </body>
</html>
06_미디어
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>06_미디어.html</title>
    </head>

    <body>
        <!-- 동영상 .mp4 .avi .mp3 .ram-->

        <!-- 1) Old version 비추천 -->
        <!-- <embed src="경로명+파일명"> -->

        <!-- 2) HTML5 version (추천) -->
        <img src="../music/sheis.jpg" alt="sheis">
        <br>
        <audio controls>
            <source src="../music/sheis.mp3">
        </audio>
    <hr>

    <video width="350" height="300" poster="../music/crayonpop.jpg" controls>
        <source src="../music/crayonpop.mp4">
    </video>
    


    </body>
</html>
07_iframe
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>07_iframe.html</title>
    </head>
    
    <body>
        <!-- 프레임 삽임 -->
        약관동의<br>
        <iframe src="05_이미지.html" frameborder="3" width="300" height="200"></iframe>
        <!-- 
            <div>태그와 CSS로 프레임 모양 가능
            <textarea>태그로 프레임 모양 가능
        -->
    </body>
</html>
08_link
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>08_link.html</title>
    </head>

    <body>
        <!-- 웹페이지 연결 -->

        <!-- 1) 다른 페이지 연결 -->
        <!-- <a href="경로명+파일명 또는 URL주소">문자열</a> -->
        <a href="https://www.itwill.co.kr">아이티윌</a>
        <a href="https://www.naver.com">네이버</a>
        <a href="https://www.daum.net">다음</a>
        <hr>
        <a href="04_색상.html">색상</a>
        <a href="05_이미지.html">이미지</a>
        <hr>

        <!-- 2) 같은 페이지 내에서 문서 연결 (북마크) -->
        <!-- 
                 예) 위로, 아래로
                 <h1 id="아이디명">서울</h1>이름표 (name은 비추천) 
                 <a href="#아이디명">여기</a> 
                 id를 가리키는 단축키 : #
        -->
        <!-- 참조 https://www.w3schools.com/html/html_links_bookmarks.asp -->        
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

<!-- 단락 -->
<p>
    나무기술은 1일 마곡 신사옥에서 미디어 간담회를 열고  올해 전략 및 글로벌 공략 및 신규 사업 계획을 공유했다.  
</p>
<p>
    이의 일환으로 나무기술은 서비스형 플랫폼(PaaS)를 넘어 서비스형 인프라(IaaS)와 서비스형 소프트웨어(SaaS)도 커버하는 통합 클라우드 관리 플랫폼 사업을 본격화한다.
</p>
<p>
    나무기술은 1월초 미국에서 열린 CES2023에 참석해 PaaS, IaaS, SaaS 클라우드 통합 관리 플랫폼 ‘스마트 DX 솔루션(Smart DX Solution)’을 공개했다.
</p>

    <!-- 3) 다른 페이지로 이동하면서 북마크한 곳으로 이동 -->
    <a href="html_demo.html#C4">Jump to Chapter 4</a>


</body>
</html>
09_목록
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>09_목록.html</title>
    </head>

    <body>
        <!-- 웹페이지를 구조화할 때 주로 사용 -->

        <!-- 1) 순서가 없는 목록 -->
        <ul>
            <li>커피</li>
            <li>녹차</li>
            <li>우유</li>
        </ul>

        <!-- 2) 순서가 있는 목록 -->
        <ol>
            <li>바나나</li>
            <li>사과</li>
            <li>수박</li>
        </ol>

        <!-- 3) 정의 목록 -->
        <dl>
            <dt>서울특별시</dt>
                <dd>강남구</dd>
                <dd>종로구</dd>
                <dd>서초구</dd>
            <dt>부산광역시</dt>
                <dd>해운대구</dd>
                <dd>금정구</dd>           
        </dl>

    </body>
</html>
10_표작성
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>10_표작성.html</title>
    </head>

    <body>
        <!-- 참조 https://www.w3schools.com/html/html_tables.asp -->
        <!-- 표작성 table -->
        <!-- column 열, row 행, cell 한칸 -->
        
        <table border="1">
            <tr><!-- 줄시작 -->
                <td>셀1</td> <!-- cell -->
                <td>셀2</td>
                <td>셀3</td>
            </tr><!-- 줄 끝 -->
        </table>
        <hr>

        <!-- 표 크기(픽셀단위) -->
        <table border="1" width="500" height="300">
            <tr>
                <th>이름</th> <!-- cell 굵은 글자 -->
                <th>주소</th>
            </tr>
            <tr>
                <td>무궁화</td>
                <td>강남구 테헤란로</td>
             </tr>
        </table>
        <hr>

         <!-- 표 크기(%단위) -->
         <table border="1" width="50%">
            <tr>
                <th>이름</th> <!-- cell 굵은 글자 -->
                <th>주소</th>
            </tr>
            <tr>
                <td>무궁화</td>
                <td>강남구 테헤란로</td>
             </tr>
        </table>
        <hr>

        <!-- 정렬 : 가로(align), 세로(valign) -->
        <table border="1" wight="250" height="300">
            <tr>
                <td align="left">종로구</td>
                <td align="center">중구</td>
                <td align="right">마포구</td>
             </tr>
             <tr>
                <td valign="top">강남구</td>
                <td valign="middle">서초구</td>
                <td valign="bottom">송파구</td>
             </tr>
             <tr>
                <td align="left" valign="top">노원구</td>
                <td align="center" valign="middle">강북구</td>
                <td align="right" valign="bottom">도봉구</td>
             </tr>
        </table>
        <hr>

        <!-- 표안에서 영역 구분 <thead> <tbody> <tfoot> -->
        <table border="1">
            <thead><!-- 테이블 머리말 영역-->
                <tr>
                    <th>월</th>
                    <th>요금</th>
                </tr>
            </thead>
            <tbody><!-- 테이블 본문 영역 -->
                <tr>
                    <td>1월</td>
                    <td>1000원</td>
                </tr>
                <tr>
                    <td>2월</td>
                    <td>2000원</td>
                </tr>
                <tr>
                    <td>3월</td>
                    <td>3000원</td>
                </tr>
            </tbody>
            <tfoot><!-- 테이블 꼬리말 영역 -->
                <th>합계</th>
                <th>4500원</th>
            </tfoot>
          </table>
          <hr>

          <!-- 셀 합치기 : 가로 colspan, 세로 rowspan-->
          <table border="1" width="150">
                <tr>
                    <td>가가</td>
                    <td>나나</td>
                    <td>다다</td>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td>라라</td>
                </tr>
                <tr>
                    <td>AA</td>
                    <td rowspan="2">BB</td>
                    <td>CC</td>
                </tr>
                <tr>
                    <td>DD</td>
                    <td>EE</td>
                </tr>
          </table>
          <hr>

          <!-- 표 내부에서 표 작성 -->
          <table border="1" wight="150" height="200">
            <tr>
                <td>국어</td>
                <td align="center">
                    <table border="1">
                        <tr>
                            <td>수학</td>
                            <td>과학</td>
                        </tr>
                        <tr>
                            <td>미술</td>
                            <td>음악</td>
                        </tr>
                    </table> <!-- table 끝(설명 기재해야 안헷갈림) -->
                </td>
            </tr>
          </table> <!--table 끝 -->

    </body>
</html>
11_표작성 과제
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>표작성과제</title>
    </head>

    <body>
    <table border="1" width="600" height="300" >
        <tr>
            <td></td>
            <td colspan="3"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="5"></td>
        </tr>
        </table>
    </body>
</html>

 

저작자표시 비영리 변경금지 (새창열림)

'Frontend > HTML , CSS' 카테고리의 다른 글

2월 7일 CSS, Bootstrap (20~30)  (0) 2023.02.07
2월 6일 CSS, Bootstrap (07~18)  (0) 2023.02.06
2월 3일 HTML, CSS (18~20 / 01~06)  (0) 2023.02.06
2월 2일 HTML, CSS (12~17)  (0) 2023.02.06

관련글

티스토리툴바