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 을 작성한 파일들이 담긴 폴더에 복사하자.



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





<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만 쓸 때는 테이블은 화면에 띄어줄


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


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


요즘에는 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>
    <head>
        <meta charset="UTF-8">
        <title>문서의 제목</title>
    </head>
    <body>
        <p>p 태그는 위 아래로 공백이 발생</p>
        <hr/>
        <p>p 태그는 위 아래로 공백이 발생</p>
        <hr/>
        <p>p 태그는 위 아래로 공백이 발생</p>
        <hr/>
    </body>
</html>

<hr/> - 나눔 줄



01과 02에서 사용한 태그를 이용해 아래의 예제를 직접 작성해보자








<html> <head> <meta charset="UTF-8"> <title>메인 Page</title> </head> <body> <h2>메인 페이지</h2> <hr/> <br><small>NHH 엔터테인먼트</small>가 <b>가카오</b>를 상대로 특히 침해 소송을 벌인 것과 관련해,<br/> <br>가카오가 제기한 <mark>특허 무효</mark> 심판 3건 중 2건에서 가카오가 승소했다.<br/> <br><br/> <!--br안의 내용을 입력안하면 그냥 Enter키를 누른것과 유사--> <br>가카오는 14일 <del>NHH엔터테인먼트</del>의 특허 자회사 <ins>케이이노베이션</ins>이 보요 특허 침해로 제기한<br/> <br>특허소송과 관련해 자사가 진행한 <sup>특허 무효심판</sup>에서 승소했다고 밝혔다.<br/> </body> </html> <!--HTML은 공백(스페이스)을 입력하면 1자밖에 인식이 안된다. ' '가 ' '한칸으로 인식--> <!--&nbsp;를 사용해서 ' '한칸 이상의 공백을 여러개 입력할 수 있다.--> <!--그리고 줄바꿈은 enter을 인식하지 않기 때문에 br이나 p태그를 사용해야 한다.-->



만약 공백을 여러개 넣고 싶다면 &nbsp;를 여러번, 3번 하고싶다면 &nbsp;&nbsp;&nbsp; 라고 입력하면 된다.


지금 당장 F12를 눌러보자


창이 하나 나오는데 그게 바로 HTML 요소를 보는법이다.


다른 브라우져도 공통이다.


가끔 F12를 막아두는 사이트도 있는데 그럴 땐 Ctrl + Shift + C를 누르면 된다.


여기서 코드 수정이나 java script 사용 해제를 통해 복사 방지 금지 해제를 할 수 있다.




1. HTML(Hyper Text Markup Language)은 인터넷 브라우져로 보여지는 화면을 구성하는 문서


2. CSS – HTML 을 보다 세련되게 표현(그래픽 작업이라고 생각하면 된다.)


3. JAVA SCRIPT – HTML에 동적 기능을 구현


4. J QUERY – JAVASCRIPT의 라이브러리



<!--html은 코드라기 보다는 문서-->
<html>
    <head>
        <!--글자 타입 선언-->
        <meta charset="UTF-8">
        <title>문서의 제목</title>
    </head>
    <body>
        <h1>This is Headline</h1>
        <h2>This is Headline</h2>
        <h3>This is Headline</h3>
        <h4>This is Headline</h4>
        <h5>This is Headline</h5>
        <h6>This is Headline</h6>
    </body>
</html>
<!--head는 html의 자식, meta, title은 head의 자식-->
<!--이와 같이 부모 자식 관계를 가진다.-->
<!--꼭 앞에 공백을 넣어 보기 좋게 만들어야 하는데-->
<!--html의 경우 코드가 잘못되도 표시가 되지않기 때문에-->
<!--직접 눈으로 찾아야 한다.-->
<!--그러므로 순서 및 공백이 뒤죽박죽이라면 찾기가 정말 힘들다.-->








<h1~6>, H태그는 글자의 크기가 제각각 다른 강조효과 태그이다.




<html>
    <head>
        <meta charset="UTF-8">
        <title>문서의 제목</title>
    </head>
    <body>
        <h2>HTML <small>Small</small> Formatting</h2>
        <h2>HTML <mark>Marked</mark> <b>Formatting<b></h2>
        <p>My favorite color is <del>blue</del> red.</p>
        <p>My favorite <ins>color</ins> is red.</p>
        <p>This is <sub>subscripted</sub> <b>text</b>.</p>
        <p>This is <sup>superscripted</sup> text.</p>        
    </body>
</html>







<small> - 글자 작게


<mark> - 글자 하이라이트(형광펜)


<b> - 굵게 표시


<del> - 글자 중앙 줄 긋기


<ins> - 글자 밑 줄 긋기


<sub> - subscripted의 약자, 글자 아래에 적기


<sup> - superscripted의 약자, 글자 위에 적기


<p> - 위아래 간격 주고 줄 넘기기


<br> - 줄 넘기기, Enter(간격 없이), 위의 예에는 없음


www.w3schools.com 대표적인 html, javascript css를 공부 할 수 있는 사이트


자료의 양도 방대하지만 전부 영어이기 때문에 영어를 조금 할 줄 알아야 하는 단점이 있다.


하지만 공부하기에는 정말 좋은 사이트 이므로 관심이 있다면 접속해서 공부해보자.

한글화 및 브라우저 작동 툴




실행하면


아래와 같은 화면이 나온다. (한글화를 하기 전이라서 영어판으로 보인다.)




좌측의 네모난 아이콘을 누르면 검색창이 하나 나오는데




파란색 네모를 따라서 korean을 검색하고 선택하여 설치를 눌러준다.


사진에는 이미 설치를 했기 때문에 제거 버튼이 보인다.


설치하고 나서 재시작을 요구하는 팝업창이나 버튼이 활성화 된다, 눌러서 재시작





작성한 HTML을 브라우져로 작동시키기 위한 툴을 아까와 같이 설치








HTML 파일 생성




좌측의 종이 두장 모양을 클릭





폴더 열기 버튼을 눌러 마음에 드는곳에 HTML파일을 생성할 폴더를 지정한다.




파란색 표시 부분을 누르면 박스가 나오는데 이름.html을 입력하면 html 파일이 만들어진다.





브라우저로 작동 방법







HTML 파일을 만들어 작성 한 후






ctrl + shift + p를 누르면 위와 같이 검색 창이 나오는데


저번에 설치한 view in browser을 누르면 바로 브라우저로 실행된다.


실행 전에는 꼭 ctrl + s를 눌러 저장을 해야 수정한 내용이 실행된다.







또한 Internet Explorer의 옛날 버젼은 작동이 안될수도 있고, 최신 버젼이라도 지원 안되는 기능들이 있을 수 있으므로


크롬이나 파이어폭스 같은 브라우져를 사용하여 공부하길 권장한다.


HTML은 다양한 에디터가 있는데 그 중 프로그램이 살짝 무겁지만 무료인게 Visual Studio Code 이다.




설치 방법은 아래와 같이 간단하다.




구글에 visual studio code 검색





최 상단에 visualstudio 사이트로 들어가서






메인 페이지가 나오는데 스크롤을 쭉 아래로 내리면








자신의 환경에 맞는 다운로드 버튼이 있다.



설치는 따로 중요한점이 없어 그냥 더블클릭 하고 진행하면 된다.


+ Recent posts