HTML에서 사용할 수 있는 대표적인 리스트는 3가지가 있다


UL은 리스트 나열 시 번호 대신 특수문자를 사용하고


OL은 리스트 나열 시 번호나 로마자 등 설정이 가능하다.


li는 UL과 OL 사용 시 리스트의 항목들을 감싸는 블록


DL의 경우는 리스트 안에 또 list를 추가하여 표시할 수 있다.


또한 li를 사용하지 않고 dl, dt, dd를 통해 컨트롤 한다.


아래 예제를 통해 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>리스트</title>
    </head>
    <body>
        <h2>UL - 정렬 넘버가 없는 리스트</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Java-Script</li>
            <li>J-Query</li>
        </ul>

        <h2>UL - 리스트 앞의 동그라미(disk) 삭제</h2>
        <ul style="list-style-type:none;">
            <li>HTML</li>
            <li>CSS</li>
            <li>Java-Script</li>
            <li>J-Query</li>
        </ul>
        
        <h2>OL - 정렬 넘버가 있는 리스트</h2>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>Java-Script</li>
            <li>J-Query</li>
        </ol>

        <h2>OL - 정렬 넘버를 바꾼 OL</h2>
        <ol type="A">
            <li>HTML</li>
            <li>CSS</li>
            <li>Java-Script</li>
            <li>J-Query</li>
        </ol>

        <h2>리스트 안의 리스트 형태</h2>
            <dl>
                <dt>HTML</dt>
                    <dd>a 태그</dd>
                    <dd>img 태그</dd>
                    <dd>li 태그</dd>
                <dt>CSS</dt>
                <dt>JAVA-SCRIPT</dt>
                <dt>J-QUERY</dt>
            </dl>
    </body>


</html>






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

'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글

[HTML]02-07.link(페이지 아이콘 이미지 추가),Input(버튼, 텍스트박스 등 다양한 노드 생성), fieldset(프레임 만들기)  (0) 2018.10.15
[HTML]02-06.iframe, 다른 사이트 참조 + 예제  (0) 2018.10.15
[HTML]02-04.이미지, 하이퍼링크 태그(img, a)  (0) 2018.10.15
[HTML]02-03.테이블(표) 만들기, style, table, tr, th, td, colspan, rowspan  (0) 2018.10.15
[HTML]02-02. hr 태그, 01, 02의 예제, 공백 &nbsp; 키워드  (0) 2018.10.15

먼저 인터넷에 사용할 이미지를 아무거나 html 을 작성한 파일들이 담긴 폴더에 복사하자.



필자는 아래 이미지를 사용하였다.





<img>태그는


태그 안에 src를 통해 경로를 설정하고, alt를 통해서 이미지의 이름을 설정한다.


width와 height를 통해서 사이즈 조절도 가능하다.


alt의 경우 시각 장애자를 위해 꼭 명시하는것을 추천한다.


큰 웹사이트의 경우 법적으로 필수로 명시하라고 되있다고 한다.





<a> 태그는 href에 이동할 링크를 입력하고


target="_blank"를 명시하면 새탭에서 열리고


명시하지 않으면 현재 페이지에서 열리게 된다.



아래 예제를 확인해 보자.




<html>
    <head>
        <meta charset="UTF-8">
        <title>이미지</title>
    </head>
    <body>
        <img src="picture.gif" alt="구글 이미지" width="250" height="150"/>
        <!--alt="이미지 설명"은 글을 소리내어 읽어주는 기능을 할 때 이미지라고 읽어주게끔 명시하는 코드-->
        <!--꼭 넣자-->
        <!--이미지 우측 하단에 '_', 언더바처럼 표시가 하나 생기는데 CSS를 이용하면 지울 수 있으나-->
        <!--HTML을 다루고 있으므로 넘어간다.-->
        <br>

        <a href="http://www.naver.com"target="_blank">
            특정 링크로 이동
        </a>
        <!--href를 비워두면 자기 자신을 의미-->
        <!--target="_blank"을 명시하여 새 탭에서 열기, 없다면 현재 페이지를 바꿈-->
        <br>

        <a href="http://www.naver.com"target="_blank">
            <img src="picture.gif" alt="구글 이미지" width="250" height="150"/>
        </a>
        <!--a 태그가 이미지를 감싸면 이미지를 눌렀을때 링크 이동이 됨-->
        <br>

    </body>

</html>



a태그를 사용하면 우측 아래에 '_', 언더바가 생기는데 CSS를 통해서 없앨 수 있다.


하지만 현재 HTML을 다루기 때문에 생략






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

'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글

[HTML]02-06.iframe, 다른 사이트 참조 + 예제  (0) 2018.10.15
[HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd)  (0) 2018.10.15
[HTML]02-03.테이블(표) 만들기, style, table, tr, th, td, colspan, rowspan  (0) 2018.10.15
[HTML]02-02. hr 태그, 01, 02의 예제, 공백 &nbsp; 키워드  (0) 2018.10.15
[HTML]02-01.기본 뼈대, 글자 효과(title, h1~6, small, mark, b, del, ins, sub, sup, p, br 태그)  (0) 2018.10.11

HTML만 쓸 때는 테이블은 화면에 띄어줄


자료를 배치하는데 있어서 가장 중요하다고 할 수 있다.


배치를 어떻게 하느냐에 따라 화면이 깔끔해진다.


요즘에는 HTML만 쓰는 사이트는 거의 없기 때문에 잘 안쓰이긴 한다.


다음 예제를 보고 테이블의 사용법과


Style 지정을 어떻게 하는지 2가지 방법이 있는데 확인해보자




style - 각종 블록들의 속성을 선언할 때 사용하는 기능, head에 스타일 블록을 만들어 몰아서 써도 된다.


table - 표 선언


tr - 행 선언


th - 헤더, DB로 치면 컬럼을 의미


td - 필드, DB로 치면 데이터 항목들


colspan, rowspan - 셀 병합, 칸 합치기, th와 td의 속성 설정에 사용



border: 1px solid black;

border-collapse: collapse;


위의 두 줄은 스타일 블록에 사용하는데 표의 선을 생성하라는 코드이다. 


만약 table, th, td를 함께 묶지 않는다면 분리되어 표시되고


첫째 줄의 black은 색상을 의미한다.


collapse는 생략





<html>
    <head>
        <meta charset="UTF-8">
        <title>테이블</title>
        <!--이 스타일을 보기 전에 아래 body 아래의 주석 처리된 table의 style을 먼저 보자-->
        <style>
            table{
                width: 300px;
            }
            table, th, td{
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
<!--    <table style="width:300px; border: 1px solid"><!--테이블 선언; 스타일 = 테이블 사이즈 조절; 테두리 줄 생성;-->
        <table>
           <caption>SCORE</caption><!--표 제목 선언-->
            <tr><!--행(row)선언-->
                <th>Firstname</th><!--헤더, (컬럼 이름)-->
                <th>Lastname</th>
                <th>Points</th>
            </tr>
            <tr><!--필드, (항목들)-->
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
        </table>
    </body>
</html>

<!--16번째 줄의 table을 선언할 때 같이 style을 설정 할 수 있지만-->
<!--스타일을 head 안에 따로 설정하는 방법도 있다.-->




스타일은 위와같이 table 선언 시 스타일 선언을 같이하여 속성들을 부여해도 되고


처음부터 head에 부여하여 속성을 부여해도 상관없다.


table의 th, td에 colspan이나 rowspan을 설정하여 칸 병합을 할 수 있다. 아래 예제를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>테이블</title>
        <style>
            table{
                width: 300px;
            }
            table, th, td{
                border: 1px solid;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>9월</caption><!--표 제목 선언-->
                <tr><!--행(row)선언-->
                    <th colspan="7"><b>9월 4주차</b></th><!--헤더, (컬럼 이름)-->
                </tr>
                <tr><!--필드, (항목들)-->
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                </tr>
        </table>

        <br><br/>
        <br><br/>

        <table>
                <caption>9월</caption><!--표 제목 선언-->
                    <tr><!--행(row)선언-->
                        <th><b>주차</b></th><!--헤더, (컬럼 이름)-->
                        <th><b>날짜</b></th>
                    </tr>
                    <tr><!--필드, (항목들)-->
                        <td rowspan="8">4</td>
                    </tr>
                    <tr>
                        <td>21</td>
                    </tr>
                    <tr>
                        <td>22</td>
                    </tr>
                    <tr>
                        <td>23</td>
                    </tr>
                    <tr>
                        <td>24</td>
                    </tr>
                    <tr>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>26</td>
                    </tr>
                    <tr>
                        <td>27</td>
                    </tr>
            </table>
    </body>
</html>


rowspan과 colspan을 활용하여 병합하면 아래와 같이 표시된다.







위의 내용을 바탕으로 아래 그림의 표를 만들어보자








<html>
    <head>
        <meta charset="UTF-8">
        <title>로그인 박스</title>
        <style>
                th{
                    width: 50px;
                }
                td{
                    width: 50px;
                }
                table, th, td{
                    border: 1px solid;
                    border-collapse: collapse;
                }
            </style>
    </head>
    <body>
        <table>
            <tr><!--행(row)선언-->
                <th ><b>ID</b></th>
                <th></th>
                <th rowspan="2"></th>
            </tr>
            <tr><!--행(row)선언-->
                <th><b>PW</b></th>
                <th></th>
            </tr>
            <tr><!--행(row)선언-->
                <th colspan="3">회원가입</th>
            </tr>
        </table>

    </body>
</html>





<html>
    <head>
        <meta charset="UTF-8">
        <title>회원가입 페이지</title>
        <style>
            table, th, td{
                border: 1px solid black;
                border-collapse: collapse;
            }
            td{
                width: 200px;
            }
        </style>
    </head>
    <body>
        <h2>회원가입</h2>
        <hr/>
        <table>
            <tr>
                <th>아이디</th>
                <td></td>
            </tr>
            <tr>
                <th>비밀번호</th>
                <td></td>
            </tr>
            <tr>
                <th>비밀번호 확인</th>
                <td></td>
            </tr>
            <tr>
                <th>이름</th>
                <td></td>
            </tr>
            <tr>
                <th>이메일</th>
                <td></td>
            </tr>
            <tr>
                <th>생년월일</th>
                <td></td>
            </tr>
            <tr>
                <th>성별</th>
                <td></td>
            </tr>
            <tr>
                <th>취미</th>
                <td></td>
            </tr>
            <tr>
                <th>나이</th>
                <td></td>
            </tr>
            <tr>
                <th>보안등급</th>
                <td></td>
            </tr>
        </table>
    </body>
</html>


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

'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글

[HTML]02-06.iframe, 다른 사이트 참조 + 예제  (0) 2018.10.15
[HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd)  (0) 2018.10.15
[HTML]02-04.이미지, 하이퍼링크 태그(img, a)  (0) 2018.10.15
[HTML]02-02. hr 태그, 01, 02의 예제, 공백 &nbsp; 키워드  (0) 2018.10.15
[HTML]02-01.기본 뼈대, 글자 효과(title, h1~6, small, mark, b, del, ins, sub, sup, p, br 태그)  (0) 2018.10.11

+ Recent posts

티스토리툴바