[자바 기초] 14일차 일지 2 - 화면(UI)구현(Ch4. 기본 태그)

프로그래밍/자바(java) 융합개발자 2차

[자바 기초] 14일차 일지 2 - 화면(UI)구현(Ch4. 기본 태그)

aSpring 2021. 1. 4. 16:56

728x90

01 HTML5 문서에서 특수문자 처리 방법

02 기본 태그 -> 기본 내용이므로 반드시 알아야 함

03 멀티미디어 태그 -> 응용! 이미지를 잘알아야 함

ex) 이미지, 동영상, 오디오

01 HTML5 문서에서 특수문자 처리 방법

1. 특수문자 처리

a > b -> a>b

왜 이렇게 쓰는가? <> 이런 꺽쇠는 우리가 tag에 쓰므로

#62 = gt

< < -> less than 작다

> > -> greater than 크다

& & -> ampercent

® -> register

아스키코드

a, b, c, d 등 문자를 숫자로 지정해놓음

a는 1(십진수 아스키코드), 001(이진수 아스키코드)

b는 2 ..

60번은 <

62번은 >

예제 4-1 특수문자 출력하기 ch04/01_charref.html

<body>
    <header>
        <center>
            <h1>&lt; HTML 특수문자 &gt;</h1>
        </center>
    </header>
    <section>
        <article>
            &num; 풀스택 개발자를 위한 웹 프로그래밍 &num;
            <p></p>
            HTML5 &#38; CSS3 &#38; JavaScript &#38; JQuery   <!-- 아스키코드 써도 되고 &amp; 써도 됨 -->
        </article>
    </section>
    <hr size="10" align="left" width=90% noshade="noshade"></hr>
    <footer>
        <small>
            &nbsp;&nbsp; &copy; 한빛아카데미 &nbsp;&nbsp;
            &nbsp;&nbsp; &reg; 2017
        </small>
    </footer>
</body>

<pre> 태그

- 공백, 특수문자, 줄 바꿈 등도 사용자가 입력한 그대로 화면에 표시 -> literal(문자 그대로, 있는 그대로)

예제 4-2 pre 태그 사용하기 ch04/02_pretag.html

<body>
    <header>
        <center>
            <h2>&lt; pre &gt; 태그</h2>
        </center>
    </header>
    <section>
        <article>
            <pre>
     ### 풀스택 개발자를 위한 웹 프로그래밍 ### 
 
        HTML5 & CSS3 & JavaScript & JQuery 
 
                  < 가격 : 35,000원 >
            </pre>
        </article>
    </section>
    <hr size="10" align="left" width=90% noshade="noshade"></hr>
    <footer>
        <small>&copy; 한빛아카데미 &reg; 2017</small>
    </footer>
</body>

02 기본 태그

1. 텍스트 : 글자(진하게), 문단(중앙/좌측/우측/아래/위 정렬, 줄 간격, 글자 간격)

b : bold

em : emphasized

i : italic

sub : subscripted

sup : superscripted

del : delete

예제 4-3 텍스트 태그 사용하기 ch04/03_texttag.ht

<body>
    <header>
        <center>
            <h2>&lt; 텍스트 관련 태그 &gt;</h2>
        </center>
    </header>
    <section>
        <article>
            <p><b>텍스트 볼드 처리</b></p>
            <p><strong>텍스트 중요 표시</strong></p>
            <p><i>텍스트를 이탤릭체로</i></p>
            <p><em>텍스트 강조 표시</em></p>
            <p><ins>텍스트 밑줄 처리</ins></p>
            <p><del>텍스트 가운데 선 처리</del></p>
            <p>텍스트<sub>아래첨자</sub>텍스트<sup>윗첨자</sup></p>
            <p><mark>텍스트에 하이라이트 표시</mark></p>
        </article>
    </section>
</body>

2. 하이퍼링크

<a> 태그★★★

- 다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용

- href 속성값에 URL을 입력해 원하는 곳으로 이동

<a href=“URL”>

상대경로 http://www.w3.org/hello.html 를 다 절대경로로 적어주는게 아니라

ㄴ> 이것만 적어 줌

href="hello.html"

-> 대신 <base> 태그에 기본 URL을 지정해 주어야 함

../ 밖으로 한 칸 ex)

./ 또는 . 현재 위치 ex) ./B./C.html -> 현재 폴더에서 B라는 폴더로 들어가서 B 폴더 안에 있는 C.html 파일

href="javascript:alert('Hello');" -> 경고창? 팝업?이 뜨면서 Hello가 나옴

웹 사이트 간 이동

- href 속성: 연결하고자 하는 웹 사이트의 URL 지정

- target 속성: 링크를 클릭했을 때 웹 사이트가 열릴 곳 지정

_blank : 새로운 웹 브라우저 창에 연다

_self : 가장 많이 쓴다 (why? 팝업 차단 해놓으면 다른 창에서 열기가 힘들어서 _self를 많이 쓴다)

_parent : 내가 원래 가지고 있는 부모의 브라우저로 간다 -> 근데 혼자밖에 없으면 결국은 내가 바뀌는 것

_top :

예제 4-4 타깃 속성값에 따른 결과 확인하기 ch04/04_01_atag.ht

<body>
    <header>
        <center>
            <h2>&lt; 하이퍼링크 관련 태그 &gt;</h2>
        </center>
    </header>
    <section>
        <article>
            <a href="http://www.w3.org" target="_blank">W3C 사이트(blank window)</a><p/> <!-- 클릭하면 새 페이지에 페이지 열림 -->
            <a href="http://www.w3.org" target="_self">W3C 사이트(self window)</a><p/>   <!-- 클릭하면 현재 페이지에 열림 -->
            <a href="http://www.w3.org" target="_parent">W3C 사이트(parent window)</a><p/>
            <a href="http://www.w3.org" target="_top">W3C 사이트(top window)</a><p/>
        </article>
    </section>
</body>

예제 4-4 베이스 태그 사용하기 ch04/04_02_basetag.html

<head>
    <title>base Tag</title>
    <base href="http://www.w3.org/"/>   <!-- Base가 되는 Standard 주소 -->
</head>
<body>
    <header>
        <center>
            <h2>&lt; 베이스 태그 사용 &gt;</h2>
        </center>
    </header>
    <section>
        <article>
            <a href="standards/" target="_blank">W3C STANDARDS</a>   <!-- 상대주소 base가 되는 Standard 주소로 감 -->
            <p/>
            <a href="Consortium/mission.html" target="_blank">W3C MISSION</a> <!-- 상대주소 base가 되는 주소 http://www.w3.org/Consortium/mission.html 여기로 이동 -->
            <p/>
            <a href="Consortium/facts.html" target="_blank">FACTS ABOUT W3C</a>
            <p/>
            <a href="Consortium/presskit.html" target="_blank">PRESS AND ANALYSTS</a>
            <p/>
        </article>
    </section>
</body>

문서 내 특정 위치로 이동

예제 4-5 책갈피 기능 사용하기 ch04/05_inpage.html

<body>
    <header>
        <center>
            <h2>&lt; 책갈피 기능 &gt;</h2>
        </center>
    </header>
    <section>
        <article>
            <a href="#user">[이름]</a> &nbsp; 
            <a href="#addr">[주소]</a> &nbsp; 
            <a href="#tel">[전화번호]</a> &nbsp; 
            <a href="#foot">[참고]</a> &nbsp; 
            <p/>
        </article>
    </section>

    <p>정보 영역</p>
    ...생략
    <p>정보 영역</p>

    <p><a name="user">홍민성</a></p>
    <a href="#top">[TOP]</a>
        <p>정보 영역</p>
    ...생략
    <p>정보 영역</p>

    <p><a id="addr">서울 강남구 신사동 291번지</a></p> <!-- name, id는 식별자 -->
    <a href="#top">[TOP]</a>

    <p>정보 영역</p>
    ...생략
    <p>정보 영역</p>

    <p id="tel">02-2323-0909</p>
    <a href="#top">[TOP]</a>

    <p>정보 영역</p>
    ...생략
    <p>정보 영역</p>
</body>

이메일 링크

- <a> 태그의 href 속성값에 이메일 주소 작성

#id -> id(식별자)로 간다

<a href=“mailto:이메일 주소＂>내용</a>

- 거래처에 문서를 보내면서, 사장님, 부장님한테도 보낸다(참조)

-> 그런데 거래처에 보낼 때 사장님, 부장님한테도 보내는데 그걸 모르게 하고싶다(숨은참조)

예제 4-6 이메일 링크 걸기 ch04/06_mailto.html

<body>
    <header>
        <center>
            <h2>&lt; 이메일 보내기 &gt;</h2>
        </center>
    </header>
    <a href="mailto:gosyhong@gmail.com">받는 사람</a><br />
    <a href="mailto:gosyhong@gmail.com?subject=질문 있어요">받는 사람, 제목</a><br>
    <a href="mailto:gosyhong@gmail.com?cc=haejini.chung@gmail.com&bcc=gooheekoo@gmail.com">받는 사람, 참조, 숨은 참조</a><br>
    <a href="mailto:gosyhong@gmail.com?cc=haejini.chung@gmail.com&bcc=gooheekoo@gmail.com&subject=질문 있어요&body=웹 프로그래밍">받는 사람, 참조, 숨은 참조, 제목, 본문</a><br>
    <a href="mailto:gosyhong@gmail.com?body=Line1-text%0D%0ALine2-text">받는 사람, 본문 문단</a>
</body>

3. 목록

무순서 목록 ( unordered list -> ul )

순서가 없는 목록
- 이런거
<ul> 태그 사용, 각 항목은 <li> 태그로 입력
목록의 각 항목 앞에는 불릿(bullet)이 붙음

순서 목록 ( ordered list -> ol )

순서가 있는 목록
1. 1, 2, 3, 4,
2. a, b, c, d..
3. 가, 나, 다, 라.
4. 이런거
<ol> 태그 사용, 각 항목은 <li> 태그로 입력
목록의 각 항목에는 기본값으로 type=“1”이 적용

정의형 목록(눈에 안보임, 의미적인 것)

각 항목을 정의하기 위한 목록
<dl> 태그 사용 -> data list
정의한 각 항목은 <dt>태그를, 각 항목에 대한 설명은 <dd> 태그를 사용
- ㄴ> date title ㄴ> date description

예제 4-7 목록 출력하기 ch04/07_list.html

<body>
    <!-- 무순서 목록 -->
    <section>
        <article>
            <h2>무순서 목록</h2>
            <ul>
                <li>Coffee</li>
                <li>Tea
                    <ul>
                        <li>Black tea</li>
                        <li>Green tea</li>
                    </ul>
                </li>
                <li>Milk</li>
            </ul>
        </article>
    </section>
    <!-- 순서 목록 -->
    <section>
        <article>
            <h2>순서 목록</h2>
            <ol>
                <li>Apples</li>
                <li>Bananas</li>
                <li>Lemons</li>
                <li>Oranges</li>
            </ol>
        </article>
    </section>

	<!-- 정의형 목록 -->
    <section>
        <article>
            <h2>정의형 목록</h2>
            <dl>
                <dt>첫 번째 아이템</dt>
                    <dd>- HTML5</dd>
                <dt>두 번째 아이템</dt>
                    <dd>- CSS3</dd>
                <dt>세 번째 아이템</dt>
                    <dd>- JavaScript</dd>
            </dl>
        </article>
    </section>
</body>

4. 표★★

<table> 태그

- <table> ~ </table>

- <tr> 태그 : 행 생성, <td> 태그 : 열 생성

table row table data

- <th> 태그 : 표의 머리를 정의, 셀 제목 글자를 강조하는 역할 -> table header

ex) 테이블 만들기

<body>
    <section>
        <table border="1" style="width:50%">
        </table>
    </section>
</body>

ex) 행 3개를 만들고 싶다 -> <tr> </tr> 이용

<body>
    <section>
        <table border="1" style="width:50%">
            <tr>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
        </table>
    </section>
</body>

ex) 행 3개를 만들고 안에 내용을 넣겠다 -> <tr> ~ </tr> 안에 <td> 내용 </td> 넣기

<body>
    <section>
        <table border="1" style="width:50%">
            <tr>
                <td>1행입니다</td>
            </tr>
            <tr>
                <td>2행입니다</td>
            </tr>
            <tr>
                <td>3행입니다</td>
            </tr>
        </table>
    </section>
</body>

예제 4-8 표 만들기 ch04/08_01_table1.html

<body>
    <section>
        <article>
            <table border="1" style="width:50%">
                <tr>
                    <th>이름</th>
                    <th>점수</th>
                </tr>
                <tr>
                    <td>홍민성</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>최민수</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td>심은경</td>
                    <td>70</td>
                </tr>
            </table>
        </article>
    </section>
</body>

표 제목 삽입

<caption> 태그 사용
- ㄴ> 설명

셀 병합

rowspan : 셀을 세로로 병합, 속성값으로 병합하고 싶은 행의 수만큼 지정
colspan : 셀을 가로로 병합, 속성값으로 병합하고 싶은 열의 수만큼 지정

예제 4-9 셀 병합하기1 ch04/09_01_table3.html

<body>
    <section>
        <article>
            <table border="1" style="width:50%">
                <caption>행 통합 테이블</caption>
                <tr>
                    <th>1행</th>
                    <td>1행 1열</td>
                </tr>
                <tr>
                    <th rowspan="2">2행</th>
                    <td>2행 2열</td>
                </tr>
                <tr>
                    <td>3행 2열</td>
                </tr>
            </table>
        </article>
    </section>
    <p></p>
    
    <section>
        <article>
            <table border="1" style="width:50%">
                <caption>열 통합 테이블</caption>
                <tr>
                    <th>1열</th>
                    <th colspan="2">2열</th>  
                </tr>                                  <!-- 여기 까지만 하면 열 2개를 합치긴 했는데 아래가 열이 3개라는 걸 모름 -->
                <tr>
                    <td>2행 1열</td>
                    <td>2행 2열</td>
                    <td>2행 3열</td>
                </tr>                                  <!-- 여기 까지만 써야 열이 3개라는 걸 알 수 있음 -->
            </table>
        </article>
    </section>
</body>

행 통합 테이블은 2, 3행이 합쳐진 것 -> 2행 (전체 길이는 3행)

열 통합 테이블은 1행의 2, 3열을 합친 것 -> 2열 (전체 길이는 3열)

(전체 길이 : 가장 긴 것)

span : 공간을 합치는 것

-> colspan, rowspan을 할 때는 전체 그림을(총 3줄 5칸이고) 먼저 그려놓고 병합(어떤 걸 병합할지 계산)해야 한다

예제 4-9 셀 병합하기2 ch04/09_02_table4.html

<body>
    <section>
        <article>
            <table border="1" style="width:50%">
                <tr>
                    <td>가</td>
                    <td>나</td>
                    <td>다</td>
                    <td rowspan="4">라</td>
                </tr>
                <tr>
                    <td>마</td>
                    <td colspan="2" rowspan="3">바</td>
                </tr>
                <tr>
                    <td>사</td>
                </tr>
                <tr>
                    <td>아</td>
                </tr>
                <tr>
                    <td colspan="2">자</td>
                    <td colspan="2">차</td>
                </tr>
                <tr>
                    <td colspan="4">카</td>
                </tr>
            </table>
        </article>
    </section>
</body>

- tr로 6줄 만들고 안에 td로 4열을 만들어준다

-> 바의 경우 colspan 2개 합치고, rowspan 3개 합친다

** 미션1 :답을 보지 않고 아래와 같은 표 만들기

** 미션2 : 답을 보지 않고 아래와 같은 표 만들기

시맨틱 태그 -> 의미적인 것

- <thead> : 표 머리말(head) 부분의 그룹 태그

- <tbody> : 표 본문(body) 부분의 그룹 태그

- <tfoot> : 표 꼬리말(Footer) 부분의 그룹 태그

예제 4-10 시맨틱 태그를 이용하여 표 만들기 ch04/10_semantic.html

<body>
    <section>
        <article>
            <table border="1" summary="시맨틱 테이블 관련 요소 목록">
                <caption>Semantic Table Tag</caption>
                <thead>
                    <tr>
                        <th>태그 명칭</th>
                        <th>설명</th>
                        <th>사용 여부</th>
                    </tr>                <!--행 1개 만들고 그 안에 내용 3개(열3개) -->
                 </thead>
                 
                 <tfoot>
                    <tr>
                        <td colspan="3">참고 사이트 : http://www.w3.org/ </td>
                    </tr>                <!-- 열 3개개 합치고 그 안에 내용 적음 -->
                 </tfoot>                <!-- tfoot을 tbody보다 먼저 써줬지만 실제로는 제일 마지막에 표시됨 -->
                <tbody>
                <tr>
                     <td>thead</td>
                     <td>표 머리말(head) 부분의 그룹 태그</td>
                     <td>가능</td>
                 </tr>
                 <tr>
                     <td>tfoot</td>
                     <td>표 꼬리말(footer) 부분의 그룹 태그</td>
                     <td>가능</td>
                 </tr>
                 <tr>
                     <td>tbody</td>
                     <td>표 본문(body) 부분의 그룹 태그</td>
                     <td>가능</td>
                 </tr>
            </tbody>
        </table>
    </article>
</section>
</body

728x90

저작자표시

'프로그래밍 > 자바(java) 융합개발자 2차' 카테고리의 다른 글

[자바 기초] 15일차 일지 2 - 화면(UI)구현(Ch5. 입력 양식 태그와 공간 분할 태그) (0)	2021.01.05
[자바 기초] 15일차 일지 1 - 화면(UI)구현(Ch4. 멀티미디어 태그) (0)	2021.01.05
[자바 기초] 14일차 일지 1 - 화면(UI)구현(Ch3. HTML5 문서 구조와 작성 규칙, 예제 실습) (0)	2021.01.04
[자바 기초] 13일차 일지 3 - 화면(UI)구현(Ch.3 HTML5 문서 구조와 작성 규칙, Bracket 브라켓 설치) (0)	2020.12.31
[자바 기초] 13일차 일지 2 - 화면(UI)구현(Ch.2 웹 프로그래밍 실습 환경 구축) (0)	2020.12.31

현재글[자바 기초] 14일차 일지 2 - 화면(UI)구현(Ch4. 기본 태그)

HelloSpring