[Day 19 | Web] HTML(특히 Table tag 위주)

PlayData/WebUI

[Day 19 | Web] HTML(특히 Table tag 위주)

김유니콘 2021. 12. 3. 17:53

지옥의 MySQL과 자바를 합친 수업 끝에...

드디어 html로 넘어왔다.

한 숨 돌릴 수 있는 줄 알았는데

메모장에 쓴 코드가 크롬으로 열었을 떄

코드가 그대로 크롬에서 보여서 너무 당황했다

나만..그래...?

#크롬으로 HTML 안열릴 때 해결법

친절한 동료 수강생분이 해결해주셨는데

(두 사람의 컴터 설정이라 하나는 한글, 하나는 영문 버전이지만)

아래와 같이 설정을 체크해주면 된다. 나는 Format이 Rich Text로 되어있어서 --> Plain Text로 바꾸어주었다.

파일이 분리가되면,

분리된 파일 내용은 해당 소스에는 나오지 않는다.

HTML은 계층적 구조에 의해 구조화된다.

- 글자 태그
	[제목글자]
	- h(heading) -> h1 ~ h6
	[본문영역]
	- p(paragraph), br(break), hr(horizontal rule)
	[하이퍼링크]
	- a(anchor), href(hyper reference)	
	[글자 모양]
	- b(bold) , i(italic), small, sub(subscript), sup(superscript), ins(insert), del(delete)
    
    
 - 목록(list) 태그 : ol,l(ordered list) ul(unordered list) ,li(list)
	[순서있음]
		<ol> 
		     <li(list)>~/<li>
		</ol>

    [순서없음] 
		<ul> 
		     <li(list)>~/<li>
		</ul>
        
        ol,l(ordered list) ul(unordered list) ,li(list item)
        



- 테이블 태그: <table>, <thead> , <tbody>, <th(table heding)> ,<tr(table row)>, <td(table data)>
	
	<table>
		<thead>
			<tr> <th></th> ,,,,  </tr>
		</thead>
		<tbody>
			<tr> <td></td> ,,,,  </tr>
			<tr> <td></td> ,,,,  </tr>
		<tbody>
	</table>

<tr> 단위가 행!

<td> 단위가 열!!

표를 만들때에는 일단 열과 행을 나누어서 칸부터 만들어두고 시작하기 !!!!

이런식으로 말이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Test01 Page</title>
</head>

<body>
    <table border="1">

        <caption> Caption </caption>

        <colgroup>
            <col span="2" style="background: orange;"/>
            <col span style="background: greenyellow;"/>
        </colgroup>
        
        
        <thead style="background: green; color: white;"> <!-- thead는 영역을 구분하는 것, 행과 딱히 상관 X-->
            <tr> <th> th </th> <th> th </th> <th> th </th> </tr>
            
        </thead>
        
        
        <tbody> 
            <tr> <td> td </td> <td> td </td> <td> td </td> </tr>
            <tr> <td> td </td> <td> td </td> <td> td </td> </tr>>
            <tr> <td> td </td> <td> td </td> <td> td </td> </tr>>
        </tbody>
        
        
        
        <tfoot style="background: yellow; color: red">
            <tr> <td> td </td> <td> td </td> <td> td </td> </tr>
        </tfoot>
        
        
    </table>
</body>
</html>

<tr> 단위가 행!

<td> 단위가 열!!

이하 한국의 차 문제를 풀어보자!

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Table 태그</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th colspan="6
                <th colspan="6">한국의 차</th>
            </tr>
            <tr>
                <th rowspan="6">뿌리차</th>
                <td>인삼차</td>
                <th rowspan="9">과일차</th>
                <td>수정과</td>
                <th rowspan="5">잎차</th>
                <td>뽕잎차</td>
            </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>
            <tr>
                <td>둥굴레차</td>
                <td>오미자차</td>
                <td>이슬차</td>
            </tr>
            <tr>
                <td>마차</td>
                <td>매실차</td>
                <th rowspan="4">기타</th>
                <td>두충차</td>
            </tr>
            <tr>
                <th rowspan="3">곡물차</th>
                <td>보리차</td>
                <td>모과차</td>
                <td>영지버섯차</td>
            </tr>
            <tr>
                <td>옥수수차</td>
                <td>산수유차</td>
                <td>귤강차</td>
            </tr>
            <tr>
                <td>현미차</td>
                <td>탱자차</td>
                <td>쌍화차</td>
            </tr>
        </table>
    </body>
</html>

두 가지 스타일이 적용되면 (colgroup / style) --> 가까운 것이 적용됨.

오늘 반드시 건져야 하는 것은 Table Tag!

여러가지 간단한 테스트 코드들은 그냥 귀찮으니 파일로 올린다.

Step01.zip

0.01MB

수강생끼리 퀴즈내기도 했다.

테이블태그로 이거 만들기

오? 나 할줄알잖아?

<!DOCTYPE html>
<html>
    <head>
        <title> </title>   
    </head>

    <body>

        <table border="1" style="outline: green;">
            <thead> 
                <tr> <th colspan="4"> head </th> </tr>
            </thead>


            <tbody style="background: gray;"> 
                <tr> 
                    <td colspan="2"> 1 </td> 
                    <td> 2 </td> 
                    <td rowspan="2"> 3 </td> 
                </tr>

                <tr> 
                    <td rowspan="2"> 1 </td> 
                    <td> 2 </td> <td> 3 </td>  
                </tr>


                <tr>                           
                    <td colspan="2"> 2 </td> 
                     <td> 4 </td> 
                </tr>

                <tr> 
                    <td> 1 </td> 
                    <td> 2 </td> 
                    <td rowspan="3"> 3 </td>
                    <td> 4 </td> 
                </tr>

                
                <tr> 
                    <td rowspan="2" colspan="2"> 1 </td>    
                    <td> 4 </td> 
                </tr>


                <tr> 
                    <td> 4 </td> 
                </tr>

            </tbody>

            <tfoot> 
                <tr> <td colspan="4"> foot </td> </tr>
            </tfoot>

        </body>

    </table>
</html>

다음 주에는 CSS, JS, SERVLE? 등등 다섯 가지의 언어가 다 같이 나오는데

겁주는거 아니라는데

겁먹은건 아니고

소화불량입니다...

ㅠ_ㅠ

으악!

진도 그만

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

'PlayData > WebUI' 카테고리의 다른 글

[Day20 \| JavaScript] Function, Object (0)	2021.12.08
[Day 19 \| WebUI] CSS, JavaScript, 과제(호이스팅, 자바스크립트 함수) (0)	2021.12.07
[Day 18 \| Web] Media Tag , 기타 태그, CSS(업데이트 필요) (0)	2021.12.06

현재글[Day 19 | Web] HTML(특히 Table tag 위주)

Be prepared to accept an exciting opportunity in the future 🚀 미디어와 데이터에 관심이 많습니다

🦄