day HTML CSS 02

JTH·2023년 2월 21일

gb_jth

목록 보기

45/56

<ol>
	<li>기술소개</li>
	<li>기본문법</li>
	<li>하이퍼텍스트와</li>
	<li>속성 리스트와 태그의 중첩</li>
</ol>

<ul>
	<li>JAVA</li>
	<li>JSP</li>
	<li>DBMS</li>
	<li>HTML</li>
</ul>

기술소개

기본문법

하이퍼텍스트와

속성 리스트와 태그의 중첩

JAVA

JSP

DBMS

HTML

<!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>Document</title>
</head>
<body>
    <ui>
        <li>
            목록(1)
            <ul>
                <li>목록 1-1</li>
                <li>목록 1-2</li>
            </ul>
        </li>
        <li>
            목록(2)
            <ul>
                <li>목록 2-1</li>
                <li>목록 2-2</li>
            </ul>
        </li>
    </ui>        
</body>
</html>

Document
목록(1)

목록 1-1

목록 1-2

목록(2)

목록 2-1

목록 2-2

<!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>Document</title>
</head>
<body>
    <h1> 사이트 메뉴</h1>
    <ui>
        <li>카페</li>
        <li>블로그</li>
        <li>지식검색</li>
    </ui>

    <!-- 주석처리  hr/ 는 줄로 자리나누는 역할 -->
    <!--hr/ : 가로줄 긋기 -->

    <hr/>   


    <hr> 목차 </hr>



    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

    <hr/>

    <!--
        P : 게시물들의 본문등과 ㅎ같이 하나의 문단을 구성하고자 할 경우 사용한다. 서로 다른 p태그 간에는 무단여백이 형성된다.
    -->
  
    <h1> 웹 접근성이란? </h1>

    <h2> 장애에 구애 없이 모든 사람이 사용할 수 있는 공간</h2>
    
    <p>
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...

    </p>
    <p>
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...
        월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...

    </p>

</body>
</html>

Document
사이트 메뉴

카페

블로그

지식검색

목차

HTML

CSS

JavaScript

웹 접근성이란?

장애에 구애 없이 모든 사람이 사용할 수 있는 공간

월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...

월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성... 월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...월드 와이드 웹 컨소시엄(W3C)의 웹접근성...

<!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>Document</title>
</head>
<body>
    <table border="2">
        <!-- tr : 행 -->
        <tr>
            <!-- td : 열 -->
            <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>

Document

이름 성별 주소

최진혁 남 청주

최유빈 여 청주

<!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>Document</title>
</head>
<body>
    <table border="2" width ="300" align="center">
        <!-- thead : 테이블에 head 부분을 의미 -->
        <thead>
            <tr>
                <!-- th : 제목 -->
                <th>이름</th>
                <th>성별</th>
                <th>주소</th>
                <th>회비</th>
            </tr>
        </thead>
        <!-- tbody : 테이블에서 본문에 해당 -->
        <tbody>
            <tr>
                <td>최진혁</td>
                <td>남</td>
                <td rowspan="2">청주</td>
                <td>1000</tr>
            </tr>
            <tr>
                <td>최유빈</td>
                <td>여</td>
                <!-- <td>청주</td> -->
                <td>500</tr>
            </tr>
        </tbody>
        <!-- tfoot : 표상에서 가장 아래쪽 -->
        <tfoot>
            <tr>
                <td colspan="3">합계</td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <td>1500</tr>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

Document

이름 성별 주소 회비

최진혁 남 청주 1000

최유빈 여 500

합계 1500

이름	성별	주소	회비
최진혁	남	청주	1000
최유빈	여	500
합계	1500

<!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>Document</title>
</head>
<body>
    <table border="2" width="300" align="center">
        <thead>
            <tr>
                <th colspan="2"> 획득포인트 </th>


            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td rowspan="2">G획득</td>
                <td>루비결제</td>
            </tr>
            <tr>
                <td>가입 축하 10000G 지급</td>
            </tr>
        </tbody>
        <tfoot height="35">
            <tr>
                <th>합계</th>
                <th>15000G</td>
            </tr>
        </tfoot>


    </table>


</body>
</html>

Document

획득포인트

G획득 루비결제

가입 축하 10000G 지급

합계 15000G

획득포인트
G획득	루비결제
가입 축하 10000G 지급
합계	15000G

<!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>Document</title>
</head>
<body>
    <!--
        <div>
            -영역 구분을 위한 태그
            -상단, 메뉴,본문,하단 등과 같이 웹 페이지의 레이아웃에 대한 영역을 구분하기 위해 사용
            - 서로 중첩되어 사용할 수 있으며, 다른 태그를 포함 할 수 있다.
    -->
    <div>
        <!--게시판 제목-->
        <div>

            <h1> 공지사항 </h1>
            <h2>우리 사이트의 새로운 소식을 알려드립니다.</h2>

            <hr/>

        </div>
        

        <div>
            <table align="center" border="2" width="1000">
                <thead>
                    <tr>
                        <th width="100"> 번호 </th>
                        <th width="1000"> 제목 </th>
                        <th width="100"> 작성자 </th>
                        <th width="100"> 조회수 </th>
                        <th width="200"> 작성일 </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th align="center">3</th>
                        <td><a href="http://www.naver.com" target="_blank" title="웹 표준 + 웹 접근성 실무완성 수강안내" >웹 표준 + 웹 접근성 실무완성 수강안내</a></td>
                        <th align="center">관리자</th>
                        <th align="center">123</th>
                        <th align="center">2014-05-01</th>
                    </tr>
                    <tr>
                        <th align="center">3</th>
                        <td><a href="http://www.naver.com" target="_blank" title="HTML5+반응형웹 수강안내" >HTML5+반응형웹 수강안내</a></td>
                        <th align="center">관리자</th>
                        <th align="center">123</th>
                        <th align="center">2014-05-01</th>
                    </tr>
                    <tr>
                        <th align="center">3</th>
                        <td><a href="http://www.naver.com" target="_blank" title="Javascript+jQuery+Ajax 수강안내" >Javascript+jQuery+Ajax 수강안내</a></td>
                        <th align="center">관리자</th>
                        <th align="center">123</th>
                        <th align="center">2014-05-01</th>
                    </tr>
                    <tr>
                        <td align="center" colspan="5"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5" align="right"><a href="#">새 글 쓰기</a></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    
</body>
</html>

Document

공지사항

우리 사이트의 새로운 소식을 알려드립니다.

번호 제목 작성자 조회수 작성일

3 웹 표준 + 웹 접근성 실무완성 수강안내 관리자 123 2014-05-01

3 HTML5+반응형웹 수강안내 관리자 123 2014-05-01

3 Javascript+jQuery+Ajax 수강안내 관리자 123 2014-05-01

1 2 3 4 5

새 글 쓰기

번호	제목	작성자	조회수	작성일
3	웹 표준 + 웹 접근성 실무완성 수강안내	관리자	123	2014-05-01
3	HTML5+반응형웹 수강안내	관리자	123	2014-05-01
3	Javascript+jQuery+Ajax 수강안내	관리자	123	2014-05-01
1 2 3 4 5
새 글 쓰기

JTH

이전 포스트

day HTML CSS 01

다음 포스트

day HTML CSS 02

gb_jth

사이트 메뉴

웹 접근성이란?

장애에 구애 없이 모든 사람이 사용할 수 있는 공간

공지사항

우리 사이트의 새로운 소식을 알려드립니다.

day HTML CSS 01

day HTML CSS 03

0개의 댓글