[자바 기초] 14일차 일지 1 - 화면(UI)구현(Ch3. HTML5 문서 구조와 작성 규칙, 예제 실습)

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

[자바 기초] 14일차 일지 1 - 화면(UI)구현(Ch3. HTML5 문서 구조와 작성 규칙, 예제 실습)

aSpring 2021. 1. 4. 10:30

728x90

2020/12/31 - [자바 프로그래밍] - [자바 기초] 13일차 일지 1 - 화면(UI)구현(Ch.1 웹 프로그래밍의 개요)

2020/12/31 - [자바 프로그래밍] - [자바 기초] 13일차 일지 2 - 화면(UI)구현(Ch.2 웹 프로그래밍 실습 환경 구축)

2020/12/31 - [자바 프로그래밍] - [자바 기초] 13일차 일지 3 - 화면(UI)구현(Ch.3 HTML5 문서 구조와 작성 규칙, Bracket 브라켓 설치)

01 HTML5 문서의 구조

02 HTML5 문서의 작성 규칙

03 태그의 분류

04 태그의 속성

05 웹 문서의 레이아웃

01 HTML5 문서의 구조

1. HTML5 문서의 구조

HTML 문서의 기본 구조

<!DOCTYPE html>

HTML5 문서를 선언하는 구문(Document, 문서)

생략할 수 있지만 하위 호환성을 위해 작성할 것을 권장

HTML5 문서의 시작과 종료를 알림

언어(lang) 속성을 사용하여 주된 언어 값을 설정할 수 있음

<head> ~ </head> -> 눈에 보이지는 X

웹 페이지의 정보를 정의

<title> 태그와 자바스크립트, 스타일시트(CSS) 등을 정의

ㄴ> 내부 정보 : 스타일시트는 100% head부분에 들어가고, 자바스크립트는 body에도 들어갈 수 있다

title은 무조건 head안에 들어간다

<body> ~ </body> -> 눈에 보여지는 내용

HTML5 문서의 본문을 작성 : 화면 안에 보여질 실제 내용들이 들어간다

태그, Element의 주 역할 : 데코레이션! ex) 글자의 색, 크기, 글자 속성 등을 정의해 준다 -> 어떻게 보여줄건지, 어떤 구조를 가질 건지, 사진 배치를 어떻게 할것인지 등

예제 3-1 기본 태그로 웹 문서 작성하기 ch03/01_intro.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 시작</title>
</head>
<body>
    HTML5 기본 태그를 사용하여 작성한 문서입니다.
</body>
</html>

head와 body는 같은 등급이다

예제 3-2 메타정보를 정의한 웹 문서 작성하기 ch03/02_head.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 메타정보</title>
    <meta charset="UTF-8">
    <meta name="author" content="Hong Seong Yong">
    <meta name="keywords" content="HTML5, CSS3, JavaScript, JQuery">
    <meta name="description" content="Web Programming">
    <meta http-equiv="refresh" content="10, http://cafe.naver.com/go2web">
    <base href="http://www.w3.org/" target="_blank">
    <!-- "_blank" -> http://www.w3.org/가 새 창으로 뜬다 -->
</head>
<body>
    <p>헤드 태그 내 메타정보에는 웹 문서를 만든 이, 검색 시 키워드, 문서에 대한 설명, 문서 내 기본 디렉터리 등이        포함됩니다.</p>
    <p>이 문서는 10초 후 저자 카페로 이동합니다.</p>
    <a href="">여기를 클릭하면 기본 디렉터리로 설정된 www.w3.org 사이트로 이동합니다.</a>
    <!-- "" 안에 이동할 주소 넣어줘야 함 -->
</body>
</html>

<head> -> Element(구성요소)

속성 = 속성값

(property) (value)

속성 -> 객체

- 메타 : 눈에 안보이는 것, 내부정보(ex. 파일을 만든 날짜, 만든이, 소스 정보, 10초 후에 창이 바뀌게 설정 등, 포렌식..)

- href : hyper reference -> 하이퍼링크 같은!

ㄴ> defualt 값, 아무것도 하지 않으면 "주소"로 이동하겠다.

<a href> -> anker : 뉴스 앵커가 소식을 전하듯 분배하는 느낌

ㄴ> a태그 -> href 이쪽으로 이동하라. 그러나 ""가 비어있으므로 base href="주소"로 이동한다.

_blank : 새 창

02 HTML5 문서의 작성 규칙

1. HTML5 문서의 작성 규칙

태그 이름은 대소문자를 구분하지 않음

예제 3-3 대소문자 구분 여부 확인하기 ch03/03_01_lowcase.html

<!DOCTYPE html>
<html>
<body>
    HTML5 문서는 소문자로 작성할 것을 권장합니다.
</body>
</html>

ch03/03_02_upcase.html

<!DOCTYPE html>
<HTML>
<BODY>
    HTML5 문서는 소문자로 작성할 것을 권장합니다.
</BODY>
</HTML>

본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리

예제 3-4 공백 테스트하기 ch03/04_space.html

<!DOCTYPE html>
<html>
<head>
    <title>공백처리 문제</title>
</head>
<body>
    HTML5에서는
    엔터, 탭,        스페이스바와 같은
    키보드 값을 인식하지 않습니다.
    <p>HTML5에서는 스페이스바 대신 특수문자를 사용해주세요.</p>
</body>
</html>

<p></p> -> 이걸 통해 문단을 묶어서 줄 바꿈을 해줄 수 있다.

</p> -> 줄바꿈

" " : 이런 띄어쓰기도 적용이 안 됨 -> &nbsp로 한 칸 띄어쓰기를 한다.

태그의 상속 관계를 표현하기 위해 들여 쓰기 적용 -> 들여쓰기를 하지 않으면 가독성이 떨어진다
- (tap 키로 들여 쓰기)

예제 3-5 들여 쓰기를 적용한 문서와 그렇지 않은 문서 작성하기 ch03/05_01_visible.html

<!DOCTYPE html>
<html>
<head>
    <title>잘 정리된 문서</title>
</head>
<body>
    <p>문서의 구조를 명확하게 작성해주세요.</p>
    <p>들여쓰기를 해야 소스코드의 가독성이 높아집니다.</p>
    <p>줄 바꿈도 해주세요.</p>
</body>
</html>

<body> 안에

</body>

ch03/05_02_invisible.htmll

<!DOCTYPE html>
<html>
<head><title>정리가 안 된 문서</title>
</head>
<body>
<p>문서의 구조를 명확하게 작성해주세요.</p>
<p>들여쓰기를 해야 소스코드의 가독성이 높아집니다.</p><p>줄 바꿈도 해주세요.</p>
</body>
</html>

태그의 쌍을 겹치지 않고 완벽히 내포시킴
- 열고 닫고가 있어야 한다 <head> </head>, <p> </p>

예제 3-6 태그 중첩하기 ch03/06_overlap.html

<!DOCTYPE html>
<html>
<head>
    <title>잘못된 태그 중첩 문서
</head>
    </title>
<body>
    <p>태그가 중첩되지 않도록 작성해야 합니다.
</body>
    </p>
</html>

태그 열고 닫는게 잘못 되었다.

종료 태그를 반드시 사용
- 일반적인 표기 형식 : <p>~</p>
- 단축 표기 형식 : <p/> -> 한개로도 가능하다.

예제 3-7 종료 태그 사용하기 ch03/07_endtag.html

<!DOCTYPE html>
<html>
<head>
    <title>종료 태그 작성</title>
</head>
<body>
    HTML5에서는 종료 태그를 사용하도록 권장합니다.
    <p></p>
    태그 사이가 공백이라면 단축형 태그를 사용할 수 있습니다.
    <p/>
    p 태그는 한 줄을 띌 때 사용합니다.
</body>
</html>

<p> -> paragraph : 문단

원래는 <p>글</p> : 이런 식 -> <p/> : 안에 내용 안쓸거고 그냥 줄을 바꿔달라(개행, 새로운 줄로 줄 바꿈)

주석은 ‘’로 끝냄 : 'Ctrl + /' 누르면 됨(대부분의 에디터에서 사용됨)

예제 3-8 주석 작성하기 ch03/08_comment.html

<!-- 작성자 : 홍성용 -->
<!DOCTYPE html>
<html>
<head>
    <!-- 문서의 메타정보를 작성하는 부분입니다. -->
    <title>웹 문서 주석</title>
</head>
<body>
    <!-- 이 문서는 HTML5 웹 표준 문서입니다. -->
    <h1>주석은 소스코드를 설명하거나 불필요한 부분을 일시적으로 사용하지 않기 위해 씁니다.</h1>
</body>
</html>

03 태그의 분류

1. 태그의 분류

미리 정의되어 있는 태그(predefine)
- 사용자가 변경할 수 없으며 사용 용도에 맞게 사용
사용자가 직접 정의하여 사용하는 태그
- 사용자가 태그를 직접 설계하고 HTML 문서에 포함하여 작성

<미리 정의된 태그>

- 구조(Structure) : Head, Body, Title 등 모두 구조에 속한다

- 멀티미디어 : 그림, 표, 동영상, 체크박스 등

<사용자 정의 태그> : 우리는 지금 많이 사용하지 않을 것

- 의미적 태그 : semantic

ex) <emp>홍길동</emp> : 홍길동에 사원이라는 의미를 부여하는 태그를 내가 만들 수 있음

- 비의미적 태그

예제 3-9 미리 정의된 태그로 웹 문서 작성하기 ch03/09_element.html

<!DOCTYPE html>
<html>
<head>
    <title>미리 정의된 태그</title>
</head>
<body>
    <h1>문서의 제목</h1>
    <hr>문서의 구분선</hr>
    <p>단락 구분</p>
    <strong>중요한 문장</strong>
    <br>줄 바꿈
</body>
</html>

미리 정의된 태그(pre define) : 개발자가 만들어 놓은 태그

- h1 > h2 > h3 > h4 > h5 > h6 : 제목, 숫자가 커질 수록 글씨가 작아진다

- hr(horizontal) : 눈에 띄게 보임, 수평 <-> vertical : 수직

- p : 단락 구분, 줄 바꿈 하겠다

- strong : 볼드(진한 글씨) 처리

- br : 단일 태그(닫는 태그 없음)로 줄바꿈 하겠다 -> <p>보다 더 많이 쓴다.

사용자 정의 태그 작성 시 유의점
- 일반적인 의미로 해석할 수 있도록 포함 관계 설정(문법적X, 상식적, 내용)
- 동등 관계로도 설정 가능

(b)는 문법적으로 잘못된 것은 아니나 상식적, 내용적으로 오류

그림 3-4 회사=학교 대등한 관계

예제 3-10 사용자 정의 태그로 웹 문서 작성하기 ch03/10_01_usertag1.html

<!DOCTYPE html>
<html>
<head>
    <title>사용자 정의 태그</title>
</head>
<body>
    <company>한빛아카데미
        <department>영업부</department>
        <department>편집부
            <team>그래픽팀</team>
        </department>
    </company>
</body>
</html>

정해진 것은 아니지만 내용이기 때문에 body에 넣는다.

<company> 같은 사용자 정의 태그들은 보이지는 않고 사이에 적어준 내용만 보인다.

눈에 보이지는 않지만 프로그래밍(JavaScript)에서 의미(내부 속성)를 뽑아낼 수 있다.

ch03/10_02_usertag2.html

<!DOCTYPE html>
<html>
<head>
    <title>사용자 정의 태그</title>
</head>
<body>
    <company>한빛아카데미
        <department>영업부</department>
        <department>편집부
            <team>그래픽팀</team>
        </department>
    </company>
    <p/>
    <university>한국대학교
        <major>컴퓨터과학</major>
        <major>경영정보학</major>
    </university>
</body>
</html>

부모 body - 자식1 Company, 자식2 University

자식1 company는 department(영업부), department(편집부) - team(그래픽팀) 의 부모가 됨

계층, 트리구조

04 태그의 속성

1. 태그의 속성

속성

- 태그의 종속적인 정보를 표현하기 위해 사용

- 태그없이 단독으로 사용할 수 없음 -> 태그에 붙는 것들

- 속성=“값” 형태로 작성

<시작 태그 속성="값:">내용</종료 태그>

글로벌 속성 : 세계적 -> 전국구 느낌(<-> 지역구)

- 모든 태그에 공통적으로 사용 가능한 속성

ex) <a href="naver.com"> -> 지역구 : a 태그에서만 쓰일 수 있다.

태그 속성 속성값 -> href는 항상 태그 a를 바라본다.(종속적)

=> <p href="naver.com">

-> href 태그는 a에 쓰여야 하는데 p에 쓰였으므로 작동되지 않는다.

=> a 태그는 href라는 속성을 가진다(O), width라는 속성을 가진다(X)

미리 정의된 속성

- 특정 태그에만 사용할 수 있도록 미리 정의된 속성

예제 3-11 미리 정의된 속성 사용하기 ch03/11_attr.ht1.html

<!DOCTYPE html>
<html>
<head>
    <title>속성 사용</title>
</head>
<body>
    <h1>미리 정의된 속성을 사용한 사례</h1> <!-- 글자 크기 지정  -->
    <img src="welcome.jpg" border="1" width="200" height="130" alt="Welcome" title="환영합니다!">
    <a href="http://cafe.naver.com/go2web" target="_blank" title="클릭하세요!">저자 카페 방문</a>
</body>
</html>

border : 이미지 테두리

width : 이미지 너비

alt : 설명 -> welcome이며 마우스를 올리면 title 환영합니다!를 띄워준다

클릭하면 _blank 새 창에 href="주소" 주소로 이동한다

사용자 정의 태그에 속성 추가 시 고려할 점(우리는 안할 것)

- 태그와 의미적으로 연관성이 있거나 부가적인 정보를 제공하는 속성인지 확인

- 태그 없이 단독으로 사용할 수 없기 때문에 태그와 관계가 있는지 확인

- 속성값은 대부분 한 가지 값으로 표현하는 것이 일반적

- 데이터 값의 단위가 여러 개일 경우 속성보다는 태그로 정의

- 속성값이 계속 변경되는 경우라면 속성보다는 태그로 정의

- 속성값은 웹 브라우저에 직접적으로 출력되지 않으므로 직접 출력되어야 하는 경우에는 태그로 정의

예제 3-12 사용자 정의 속성 사용하기 ch03/12_userattr.html

<!DOCTYPE html>
<html>
<head>
    <title>사용자 정의 요소</title>
</head>
<body>
    <company location="서울">한빛아카데미<br>  <!-- 의미적으로 서울이라는 것을 나타내고 싶다, 화면에 표시 되지는 않음 -->
        <department title="영업부 멤버 보기">
            <a href="#mem1">영업부</a>         <!-- 여기를 클릭하면 아래 mem1으로 이동함(내부에서 이동) -->
        </department><br>
        <department title="편집부 멤버 보기">
            <a href="#mem2">편집부</a>
        </department>
    </company>
    <p>-</p> <p>-</p>
    <p>-</p> <p>-</p>
    <p>-</p> <p>-</p>
<staff id="mem1">영업부 멤버 이름
        <hr/>
        <member position="과장">박지혜</member>
        <member>홍민성</member>
        <member hidden="hidden">최미래</member>  <!-- hidden으로 숨길 수 있다. 실제 화면에 최미래는 표시되지 않음 -->
    </staff>
    <hr/>
    <p>-</p> <p>-</p>
    <p>-</p> <p>-</p>
    <p>-</p> <p>-</p>
    <staff id="mem2">편집부 멤버 이름
        <hr/>
        <member position="부장">김서울</member>
        <member hidden="hidden">나하늘</member>
        <member>홍현성</member>
    </staff>
    <hr/>
</body>
</html>

company, department, staff, member가 만든 태그

만든 태그의 속성 : location, title, position

미리 정의된 position도 있는데 내가 만든 member 태그에 position이라고 속성 정한 것

=> 미리 정의된 속성보다 내가 만든 속성이 우선이 됨! -> 겹치는 것은 좋지는 않다.

05 웹 문서의 레이아웃

1. 웹 문서의 레이아웃

레이아웃

- 화면을 분할하거나 배열하여 구성하는 것 -> 의미적, 나중에 재배치 하면 된다

ex) <head>는 정해진 것, 1번만 사용 가능한데 <header>, <footer> 등은 여러번 쓸 수 있다.

- HTML5 웹 표준에서는 각 영역을 구분하는 구조적 태그 요소를 정의하여 사용

<footer> : header위에 footer 먼저 여기에 써줘도 된다.

<header>
HTML5 문서의 머리말 영역으로 중요한 정보를 표시
(예 : 사이트의 제목, 로고 등) -> 의미태그

visual한 부분에서 내용을 집어넣는 것

<nav>
내비게이션(navigation) 영역으로 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용

<section> : 내용에 대한 카테고리를 만든다
문서의 영역을 구성할 때 사용. <header>, <article> 태그 등을 포함할 수 있음

- 실제 내용 section 속 <header> ~ <article> ~ <footer>

<article> : 실제 핵심 내용을 넣는 부분
독립된 주요 콘텐츠 영역을 정의. 하나의 <section> 태그 내에 여러 개의 <article> 태그를 구성할 수 있음

<aside>
주요 콘텐츠 이외에 남은 콘텐츠를 표시
(예 : 사이드 바(sidebar) 등).

옆에 데코 느낌 : <nav>. <aside> 광고 다는 느낌 -> 순서는 바뀔 수 있다

header 안에 nav가 들어갈 수도 있고

예제 3-13 구조 태그를 사용하여 웹 문서 작성하기1 ch03/13_layout1.html

<!-- HTML5 문서의 기본 레이아웃  -->
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 기본 구조 태그1</title>
</head>
<body>
    <!-- 헤더 부분 안에 nav를 넣었네? -->
    <header>
        <center>
            <h1>문서의 주제목</h1>
        </center>
        <nav>메뉴1</nav>
        <nav>메뉴2</nav>
    </header>
    <hr/>
 <!-- 본문 부분 : section 안에 article 3개 -->
    <section>
        <article>
            <header>
                <h2>부제목1</h2>
            </header>
            <p>이곳은 부 세션 영역입니다.</p>
        </article>
        <article>
            <header>
                <h2>부제목2</h2>
            </header>
            <p>이곳은 부 세션 영역입니다.</p>
        </article>
        <article>
            <hgroup>
                <h2>대그룹</h2>
                <h3>중그룹</h3>
                <h4>소그룹</h4>
            </hgroup>
        </article>
    </section>
    <!-- 부가 정보 부분 -->
    <aside>
        <h2>부가적 제목</h2>
        <p>이곳은 부가적 정보를 제공하는 공간입니다.</p>
    </aside>
    <hr/>
    <!-- 사이트 정보 부분 -->
    <footer>
        <small>사이트 정보 표시</small>
    </footer>
</body>
</html>

<head>는 title이고

<header>는 주로 <body> 부분에 들어가는데 구분하기 위한 것

의미의 구조를 갖고있는 것으로 재배치가 필요하다

<hr> 요소

- 구분선(horizontal line)을 그을 때 사용

<hr align="center"> -> 중앙 정렬

noshade -> 수평선의 입체감 제거

size -> 아래 위로 두께

width -> 가로 너비

ch03/13_layout2.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 기본 구조 요소2</title> <!-- 구조 : 디자인, 배치 -->
</head>
<body>
    <!-- 헤더 부분 -->
    <header>
        <center>
            <h1>문서의 주제목</h1>
        </center>
        <hr align="center" width=50%></hr>
    </header>
    <!-- 본문 부분 -->
    <section>
        <article>
            <h2>문서 내용1</h2>
            <h3>문서 내용2</h3>
            <h4>문서 내용3</h4>
            <h5>문서 내용4</h5>
            <h6>문서 내용5</h6>
        </article>
    </section>
    <hr size="10" align="left" width=90% noshade="noshade"></hr> <!-- left : 왼쪽부터(생략 가능) -->
    <!-- 사이트 정보 부분 -->
    <footer>
        <small>사이트 정보 표시</small>
    </footer>
</body>
</html>

noshade="noshade"를 제거하면 아래와 같이 나옴

noshade="noshade"를 넣어주면

모듈화가 잘 되어있으면 갈아끼우기 쉽다

header, footer, section, article을 모듈화의 개념으로 만들어 놓은 것

ex) 핸드폰 모듈화가 잘 되어있다? -> 애플 폰은 모듈화가 잘 되어있어서 고장난 부품만 갈아끼우면 됨

그러나 삼성 폰의 경우 모듈화가 잘 안되어 있어서(배터리가 일체형으로 다 붙어있는 등) 고장난 부품만 손쉽게 갈아끼우고 이런게 힘들다

728x90

저작자표시

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

[자바 기초] 15일차 일지 1 - 화면(UI)구현(Ch4. 멀티미디어 태그) (0)	2021.01.05
[자바 기초] 14일차 일지 2 - 화면(UI)구현(Ch4. 기본 태그) (0)	2021.01.04
[자바 기초] 13일차 일지 3 - 화면(UI)구현(Ch.3 HTML5 문서 구조와 작성 규칙, Bracket 브라켓 설치) (0)	2020.12.31
[자바 기초] 13일차 일지 2 - 화면(UI)구현(Ch.2 웹 프로그래밍 실습 환경 구축) (0)	2020.12.31
[자바 기초] 13일차 일지 1 - 화면(UI)구현(Ch.1 웹 프로그래밍의 개요) (0)	2020.12.31

현재글[자바 기초] 14일차 일지 1 - 화면(UI)구현(Ch3. HTML5 문서 구조와 작성 규칙, 예제 실습)

HelloSpring