이것저것

[HTML5] 기본부터 한글적용 | 이미지 삽입 | 테이블 만들기 본문

코딩코딩/HTML5

[HTML5] 기본부터 한글적용 | 이미지 삽입 | 테이블 만들기

곰태태 2020. 4. 22. 17:46
반응형
SMALL

인터넷은 많은 기능들을 포함하고 있고 웹은 인터넷 서비스 중 하나이다.

 

웹브라우저의 종류는 인터넷익스플로어(Internet Explorer), 크롬(Chrom), 오페라(Opera), 파이어폭스(Firefox), 사파리(Safari) 등이 있다. 5가지 정도는 알아주면 좋다.

 

프로토콜 : 통신규약, 통신을 하기위한 서로 간의 약속을 의미

서버 주소 : IP 주소

포트번호는 영어로 항구(Port)를 의미한다.

80번 항구로 오세요 라는 뜻이 80번 포트를 열어준다 라는 의미랑 같다.

 

현재 쓰고있는 버전은 HTML5이다.

 

html 책을 이용해서 공부할 때는 초반 부분은 글의 설명을 읽기보다는 예제만 해보고 실행이 된다면 넘어가는 게 좋다.

<>는 태그라고 한다.

시작 태그 끝 태그(<~...>~~... </~>)가 있거나 단톡 태그(<....~/>)로 쓰이는 2가지 경우가 있다.

 

html은 자동 탭이 되지 않지만 해주는 편이 나중에 코드가 길어졌을 때 보기 편하다.

 

html에서 주석 처리하는 법은 주석 처리할 코드를 드래 그 한 후에 Ctrl+Shift+/ 를 누르면 주석처리가 된다.

html에서 주석은 <!--  -->로 이루어진다.

주석으로 백업 데이터를 생성할 때는 역으로 위에서부터 현재 코드 1-3, 1-2, 1-1 순으로 저장되게 해 주는 게 나중에 편의상 좋다.

실습은 eclipse에서 jsp로 작업하였습니다.

 

jsp와 html에 한글을 적용시키는 방법
jsp와 html 둘 다 한글을 지원하지 않기 때문에 한글을 쓸 경우에 글자가 깨지게 된다.
그래서 html과 jsp 둘 다 <head>와 <title> 사이에 <meta charset = "utf-8"> 을 추가해줘야 한다.
추가로 jsp는 맨 윗줄에
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
부분이 있는데
여기서 EUC-KR 부분을 모두 utf-8로 수정해 주면 웹 페이지에 한글을 적용시킬 수 있다.

<>안에 /가 없는 태그는 모두 끝 태그를 적어줘야 하는 태그이다.

 

<h1> : 글자 크기를 정하는 태그이다. 크기는 1이 가장 크고 숫자가 커질수록 글자 크기는 작아진다.

<h1 title="타이틀입니다"> 라고 작성하면 h1에 작성한 글 자위로 마우스를 올리면 "타이틀입니다" 라는 말이 뜬다.

<p> : 단락을 나눠주는 태그이다. 작성 창에서 엔터와 스페이스 텝 모두 스페이스로 적용된다. 

<hr/> : 수평선을 그어주는 태그이다. 단독 태그이어서 /를 쓰지 않아도 되지만 권장사항이다. 

<br/> : 엔터와 같은 태그이다.

그럼 굳이 <p> 태그를 쓸 필요가 없을 것 같지만 다른 사람이 코드를 볼 때 줄 바꿈 <br>인지 단락의 변경 <p>인지 알 수 있도록 하기 위해서 쓰인다.

tip : <를 표현하고 싶을 때는 &lt; >를 표현할 때는 &gt; 라고 적어주면 출력 가능하다. 빈칸은 &nbsp; 로 나타낸다.

위와 같이 문자나 기호를 표시하는 코드를 엔터티라고 한다.

<pre> : 개발자가 의도한 모양대로 출력을 하기 위해서 쓰인다. 탭, 엔터 모두 개발자가 작성한 의도대로 출력

 

<div> : 구역을 설정할 때 사용한다.

1
2
3
4
<div style = "background-color : skyblue; padding:200px; margin:30px;">
    안녕 <span style="color:white">무궁화 꽃</span>이야
</div>
 
  

div에 style = "background-color:색상(영어로);" 를 입력해줘서 배경색을 입혀준다.

style 안에 padding:200px; 은 div의 크기를 설정해준다. padding을 적지 않으면 글자 크기만큼만 배경색이 입혀진다.

margin:30px은 div를 30px만큼 빈 공간을 만들어준다.

span은 글자에 색을 입히는 것이기 때문에 줄 바꿈은 하지 않고 같은 라인에 써준다.

이미지 출력

 

웹브라우저에 가장 최적화된 이미지 파일은 png이기 때문에 png파일을 다운받아 주는 게 좋다.

이미지 파일은 따로 저장하는 게 좋기 때문에 WebContent에 new->file을 생성해서 image 폴더를 생성해 준다.

생성한 image 폴더에 다운받은 이미지를 끌어오면 복사가 된다.

1
<img src = "image/dog.png" width = "300" height="200" alt="사진없음">
  

위와 같이 코드를 입력하면 이미지가 출력되는 것을 확인할 수 있다.

width는 이미지의 가로 크기, height는 이미지의 세로 크기이다.

alt는 사진이 경로에 없어 액박이 뜰 경우에 텍스트를 출력해준다.

리스트 만들기

 

<ol type ="A"> ol은 타입을 순서가 있는 과정을 나열할 때 사용하며 type을 지정해주지 않으면 1부터 순서대로 출력해준다.

<ul> 순서가 없는 리스트를 출력해준다.

<li>는 ol과 ul안에 리스트를 하나 생성할 때마다 입력해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h2>달고나커피 만들기</h2>
<hr />
<ol>
    <li>마트에간다</li>
    <ul>
        <li>블랙커피 가루를 산다</li>
        <li>우유를 산다</li>
        <li>설탕을 산다</li>
    </ul>
    <li>집에간다</li>
    <li>큰 그릇을 준비한다</li>
    <li>커피가루 설탕 뜨거운물을 1:1:1로 넣어준다</li>
    <li>한방향으로 마구마구 돌려준다</li>
    <li>색깔이 달고나색이 될때까지 젓는다</li>
    <ol type = "A">
        <li>컵을 준비한다</li>
        <li>우유를 3분의 2 따른다</li>
        <li>준비된 달고나(?)를 천천히 올려준다</li>
    </ol>
    <li>사진을 찍는다</li>
    <li>우유랑 섞어주고 마시면 끝!</li>
</ol>
  

표 만들기 <table>

 

<table border = "1"> table을 만들어주는 태그이고 border는 테두리를 만들어주는 명령어이다.

<thead>,<tbody>,<tfoot>은 표의 머리, 몸통, 다리를 뜻하며 코드에 순서가 섞여있어도 표는 head, body, foot 순으로 출력된다.

<tr> : 가로 열을 뜻한다

<td> : 세로 열을 뜻한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<table border = "1">
    <caption>강아지의 특징</caption>
    <thead>
        <tr>
            <td>종류</td>
            <td>털</td>
            <td>크기</td>
            <td>사진</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>푸들</td>
            <td>곱슬곱슬</td>
            <td>크기는 다양하다</td>
            <td><img src="image/pudle.png" width="300" height="200"></td>
        </tr>
        <tr>
            <td>비숑</td>
            <td>살짝 곱슬</td>
            <td>대략 50cm</td>
            <td><img src="image/bi.png" width="300" height="200"></td>
        </tr>
        <tr>
            <td>말티즈</td>
            <td>직모</td>
            <td>대략 30cm</td>
            <td><img src="image/marti.png" width="300" height="200"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>결과</td>
            <td>푸들</td>
            <td>갠취입니다</td>
            <td>귀욤귀욤</td>
        </tr>
    </tfoot>
</table>
 
  

 

구글에 테이블 제너레이터라고 한글로 치게 되면 제일 위에

https://www.tablesgenerator.com/html_tables 사이트를 찾을 수 있다.

 

HTML Tables generator -- TablesGenerator.com

↧ Expand ↧↥ Collapse ↥ Result (click "Generate" to refresh) Copy to clipboard Copy to clipboard   Preview Close [X] Select table theme Please, compose a theme for your table by selecting color, border and stripes themes shown below.

www.tablesgenerator.com

위 사이트는 테이블을 만들어주는 웹 애플리케이션이다.

table에 대한 개념을 이해하고 연습한 뒤에 나중에 사용할 때는 웹 애플리케이션을 참조해서 표를 만들 수 있다.

사이트에서 테이블을 그대로 만들어 쓰기보다는 참조를 해서 테이블 만들 때 사용하는 것이 도움된다.

 

 

반응형
LIST

'코딩코딩 > HTML5' 카테고리의 다른 글

[HTML5]CSS 스타일 시트  (0) 2020.04.24
[HTML5] form 형식  (0) 2020.04.23
[HTML] HTML5의 시멘틱 태그  (0) 2020.04.23
[HTML5] 하이퍼링크 | 앵커 | 파일 다운로드 | 미디어 삽입  (0) 2020.04.23
'코딩코딩/HTML5' Related Articles more
Comments