230315 스무 번째 수업_HTML

mary·2023년 3월 15일
"#"아이디명&emsp&ensp&nbsp;<caption></caption><div></div><figure><figurecaption></figurecaption></figure><span></span><style></style><td></td><th></th><tr></tr>HTML 단축키bordercolspanrowspan블럭요소인라인요소테이블(table)
0

국비 수업

목록 보기
20/72
post-thumbnail

html 유용한 단축키:

  • Shift + Alt + F: 윈도우에서 자동으로 코드 정렬하여 가독성 좋게 만듦

  • Emmit 문법: 자동완성 기능으로, html 작성 속도를 향상시켜줌

    <!-- (li * 원하는 개수)하면 그만큼 리스트 만들어줌-->
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

*파일열 때 원클릭만 하면 기울임체로 탭이 열리고 기울임체의 탭은 다른 탭을 원클릭하면 그 창에서 다른 파일로 화면 변경됨.
더블클릭을 해야 탭이 새로 생성되며 파일 열림


테이블


노란 부분 하나하나를 셀이라고 함

<head>
  <style>
        /* css3는 문서의 레이아웃, 꾸미기 할 수 있음 style의 주석 */
        thead{
            background-color: blueviolet;
            color: white;
        }
        tfoot{
            background-color: beige;
        }
        #tb{ /*아이디 선언해주면 다른 표에게 영향 안 주고 아이디인 것만 영향 */
            background-color: lavender;
        }
        button {
            background-color: violet;
        }
    </style>
</head>
<body>
    <!--
        표: 웹 문서에서 자료를 정리할 때 사용하거나 정렬된 모습으로 한눈에 보게할 때
            행과 열로 이루어져있다.

        표 만드는 태크: <table>, <tr>, <th>, <td>

        <table></table>: 기본적인 표를 생성해주는 태그
        <tr></tr>: 표의 한 행을 나타내는 태그    
        <th></th>: 표의 제목 셀을 나타내는 태그, 굵기 효과, 가운데 정렬
        <td></td>: 표의 일반 셀을 나타내는 태그
        
        기본 사용 방법
        <table>
            <tr>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    -->

    <h1>기본적인 표 만들기</h1>
	
    <table border="1"> <!--border 속성: 표의 테두리 두께 설정-->
      <caption>[표 1] 웹 브라우저의 종류</caption>
      <!--테이블의 제목이나 내용을 추가하는 태그-->
      
        <!--속성 width, height로 각 셀의 너비와 높이 조절-->
        <tr>
            <th width="120px" height="50">브라우저명</th>
            <th width="80">제조사</th>
            <th width="200">홈페이지</th>
        </tr>
        <tr>
            <td>Internet Explorer</td>
            <td>MS</td>
            <td>http://www.microsoft.com</td>
        </tr>
        <tr>
            <td>Chrom</td>
            <td>Google</td>
            <td>http://www.Google.com</td>
        </tr>
        <tr>
            <td>Safari</td>
            <td>Apple</td>
            <td>http://www.Apple.com</td>
        </tr>
    </table>

    <figure>
        <figcaption>테이블의 설명 또는 이미지의 설명 표현에 사용</figcaption>
    </figure> 

    <hr>

    <h1>표의 행과 열을 합치는 속성</h1>
    <!--
        셀(th,td)태그의 속성을 이용하여 행 또는 열을 합칠 수 있다

        colspan="2" : 2개의 열을 합침
        rowspan="2" : 2개의 행을 합침
    -->
    <h3>이력서</h3>
    <table border="1">
      	<caption>이&nbsp;&nbsp;력&nbsp;&nbsp;서</caption>
        <!--&nbsp는 한칸-->
        <caption>이&ensp;력&ensp;서</caption><!-- 두 칸-->
        <caption>이&emsp;력&emsp;서</caption><!-- 세 칸-->
        <tr> <!-- tr>td*4 -->
            <td colspan="2" rowspan="2" width="130" height="130">사진</td>
            <td width="80">이름</td>
            <td width="200">김예림</td>
        </tr>
        <tr> <!-- (tr>td*4)*3-->
            <td>연락처</td>
            <td>010-1234-5678</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>
</body>

페이지 영역 분할

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>영역 관련 태그</title>
    <style>
        div{
            width:200px;
            height: 200px;
            border: 1px solid black;
        }
        .red{ /*클래스는 .으로 표현*/
            background-color: red;
        }
        .orange {
            background-color: orange;
        }
        .yellow {
            background-color: yellow;
        }
        span{
            border: 1px dotted black;
            /* width: 200px;
            height: 200px; */
            /* 인라인요소는 대부분 가로,세로 길이 지정 불가 */
        }
    </style>
</head>
    <!--
        블럭요소: 한 줄 단위로 영역 차지
                 줄바꿈이 적용되어 이미 존재하는 태그의 다음 줄에 영역이 잡힘
                 (p, pre, div,...)
        인라인요소: content(내용)영역에 해당하는 부분만 영역 차지
                    줄바꿈이 적용되지 않아 옆으로 영역이 잡힘(다음 줄로 넘기고자 한다면 직접 br 작성)
                    (b, mark, s, img, span, ...)
    -->
    <h1>영역 관련 태그</h1>

    <h2>div태그와 span태그의 차이점 1: 줄바꿈 적용</h2>

    <h3>div 태그</h3>
    <p>div태그는 블럭요소로 한 줄 단위로 영역 차지(이미 존재하는 태그 다음 줄에 영역이 잡힘)</p>

    <div class="red">첫번째 영역</div>
    <div class="orange">두번째 영역</div>
    <div class="yellow">세번째 영역</div>

    <h3>span 태그</h3>
    <p>span태그는 인라인요소로 content 영역만 차지(줄바꿈이 발생되지 않고 옆으로 영역이 잡힘)</p>

    <span class="red">첫번째 영역</span>
    <span class="orange">두번째 영역</span>
    <span class="yellow">세번째 영역</span><br>

    <hr>

    <h2>차이점 2: 영역 지정 방식</h2>

    <h3>div 태그: 사각형 블럭으로 영역을 지정</h3>
    
    <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi doloribus tempore soluta odit molestiae accusantium non quidem magni fuga, voluptate explicabo eaque nam ex? Perspiciatis impedit ad iste necessitatibus repudiandae.
      nim aperiam nam quisquam placeat. Veniam autem sapiente dolorum quae adipisci?
      <!--넘치는 부분은 div 영역이라고 하지 X-->
    </div>

    <h3>span: 문장 단위로 영역지정</h3>
    <span class="orange">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dignissimos impedit ipsam inventore maxime sunt fugiat excepturi maiores, nemo quas voluptatem sit consequuntur quibusdam exercitationem soluta minima laboriosam esse laudantium!
        Nesciunt magnam nam deleniti aspernatur enim vero sapiente consequuntur omnis esse eos quas, tempore debitis quam nihil minima officia qui suscipit. Officiis sunt aut temporibus impedit, distinctio cum porro minima.
    </span>

iframe:

웹 문서 안에 다른 웹 페이지를 추가하는 태그(인라인 요소)

    <h1>iframe</h1>
    <p>웹 문서 안에 다른 웹 페이지를 추가하는 태그(인라인 요소)</p>

    <iframe src="07.이미지및멀티미디어관련태그.html" width="800" height="900"></iframe>
    <iframe width="640" height="360" src="https://www.youtube.com/embed/EBGeQN5ZQ60" title="떡튀순" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</body>
</html>
profile
mary
내 인생을 망치러 온 나의 구원, 개발
이전 포스트

230314 열 아홉 번째 수업_Java&HTML

다음 포스트

230316 스물 한 번째 수업_HTML

0개의 댓글