미새문지

Front End. Day03 HTML(2) 본문

웹 프론트엔드

Front End. Day03 HTML(2)

문미새 2022. 4. 18. 11:33
728x90

저번 일차에 이어서 HTML 남은 태그에 대해 알아보겠습니다.

 

Table 태그란?

표를 만들어주는 HTML태그이며 굉장히 많이 사용하는 태그입니다.

표 뿐만 아니라 사진 갤러리나 레이아웃 공간을 배치할 때도 사용가능하여 다양한 응용이 가능합니다.

 

< 테이블의 주요 속성 >

table : 테이블을 만드는 태그

th : 테이블의 헤더부분을 만드는 태그

tr : 테이블의 행을 만드는 태그

td : 테이블의 열을 만드는 태그

 

< 테이블 태그 예시 >

<head>
    <title>테이블</title>
</head>
<body>
    <table border="1" width="70%" align="center">
        <caption>테이블</caption>
        <tr height="50px">
            <th width="30%">content1</th>
            <th>content1</th>
            <th>content1</th>
            <th>content1</th>
            <th>content1</th>
        </tr>
        <tr>
            <td align="center">content1</td>
            <td>content1</td>
            <td>content1</td>
            <td colspan="2">content1</td>
        </tr>
        <tr>
            <td>content1</td>
            <td>content1</td>
            <td>content1</td>
            <td>content1</td>
            <td rowspan="2">content1</td>
        </tr>
    </table>
</body>
</html>

보면 테이블 태그에 다른 태그들이 보이는데 이것은 테이블의 디자인을 변경할 수 있는 태그입니다.

 

★< 테이블 디자인 변경 속성 >  <-- 굉장히 자주 쓰임

border : 테이블의 테두리 두께

bordercolor : 테이블의 테두리 색상

width : 테이블의 너비

height : 테이블의 높이

align : 정렬 방식(위 코드의 center이면 중앙정렬)

bgcolor : 배경색

colspan : 가로 테이블 병합

rowspan : 세로 테이블 병함

 

결과)

이렇게 표의 테이블을 병합하고 나눌 수도 있어 자유롭게 디자인이 가능합니다.

다음 배울 태그는 ul태그와 ol태그입니다.

 

ul태그와 ol태그란?

 

ul태그는 unordered list의 약자로, 순서가 필요없는 목록을 만드는 태그입니다.

예시) 1,2,3,4 a,b,c,d A,B,C,D...

 

ol태그는 ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 태그입니다.

예시) ●, ○

 

ol과 ul태그를 만들어 각 항목들을 나열할 때는 li(list item)라는 태그를 사용합니다.

 

ul, ol 태그 예시)

<head>
    <title>ulol</title>
</head>
<body>
    <!-- 순서가 없는 목록 태그 -->
    <ul>
        <li>문미새</li>
        <li>김미새</li>
    </ul>

    <!-- 순서가 있는 목록 태그 -->
    <ol type="A" start="3">
        <li>정보처리기사</li>
        <li>코딩테스트</li>
    </ol>

</body>
</html>

밑의 코드에 type속성은 무엇으로 시작하는지 정하는 태그인데 A경우는 A,B,C,D.. 의 대문자 영어를 사용합니다.

start속성은 몇번째부터 시작하는지 정하는 태그이며 3이면 3,4,5..식으로 나옵니다.

 

결과)

 

다음은 iframe 태그입니다.

 

iframe태그란?

iframe태그는 inline frame의 약자이며,

HTML 홈페이지에 다른 홈페이지를 넣을 수도 있고, 유튜브 영상이나 개인 동영상도 넣을 수 있는 태그입니다.

 

< iframe태그와 같이 사용하는 속성 >

src : iframe에 삽입될 문서의 주소

frameborder : 테두리 표시 지정

width : iframe의 너비 지정(px, %가능)

height : iframe의 높이 지정(px, %가능)

. . . .

 

 

예시)

<head>
    <title>iframe</title>
</head>
<body>
    <iframe src="http://www.koreaitacademy.com/" frameborder="0"
    width="500" height="800"></iframe>
    
    <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/4Png0caP7Y8" 
    title="YouTube video player" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

 첫 코드 주소는 제가 다니는 학원인 IT코리아아카데미 학원 홈페이지입니다.

테두리는 0 너비는 500px 높이는 800px

두번 째 코드 주소는 동영상을 재생하기 위해 유튜브 영상을 가져왔는데 저작권이나 보안문제로 연결이 안되었습니다.

연결을 하려면 가져오고싶은 영상에 공유를 눌러 퍼가기의 주소로 링크를 해야 연결이 되니 잘 확인하세요.

 

결과)

너비랑 높이 조절만 잘하면 홈페이지에 잘 적용해서 보기 좋게 만들 수 있을 것 같습니다.

 

 

<!-- 셋째 날은 남은 HTML 태그들을 공부하며 마무리 했습니다.

이제 기본적인 뼈대인 HTML공부가 끝났고,

넷째 날에는 홈페이지의 디자인을 꾸밀 수 있는 CSS에 대해 알아보겠습니다. -->

728x90
저작자표시 비영리 변경금지

'웹 프론트엔드' 카테고리의 다른 글

Front End. Day06 CSS(3)  (1) 2022.04.26
Front End. Day05 CSS(2)  (1) 2022.04.25
Front End. Day04 CSS  (1) 2022.04.19
Front End. Day02 HTML  (1) 2022.04.17
Front End. Day01 프론트엔드 첫걸음  (1) 2022.04.16
'웹 프론트엔드' Related Articles more