조컴퓨터

200923 UI 화면 구현 01 - HTML 본문

자바 웹개발자 과정/HTML&CSS

200923 UI 화면 구현 01 - HTML

챠오위 2020. 9. 24. 09:42

화면 구현(User Interface / Frontend)

- HTML

- CSS

 

 

 

 

01_HTML의 기본 문법

 

HTML 기본규칙

- Hyper Text Markup Language

- Interpreter 형식의 언어

  ※ Interpreter 

     프로그램 실행 시간에 한 번에 한 문장씩 변환한다.

     예시) Python, Ruby, HTML

  ※ Compiler

     프로그램 실행 시간 전에 전체 소스 코드를 검사하여 machine code로 변환한다.

     예시) C, C++, Java

 

 

참고) 컴파일러(Compiler)와 인터프리터(Interpreter)의 개념과 차이점

jins-dev.tistory.com/entry/Compiler-%EC%99%80-Interpreter-%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

컴파일러(Compiler) 와 인터프리터(Interpreter) 의 개념과 차이점

프로그램 언어를 해석하고 실행시키는 대표적인 방법으로 Compile 과 Interpret 방식이 있다. Compile 작업은 Compiler 에 의해 실행되고, Interpret 작업은 Interpreter 에 의해 실행되는데..

jins-dev.tistory.com

 

 

- HTML 문법에서 사용하는 명령어 : TAG

- 태그는 대소문자를 구분하지 않는다

- 여는 태그와 닫는 태그로 구성된다

- 엔터(줄바꿈)을 허용하지 않는다

- 공백은 한 칸만 허용한다

 

- HTML로 작성된 문서는 웹브라우저(크롬, IE, Firefox, 사파리, 웨일)에서 출력한다

- HTML4 → Desktop 전용 문법

- HTML5 → Mobile 전용 문법

 

 

 

웹페이지의 구성

- 구조(HTML) + 표현(CSS) + 동작(Javascript / JSP / ASP / PHP)

 

 

참고) w3school.com

www.w3schools.com/

 

W3Schools Online Web Tutorials

HTML Example:

 

www.w3schools.com

 

 

 

 

02_HTML의 기본 구조

 

<!DOCTYPE html>         <!-- HTML5구조 타입 -->
<html lang="ko">        <!-- HTML문서 시작. 한국어 -->
    <head>              <!-- 머리말 -->
        <title></title> <!-- 제목 표시 --> 
    </head>
    <body>              <!-- 본문 -->
        <!-- HTML 주석문 -->
    </body>

</html>                 <!-- 닫는 태그 -->

 

 

 

 

03_글자모양

 

특수문자 입력

- &nbsp;   공백

- &amp;    &

- &lt;        <

- &gt;       >

- &quot;    "

 

 

예제1) 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>03_글자모양.html</title>
    </head>
    <body>
        <!-- 본문 영역 -->
        
        <!-- 줄바꿈 <br> <br/> -->
        서울특별시 종로구 관철동<br>
        코아빌딩 8층<br><br><br>
        솔<br>데<br>스크

        &nbsp; <br>
        &amp; <br>
        &lt; <br>
        &gt; <br>
        &quot; <br>

        자&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;바
        <br> 
        
        <!-- 수평선 -->
        <hr>
        <hr width="50px"> <!-- 절대적 길이 -->
        <hr width="50%">  <!-- 상대적 길이 -->

    </body>
</html>

 

 

- hr       요소 element

- width   속성 property, attribute

 

 

예제2)

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>03_글자모양.html</title>
    </head>
    <body>
        <!-- 본문 영역 -->
        
        <!-- 닫는 태그는 순서에 주의 -->
        <strong><u><i>진하게밑줄기울임</i></u></strong>
        <hr>

        <!-- 글자 크기, 색상 -->
        <!-- 색상 표현 : 이름, 16진수, rgb함수 -->
        <font size="1" color="#ff6347">서울특별시</font>
        <font size="2" color="#9999ff">서울특별시</font>
        <font size="3" color="blue">서울특별시</font>
        <font size="4" color="yellow">서울특별시</font>
        <font size="5" color="pink">서울특별시</font>
        <font size="6" color="hsl(240, 100%, 80%)">서울특별시</font>
        <font size="7" color="rgb(60, 179, 113)">서울특별시</font>

        <!-- 문서를 구조화 -->
        <H1>제주도</H1>
        <H2>제주도</H2>
        <H3>제주도</H3>
        <H4>제주도</H4>
        <H5>제주도</H5>
        <H6>제주도</H6>
        <HR>
        <H1>서울특별시</H1>
            <H2>종로구</H2>
                <H3>인사동</H3>
                <H3>관철동</H3>
            <H2>강남구</H2>
        
        <H1>부산광역시</H1>
                
    </body>
</html>

 

 

 

 

04_이미지

 

이미지 파일의 경로

<img src="경로명+파일명">

<img src='경로명+파일명'/> 여는 태그와 닫는 태그가 한 몸

 

1) 상대 경로 (현재 문서가 저장되어 있는 폴더 기준)

   ../images    상위 폴더 images

   ../../images  상위의 상위 폴더 images

   ./images     현재 폴더 안에서 하위 폴더 images

   images       현재 폴더 안에서 하위 폴더 images

 

2) 절대 경로 (웹에서 홈 디렉토리 root 부터 시작)

   /images

 

※ <img src="이미지주소" alt="대체문자열"> 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>04_이미지.html</title>
    </head>
    <body>
        <img src="../images/images/k7.png">
        <hr>
        <img src='../images/images/k6.png'/>
        <hr>
        <img src='../images/images/k5.png' width='150' height='100'/>
        <hr>
        <img src='../images/images/k5.png' width='150px'/>
        <hr>
        <img src='../images/images/k5.png' width='50%' height='50%'/>
        <hr>
        <img src='../images/images/k5.png' border='2px'/> <!-- 테두리 있음 -->
        <hr>
        <img src='../images/images/k5.png' border='0'/>
        <hr>

    </body>

</html>

 

 

 

 

05_동영상

 

1) Old version : 이 버전은 사용을 지양한다. 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>05_동영상.html</title>
    </head>
    <body>
        <!-- 동영상 .mp4 .avi .mp3 -->

        <embed src="../music/music/crayonpop.mp4">
        <hr>
        <embed src="../music/music/gangnamstyle.mp3">
        <hr>

    </body>
</html>

 

 

2) HTML5 version 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>05_동영상.html</title>
    </head>
    <body>
        <!-- 동영상 .mp4 .avi .mp3 -->

        <!-- 2) HTML5 version -->
        1) 바로 시작
        <audio autoplay controls>
            <source src='../music/music/gangnamstyle.mp3'/>
        </audio>

	2) 바로 시작. 포스터 들어가 있는 버전
        <video width="350" height="300"
               poster="../music/music/crayonpop.jpg"
               autoplay controls>
            <source src='../music/music/crayonpop.mp4'/>
        </audio>

    </body>
</html>

 

 

3) YouTube 동영상 링크

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>05_동영상.html</title>
    </head>
    <body>
        <!-- 동영상 .mp4 .avi .mp3 -->

        <!-- YouTube 동영상 -->
        1)
        <iframe width="420" height="315"
                src="https://www.youtube.com/embed/UJmi6UEERM8">
        </iframe>
		
        2)
        <iframe width="560" height="315" 
                src='https://www.youtube.com/embed/MN4zQp2rny8'>
        </iframe>

    </body>
</html>

 

 

 

 

 

 

'자바 웹개발자 과정 > HTML&CSS' 카테고리의 다른 글

200926 정보처리기사 필기 가채점 결과 합격  (0) 2020.09.26
'자바 웹개발자 과정/HTML&CSS' Related Articles more