day HTML CSS 02

JTH·2023년 2월 21일
CSShtml
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
    JTH
    //
    이전 포스트

    day HTML CSS 01

    다음 포스트

    day HTML CSS 03

    0개의 댓글