HTML - Hyper Text Markup Language(2)

개발도구

개발

Development - IT에선 프로그램을 만드는 과정

개발 도구

Development Tool - 프로그램을 만들 때 사용하는 전문화된 프로그램

editor(메모장), atom, vscode, intellij 등

[HTML root 요소]

<html> </html> - 문서의 최상위 요소를 나타내므로 root 요소라고도 하며 다른 모든 요소는 이 요소의 자손이어야 함.

<html>
내용작성
</html>

[단락 설정하기]

<p>단락</p> - 단락(paragraph)을 구분하는 태그 (줄바꿈 간격이 고정되어 있음)

HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.

그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다

위키피디아의 HTML 내용중 2개의 단락의 <p>태그 유무에 따라 상태 확인

<p>태그 미사용

<body>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
    그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다
</body>

결과

HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. 그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다

<p> 태그 사용

<body>
    <p> HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그" (HTML tag)로 부르면서 시작되었다. </p>
    <p> 그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다. </p>
</body>

결과

HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.

그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다.

TMI: 현재 블로그에선 1줄만 줄바꿈 적용되어 있지만 <p> 태그는 공백 줄까지 생성하므로 2개의 줄바꿈이 생성됨

[줄바꿈 설정하기]

<br> - 줄바꿈 기능을 부여해주는 태그 (내용을 쓰지 않기 때문에 닫는 태그는 없음)

<body>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.<br>
    그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다
</body>

결과

HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다

(<p> 태그 처럼 공백줄 하나 더 생성하고 싶으면 <br> 태그를 연달아 사용하면 됨>

단락을 구분하기 위해선 시각적으로 나눈 <br> 태보단 확실하게 나눠주는 <p> 태그가 더 적합한 것 같다.

[이미지 삽입하기]

<img> - 이미지 삽입을 도와주는 태그

<body>
    <img src="KakaoTalk_20240525_143513448.jpg">
</body>

width 와 height 를 옵션을 통해 사이즈 조절 가능 (원래 비율과 다르게 설정할 경우 이미지가 왜곡될 수 있음)

<body>
    <img src="KakaoTalk_20240525_143513448.jpg" width="200" height="300">
</body>

alt (alternative text)옵션을 통해 속성의 값을 설정 해주면 이미지가 깨졌을 때 해당 이미지의 속성 값을 보여준다.

(디폴트로 작성해주는 것을 권유)

<body>
    <img src="KakaoTalk_20240525_143513448.jpg" alt="조명나무">
</body>

결과

HTML 1 에서 배운 title 옵션도 활용 가능하다

<body>
    <img src="KakaoTalk_20240525_143513448.jpg" alt="조명나무" title="조명나무">
</body>

결과

[표 삽입하기]

<table> - 표를 선언하는 태그

<tr> - table row 로 표의 행을 구분

<td> - table data 로 행의 각 요소를 구분

<html>
    <body>
        <table>
            <tr>
                <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>

결과

주류	음식	디저트
콜라	햄버거	감자튀김
소주	삼겹살	볶음밥

이렇게 작성된 상황에서 표의 테두리를 작성하고 싶으면 bored 옵션을 통해서 생성할 수 있음.

<html>
    <body>
        <table border="1">
            <tr>
                <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>

결과

음료	음식	디저트
콜라	햄버거	감자튀김
소주	삼겹살	볶음밥

<table> 태그는 웹페이지의 레이아웃을 나눌 때도 많이 사용함

table 에서 속성과 속성 값들의 구분을 위해 디테일한 정보를 설정하려면

<th></th> - 속성 기입 (설정시 진하게 표시되고 자동으로 가운데 정렬해줌)

<td></td> - 속성값 기입

<thead></thead> - 속성 파트 표기

<tbody><tbody> - 속성값 파트 표기

<tfoot></tfoot> - 표의 마지막을 알리는 것으로 공란을 활용해 특별하게 사용가능

태그로 구분해주면 좋다. 시각적으로 변하는 것은 없으나 정보 전달에 있어서 도움이 되지 구분하는 것을 권유

TMI: <thead>, <tbody>, <tfoot> 의 순서를 섞어서 작성하더라도 자동으로 head, body, foot 순으로 작성된다.

<html>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>음료</th><th>음식</th><th>디저트</th><th>장소></th><th>지출</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>콜라</td><td>햄버거</td><td>감자튀김</td><td>부산</td><th>15000</td>
                </tr>
                 <tr>
                     <td>소주</td><td>삼겹살</td><td>볶음밥</td><td>부산</td><td>50000</td>
                 </tr>
             </tbody>
             <tfoot>
             	<tr>
                    <td>합계</td><td></td><td></td><td></td><td>65000</td>
                </tr>
            </tfoot>
         </table>
    </body>
</html>

결과

음료	음식	디저트	장소	지출
콜라	햄버거	감자튀김	부산	15000
소주	삼겹살	볶음밥	부산	50000
합계				65000

표 병합하기

<td> 태그에 rowspan, colspan 옵션을 활용해서 필요한 요소에 사용해주고 병합하고자하는 곳의 <td>태그를 지우면 병합시킬 수 있음

rowspan="no" - 행들끼리 no만큼 병합 (세로)

colspan"m" - 열들끼리 no만큼 병합 (가로)

(no 만큼 병합일 시도할 때 병합할 <td> 를 삭제해주지 않으면 사실상 no 만큼 표의 자리를 차지하게 되어 자리가 밀리게 됨)

<html>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>음료</th><th>음식</th><th>디저트</th><th>장소></th><th>지출</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>콜라</td><td>햄버거</td><td>감자튀김</td><td rowspan="2">부산</td><th>15000</td>
                </tr>
                 <tr>
                     <td>소주</td><td>삼겹살</td><td>볶음밥</td><td>50000</td>
                 </tr>
             </tbody>
             <tfoot>
             	<tr>
                    <td colspan="4>합계</td><td>65000</td>
                </tr>
            </tfoot>
         </table>
    </body>
</html>

결과

음료	음식	디저트	장소	지출
콜라	햄버거	감자튀김	부산	15000
소주	삼겹살	볶음밥	부산	50000
합계				65000

이상 오늘의 html 2 note 마무리

'HTML' 카테고리의 다른 글

HTML - Hyper Text Markup Language(4) (0)	2024.05.27
HTML - Hyper Text Markup Language(3) (0)	2024.05.25
HTML - Hyper Text Markup Language(1) (0)	2024.05.24

공책

HTML - Hyper Text Markup Language(2)

'HTML' 카테고리의 다른 글

티스토리툴바

HTML - Hyper Text Markup Language(2)

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바