Post

(인터랙티브 웹 페이지 만들기) Chapter1

Posted
800, "height"=>500}" class="preview-img" alt="Preview Image" w="1200" h="630" >
By Jogyejin 17 min read

UI & UX

  • UI는 User Interface의 약자이며 사용자가 콘텐츠를 직접 접하는 부분 사용자 환경을 의미한다(ex: 바탕화면 아이콘, 모바일 화면 등)
  • UX는 User experience의 약자이며 사용자가 UI를 사용하면서 느낄 수 있는 사용자의 경험을 의미한다(ex: 트리구조의 게시판 접근등 사용성의 전반적인 부분)

HTML, CSS, 자바스크립트란

  • 예로 HTML은 그림의 연필로 그린 도면이고 CSS는 도면에 색칠을 하는것이고 자바스크립트는 해당 그림에 생명을 불어넣어 살아 움직이게 하는것과 같다

웹 개발에 있어서 필요한 도구

  • 웹 브라우저

    웹 페이지를 개발하고 확인하기 위해서는 웹 브라우저라는 프로그램을 필요로 한다 웹 브라우저는 다양하며 현재 Chrome 브라우저가 점유율 최상위를 차지하고 있다

    • Chrome 설치 : https://www.google.co.kr/chrome/
  • 웹 에디터

    웹 개발을 위해 효율적인 코드를 작성 할 수 있도록 도와주는 웹 에디터 (IDE)가 필요하다 종류가 다양하며 대표적으로 Editplus, Notepad++, ATOM Editor, VisualStudio등이 존재한다

    • VisualStudio설치 : https://code.visualstudio.com

태그란

[태그는 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게 분류한 규칙]
부모 태그와 자식 태그 : 태그의 기본 문법은 부모 태그 안에 자식태그가 존재하는 형태이며 Tab으로 들여쓰기를 하여 자식 태그를 분리한다
[Ex]

1
2
3
4
5
6
7

<html> => 부모 태그
    <head> => 자식 태그
    </head> => 자식 태그
    
    <body> => 자식 태그
    </body> => 자식 태그
</html> => 부모 태그

HTML의 기본 구조

HTML의 구성은 문서 타입을 지정해 주는 <!DOCTYPE>, <html>태그로 구성되며 <html> 태그 안에는 다시 <head> 와 <body>태그 영역으로 분리된다

[TCP School 참고] image

<!DOCTYPE html> : 현재 웹 문서가 HTML5 문서임을 명시하는 영역
<html> : HTML 문서의 루트 요소(주요 핵심) 내용을 담고 있는 영역
<head> : HTML 문서의 메타데이터(metadata)를 갖고있는 영역이며 페이지에서 보이지 않는 문서 설정 또는 css, 자바스크립트와 같은 외부 파일을 연결하는 영역이다
<body>: 웹 브라우저에 출력 할 주요 콘텐츠를 갖고있는 영역

시맨틱 태그

HTML에서의 body안에 기본 구조를 형식에 맞게 구현해주는 형식 태그

시맨틱(semantic)이라는 ‘의미의’, ‘의미론적인’라는 뜻을 가진 형용사
즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이되며<header>나 <footer> 같은 태그들이 있다
이 태그들은 이름만 봐도 상단과 하단이라는 것을 알 수 있으며 이렇게 시맨틱 태그의 등장으로 인해 태그만 보고도 문서를 더 쉽게 이해할 수 있게 된다

시맨틱Tag 설명  
<header> 사이트의 머리부분에 사용  
<main> 메인 콘텐츠를 나타내는데 사용  
<section> 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소  
<article> 개별 콘텐츠를 나타내는 요소  
<aside> 좌우측의 사이드 영역  
<footer> 사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분  
<hgroup> 제목과 부제목을 묶어서 나타내는 요소  
<nav> 웹 페이지 메뉴를 만들 때 사용  

시맨틱 태그 예제

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jogyejin의 시맨틱 태그 연습</title>
    <style>
      /* 전체 스타일링 */
      body {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        background-color: skyblue;
      }

      /* 헤더 스타일링 */
      header {
        background-color: #333;
        color: #fff;
        padding: 1em;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      header h1 {
        margin: 0;
      }

      /* 네비게이션 스타일링 */
      nav {
        background-color: orange;
        padding: 0.5em;
      }

      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
      }

      nav li {
        margin-right: 1em;
      }

      nav a {
        color: #333;
        text-decoration: none;
        padding: 0.5em;
      }

      nav a:hover {
        background-color: #333;
        color: #fff;
      }

      /* 메인 스타일링 */
      main {
        display: flex;
        flex-wrap: wrap;
        margin: 1em;
      }

      section {
        margin-right: 1em;
        flex: 1 1 300px;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        margin-bottom: 1em;
        padding: 1em;
      }

      section:last-child {
        margin-right: 0;
      }

      section h2 {
        margin: 0;
      }

      article {
        margin-top: 1em;
      }

      article h3 {
        margin: 0;
      }

      /* 사이드바 스타일링 */
      aside {
        background-color: #fab1a0;
        padding: 1em;
        margin-right: 1em;
        flex: 0 0 300px;
      }

      aside h3 {
        margin: 0;
      }

      /* 바닥글 스타일링 */
      footer {
        background-color: #1abc9c;
        color: #fff;
        padding: 1em;
        text-align: center;
      }

      footer p {
        margin: 0;
        padding: 0.5em;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Jogyejin의 시맨틱 태그 연습</h1>
      <img src="https://i.ibb.co/bb7kRP4/default-avatar.jpg" alt="default-avatar" border="0" width="100">
    </header>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">상품정보</a></li>
        <li><a href="#">내정보</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>상품정보</h2>
        <p>향이 좋은 향초</p>
        <ul>
          <li>라벤더 향초</li>
          <li>파우더 향초</li>
          <li>바디솜 향초</li>
        </ul>
      </section>
      <section>
        <h2>내정보</h2>
        <article>
          <h3>사용자정보</h3>
          <p>ID/PW</p>
        </article>
        <article>
          <h3>배송지주소</h3>
          <p>경기도 성남시</p>
        </article>
      </section>
    </main>
    <aside>
      <h3>광고</h3>
      <p>광고 내용</p>
    </aside>
    <footer>
      <p>상호명</p>
      <p>고객센터 전화번호</p>
    </footer>
  </body>
</html>

시맨틱 태그 예제 출력물

See the Pen 시맨틱 태그 by mon node (@mon-node) on CodePen.

서식태그

서식태그는 단어나 문자의 서식을 결정하며 다양한 태그를 활용하여 가독성을 높일 수 있다

서식태그의 종류

image

서식태그 예제

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!doctype html>
<html> 
    <head>
        <title>서식태그 예제</title>
        <style type=text/css> 
          .leftdiv 
          { 
            background-color:yellow; 
            float: left; 
          } 
          .middlediv 
          { 
            float: left; 
            background-color:gray 
          } 
          .rightdiv 
          { 
            float: left; 
          } 
          div{ 
            padding : 1%; 
            color: black; 
            background-color: 009900; 
            width: 30%; 
            border: solid black; 
          } 
        </style> 
    </head>
    <body>
      <hr>
      <!--제목태그 -->
      <h1>제목 1</h1> 
      <h2>제목 2</h2>
      <h3>제목 3</h3>
      <h4>제목 4</h4>
      <h5>제목 5</h5>
      <h6>제목 6</h6>
      
      <hr>
      
      <!-- 문단태그 -->
      <p style="background-color:powderblue;">p 문단 1</p>
      <p style="background-color:#D2E556;">p 문단 2</p>
   
      <hr>
      
      <!-- 그룹지정태그 -->
      <div class="leftdiv"> 
        <h1>div 1</h1> 
        <p>p 문단 1</p> 
      </div> 

      <div class="middlediv"> 
        <h1>div 2</h1> 
        <p>p 문단 2</p> 
      </div> 

      <div class="rightdiv"> 
        <h1>div 3</h1> 
        <p>p 문단 3</p> 
      </div> 
      
      <!-- 강조 태그 예제 -->      
      <hr>
      <strong>강력한 strong!</strong><br>
      <em>최근에는 안쓰는 em!</em><br>
      <hr>
      
      <!-- a 태그 예제 -->
      <a href="http://www.naver.com">나는야 하이퍼링크(클릭시 네이버이동)</a>
      <hr>
      <!-- 두꺼운 글씨체 태그 -->
      <b>bold text</b>
      <hr>
      
      <!-- span 예제 -->
      <span style="background-color:red">span1</span>
      <span style="background-color:blue">span2</span>
      <span style="background-color:green">span3</span>
      <hr>
      
      <!-- img 태그 -->
      <img src="https://i.ibb.co/bb7kRP4/default-avatar.jpg" alt="이미지 태그" border="0" width="100"/>
      이미지 태그
      
      <hr>
      <!-- 줄바꿈 태그 -->
      고생했어,<br>
      오늘 하루도
        
    </body>
</html>

See the Pen Untitled by mon node (@mon-node) on CodePen.

목록 태그

텍스트나 이미지등을 목록화 및 리스트화하여 카테고리 등을 표현하기 위해 사용되는 태그

목록Tag 설명
<ul>,<li> 순서가 없는 목록(unorder list)을 만들 때 사용
<ol>,<li> 순서가 있는 목록을 만들 때 사용
<dl>,<dt>,<dd> 제목과 설명이 한 쌍인 설명 목록을 만들 때 사용

목록 태그 예제

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

<!DOCTYPE>
<html>
    <head>
    </head>
    <body>
       <ul> <순서가 없는 목록>
           <li>HTML</li>
           <li>CSS</li>
           <li>JAVASCRIPT</li>
           <li>JAVA</li>
           <li>JSP</li>
           <li>ORACLE</li>
       </ul>
       <hr>
       <ol type="A"><순서가 있는 목록>
           <li>variable</li>
           <li>operator</li>
           <li>data type</li>
           <li>control statement</li>
       </ol>
        <hr>
            <정의형 목록>
       <dl>
           <dt>HTML</dt>
           <dd>HyperText Markup Language</dd>
           <dd>웹페이지를 위한 지배적 마크업 언어</dd>
           <dt>JAVA</dt>
           <dd>객체지향 프로그래밍 언어</dd>
           <dd>웹 애플리케이션 등 가장 많이 사용되는 언어</dd>
           <dt>Python</dt>
         <dd> 파이썬(Python)은 1990년 암스테르담의 귀도 반 로섬(Guido Van Rossum)이 개발한 인터프리터 언어</dd>
         </dl>     
    </body>
</html>

See the Pen Untitled by mon node (@mon-node) on CodePen.

폼(Form) 태그

폼은 사용자로부터 데이터를 입력받아 서버로 전송한다 전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 출력한다

input 태그

  • input 태그는 type 속성을 다르게 지정하여 다양하게 사용자로부터 데이터를 입력 받을 수 있다

  • input 태그에서 사용가능한 속성 [TCP School 참고] image

input 예제

See the Pen Untitled by mon node (@mon-node) on CodePen.

멀티미디어 태그

HTML5에서 추가된 멀티미디어 요소인 video와 audio등을 말하며 현재에 웹에서 동영상을 시청하고 음악을 듣는데 지장이 없다고 생각할 수 있다 하지만 각종 플러그인과 ActiveX라는 불편함과 보안위협에 노출되어 있으며 그런 이유로 브라우저 자체에서 동영상을 재생하게끔 멀티미디어 태그가 필요하게 된 것이다

Audio 태그

음악 컨텐츠를 사용하기 위해 구현 가능한 태그

[Audio 태그에서 사용 가능한 파일]

확장자 설명
wav IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식
mp3 대부분의 음원에서 사용되며 Moving Picture Experts Group에 의해 개발됨, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식이다
ogg Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식, 라이센스 없이 무료이므로 게임등에서 많이 사용한다

[Audio 태그에서 사용할 수 있는 속성]

속성 설명
controls 웹 화면에 컨트롤 막대를 표시하고 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있다
autoplay 오디오를 자동 재생한다
loop 오디오를 반복해서 재생한다
muted 오디오는 재생하지만 소리는 자동 음소거된다
preload 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해서 준비한다

Audio 태그 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!--일반 재생-->
[일반 재생]
<br>
<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls></audio>
<hr>
<!--자동 재생-->
[자동 재생]
<br>
<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls autoplay></audio>
<hr>
<!--반복 재생-->
[반복 재생]
<br>
<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls loop></audio>

See the Pen Untitled by mon node (@mon-node) on CodePen.

Video 태그

비디오 컨텐츠를 사용하기 위해 구현 가능한 태그

[video 태그에서 사용 가능한 속성]

속성 설명
controls 영상 컨트롤 막대를 표시하며 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있다
width, height 화면에 표시되는 영상의 크기를 조절한다
autoplay 영상을 자동 재생
loop 영상을 반복해서 재생
muted 영상은 재생하지만 소리는 음소거됨
preload 영상을 재생하기 전에 미디어 파일을 다운로드 함
poster 브라우저나 인터넷 문제등으로 영상을 재생못하는 경우 표시함

video 태그 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!--일반 재생-->
[일반 재생]
<br>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width="300" height="200">
</video>
<hr>
<!--자동 재생-->
[자동 재생]
<br>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="300" controls autoplay>
</video>
<hr>
<!--반복 재생-->
[반복 재생]
<br>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="300" controls loop>
</video>

See the Pen video 태그 by mon node (@mon-node) on CodePen.

###웹

Develop, Javascript
Javascript
This post is licensed under CC BY 4.0 by the author.