220607 - html

※ html 태그 설명

https://www.w3schools.com/

W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

텍스트 관련 문법

<br> 줄바꿈

<hr> 수평 줄

<blockquote></blockquote> 인용문 (들여쓰기됨)

<pre></pre> 입력 문구 그대로 화면에 표시 => 코드 복사, 설명할 때만 사용하기 (웹접근성X-음성안내 건너뜀)

<address></address> 주소, 전화번호 등 (시멘틱 태그)

<strong></strong> 강조 웹접근성O - 중요한 태그임을 음성 안내 ( cf. <b> )

<em></em> 이탤릭체 웹접근성O (cf. <i>)

<q></q> ""

<mark></mark> 노란 형광펜

<span></span> Inline 태그 => 공간 일부에만 기능 적용

<body>
    <h1>제주 여행</h1>
    <h2>야외 건축물 <span>테쉬폰</span></h2>
    <p>아일랜드 출신 건축가 작품</p>
    <blockquote>국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 <em>대통령</em>이 공포한다.
        일반사면을 명하려면 <mark>국회</mark>의 동의를 얻어야 한다.
        사회적 특수계급의 제도는 인정되지 아니하며, 어떠한 형태로도 이를 창설할 수 없다.

        국무위원은 국무총리의 제청으로 대통령이 임명한다.
        국무총리는 국회의 동의를 얻어 대통령이 임명한다.
        공무원의 신분과 정치적 중립성은 법률이 정하는 바에 의하여 보장된다.</blockquote>
    <hr>
    <h2>날씨</h2>
    <p>오늘 낮 최고기온 서울 25도, 대구 22도에 그치며<br>
        예년보다 2도에서 특히 동풍이 불어드는 동쪽 지역은 <br>
        속초가 16도, 강릉이 18도에 머물며 쌀쌀하게 느껴질 수도 있겠습니다.</p>
    <pre>
        가나다
    라마바
           사
    </pre>
    <p>웹의 창시자 팀 버너스 리는 <q>웹의 힘은 보편성에 있다</q>라는 말로 웹 접근성을 설명한다.</p>
    <address>서울 송파구 석촌동 22<br>
        이메일 : @@naver.com<br>
        전화번호 : 02-000-0000</address>
</body>

텍스트 관련 문법

<ruby><rt></rt></ruby> => rt : ruby에 대한 주석

<abbr title="Internet of Things">IOT</abbr> 축약어

<cite></cite> 참고내용

<code></code> 코드 분류

<small></small> 작게 표시되는 추가 정보

<sub></sub> 아래 첨자 ex. H2O : <p>H<sub>2</sub>O</p>

<sup></sup> 윗 첨자 ex. 지수

<body>
    <p>오늘의 영어 한 마디 <br><br> <ruby>hello<rt>헬로우</rt></ruby></p>
    <p><ruby>大韓民國<rt>대한민국</rt></ruby>에서는 6월 6일 현충일에 ~~</p>
    <p><ruby>大<rt>대</rt>韓<rt>한</rt>民<rt>민</rt>國<rt>국</rt></ruby>에서는 6월 6일 현충일에 ~~</p>
    <p><abbr title="Internet of Things">IOT</abbr>란 ~~한 기술이다.</p>
    <p>H<sub>2</sub>O</p>
    <p>2<sup>2</sup></p>
</body>

목록 (unordered list)

<ul></ul> 비순서 목록 => li*4 + enter

목록 (ordered list)

<ol></ol>

<ol reversed> 숫자 역순

<ol type=""> 숫자 타입 ex. 123, abc, 로마자 등

<body>
    <head>프론트엔드 학습 순서</head>
    <ol type="A">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
        <li>nodejs</li>
        <li>react</li>
    </ol>
    <h2>주간 작업 (화)</h2>
    <ol start="4">    //4부터 시작
        <li>내부 청소</li>
        <li>운반 작업</li>
        <li>연결 작업</li>
    </ol>
    <h2>1박 2일 가족 여행</h2>
    <ul>
        <li>1일차
            <ol type="a">
                <li>해녀박물관</li>
                <li>낚시체험</li>
            </ol>
        </li>
        <li>2일차</li>
            <ol type="a">
                <li>용눈이오름</li>
                <li>만장굴</li>
                <li>카약체험</li>
            </ol>
    </ul>
    <h2>국가 전염병 위기 경보 수준</h2>
    <ol type="A">
        <li>관심</li>
        <li>주의</li>
        <li>경계</li>
        <li>심각</li>
    </ol>
</body>

설명 목록

<d1>
<dt></dt> : 제목
<dd></dd> : 설명 (들여쓰기됨)
</d1>

이미지

<img src="images/watch.jpg" alt="">
src : 경로 alt: 대체텍스트

※ svg 파일 (scalable vector graphics) => 해상도 손상 X (cf. jpg) / 보통 파비콘, 아이콘

※ F2 : 파일 이름 바꾸기

하이퍼링크 (anchor)

: A문서에서 링크 통해 B문서로 이동

=> Inline 태그 요소

<a href="참조 주소">표시 내용</a>
현재 창에서

<a href="참조 주소" target="_blank">표시 내용</a>
새 창으로

<h2><a href="#news">오늘의 핫뉴스</a></h2>
<p id="news">
news 단락으로 스크롤 이동

<body>
    <h2 id="top"><a href="#news">오늘의 핫뉴스</a></h2>
    <a href="http://www.kbs.co.kr" target="_blank">한국방송공사</a>
    <br>
    <a href="http://www.imbc.com" target="_blank">
        <img src="../images/watch.jpg" alt="링크">
    </a>
    <br>
    <a href="list.html">메뉴로 이동</a>
    <br>
    <img src="../images/Koala.jpg" alt="">
    <br>
    <img src="../images/Penguins.jpg" alt="">
    <p id="news">판매 10위권 내 소설은 이미예의 '달러구트 꿈 백화점'(6위), 이민진의 '파친코 1'(8위), 황보름의 '어서 오세요, 휴남동 서점입니다'(9위), 매트 헤이그의 '미드나잇 라이브러리'(10위) 등입니다.
    </p>
    <p id="news2">소설 분야에서 한국 소설의 판매 점유율은 올해 44.4%까지 올랐고, 한국 소설의 판매량은 전년 동기 대비 37.6% 늘어 역대 최대 증가폭을 기록했습니다.</p>
    <p><a href="#top">맨위로</a></p>

</body>

이미지맵

: 이미지 일부 영역 클릭시 링크 이동

shape = "circle" coords="x좌표,y좌표,반지름"
rect => x,y,x,y
poly => 다각형 "x,y,x,y,x,y,x,y,x,y..." => 일러스트레이터 이용시 사용

테이블

    <table border="1"> //실선
        <thead> //행제목임을 나타냄 (접근성 위함, 개인용으론 필수X)
            <tr> 1행
                <th>행제목</th><th>행제목2</th><th>행제목3</th>
            </tr>
        </thead>
        <tbody>
            <tr> 2행
                <td>내용</th><td>내용2</td><td>내용3</td>
            </tr>
        </tbody>
        <tfoot>   //생략 가능, 합계 or 요약
            <tr> 3행
                <td>내용</td><td>내용2</td><td>내용3</td>
            </tr>
        </tfoot>
    </table>

<td rowspan="2">내용</td>
아래 행과 병합 (아래행 아예 비우기)

<td colspan="3">내용</td>
새로운 행 추가 + 1~3열 병합

☆ 병합시 병합 셀들의 공간 꽉 찬 것으로 인식하기 (ex. rowspan 시 밑행들 td 생성 X)

<body>
    <h2>비상연락망</h2>
    <table border="1">
        <tr>
            <th>이름</th><th>전화번호</th><th>주소</th>
        </tr>
        <tr>
            <td>김철수</td><td>010-000-0000</td><td rowspan="2">서울시 종로구</td>
        </tr>
        <tr>
            <td>이영희</td><td>010-000-0000</td>
        </tr>
        <tr>
            <td>홍길동</td><td>010-3333-4444</td><td>서울시 중구</td>
        </tr>
        <tr>
            <td colspan="3">매월 둘째주 토요일 모임</td>
        </tr>
    </table>

    <h2>주간 식단표</h2>
    <table border="1">
        <thead>
            <tr>
                <th>시간</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>비고</th>
            </tr>
        </thead>
        <tr>
            <th>아침</th><td>김치찌개</td><td>된장찌개</td><td rowspan="3">자유배식</td><td>비빔밥</td><td>순대국</td><td rowspan="3">시간 엄수</td>
        </tr>
        <tr>
            <th>점심</th><td>칼국수</td><td>비빔국수</td><td colspan="2">라면</td>
        </tr>
        <tr>
            <th>저녁</th><td>콩나물국</td><td>순대국</td><td>부대찌개</td><td>볶음밥</td>
        </tr>
        <tr><td colspan="7">※배식시간은 12시부터 1시까지입니다.</td></tr>
    </table>
</body>

표에서 웹 접근성 높이기

<h2> 등은 음성안내 시 표 제목으로 인식되지 않음

표 제목 : caption

   <table border="1">
        <caption>
            <strong>주간식단표</strong>
        </caption>
    </table>

표 제목 2 : figure, figcaption

    <figure>
        <figcaption>
            <p>비상연락망</p>
        </figcaption>
        <table border="1">
            <tr>
                <th>이름</th><th>전화번호</th><th>주소</th>
            </tr>
            <tr>
                <td>김철수</td><td>010-000-0000</td><td rowspan="2">서울시 종로구</td>
            </tr>
            <tr>
                <td>이영희</td><td>010-000-0000</td>
            </tr>
            <tr>
                <td>홍길동</td><td>010-000-0000</td><td>서울시 용산구</td>
            </tr>
            <tr>
                <td colspan="3">매월 둘째주 토요일 모임</td>
            </tr>
        </table>
    </figure>

※ figure caption - 이미지 제목
    <figure>
        <img src="images/watch.jpg" alt="시계">
        <figcaption>시계</figcaption>
    </figure>

scope

:열/행 제목 정의, 음성으로 안내

iframe

: 창 속의 창

<body>
    <h1>한국문화방송</h1>
    <iframe src="http://www.imbc.com" width="400" height="500" frameborder="0"></iframe>
    <iframe src="https://www.youtube.com/watch?v=JVApcI7jfng" width="560" height="315" frameborder="0"></iframe>
    <iframe src="anchor.html" width="700" height="500" frameborder="0"></iframe>
</body>

anchor.html 수정

<a href="http://www.kbs.co.kr" target="_self">한국방송공사</a>

self => 창 안에서 불러옴
blank => 새 탭
parent => 여러 아이프레임 있을 때 바로 상위 화면에 불러옴

'Programming > 국비학원' 카테고리의 다른 글

220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일) (0)	2022.06.10
220608 - html (form) (0)	2022.06.09
220603 - html (0)	2022.06.05
220531 - 안드로이드 구현 실습 (AlertDialog) (0)	2022.06.01
220530 - 안드로이드 구현 실습 (Scroll, Spinner, 구글맵 불러오기) (0)	2022.05.31

Programming Archive

220607 - html

'Programming > 국비학원' 카테고리의 다른 글

티스토리툴바

220607 - html

'Programming > 국비학원' 카테고리의 다른 글

'Programming/국비학원' Related Articles

티스토리툴바