day HTML CSS 02

JTH·2023년 2월 21일
0

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>
  1. 기술소개
  2. 기본문법
  3. 하이퍼텍스트와
  4. 속성 리스트와 태그의 중첩
  • 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

    사이트 메뉴

  • 카페
  • 블로그
  • 지식검색


  • 목차
    1. HTML
    2. CSS
    3. 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

    <!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

    <!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
    새 글 쓰기
    profile
    //

    0개의 댓글