1주차 Web 개발 워크샵 진행
1. 워크샵 진행
>>1회차 워크샵<<
워크샵은 우리 학교 공학관 건물에서 대관을 하여 진행했고, 첫 날이라 그런지 10명 모두 참석해주었다.
9월 30일 7시부터 9시까지 두시간 정도 진행했다.
2. 워크샵 내용
웹 기본 개념
Web이란 무엇인가?
- LAN, MAN, WAN 등
- WWW=World Wide Web
- 프론트 엔드, 백엔드, 서버 등의 개념.
- HTML과 CSS로 이루어져 있음.
HTML
HyperText Markup Language.
HTML의 의미를 설명하고, 기본구성요소(코드를 작성할 때 꼭 써야 하는 내용들, !DOCTYPE 선언과 body 태그 등..)
HTML은 태그로 이루어져 있다는 것을 설명했다.
head, body 나누고 meta 태그에 넣는 내용들.
html의 블록요소, 인라인 요소
태그 이름과, 태그 속성, 내용
주석다는 방법!
<!-- 주석 주석 내용내용 -->
자주 사용하는 태그들
p, span, img, heading, hr, br, a, div, nav ul/ol + li, form+ textarea / select + option / input...
HTML 실습
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>웹 세미나</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<h1>즐거운 요리 시간</h1>
<hr />
<h3>라면</h3>
<p>준비물</p>
<ul>
<li>면</li>
<li>스프</li>
<li>계란<선택사항></li>
</ul>
<p>
냄비를 준비한다. 물을 붓는다. 끓인다. 스프 넣는다. 면을 넣는다. 계란 넣는다. 끝
</p>
<p>
맛있게 먹는다.
</p>
</div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
이런 식으로 간단하게 각자 페이지를 작성해 보도록 했다.
이를 실행시키면
이런 식의 웹페이지를 만들 수 있다.
아주 간단하게 구조를 잡고, 실제로 웹 문서를 만들어보는 데에 의의를 두고 진행했다.
다음 시간에는 css도 배워서 이 코드를 조금 더 예쁘게 꾸며보는 시간을 갖도록 할 것이다.
3. 느낀 점
첫 날이라 그런지 조금 긴장해서 말도 꼬이고 사람들이 질문하니까 갑자기 머리가 새하얘지기도 하고 그랬다.
강의 자료를 만드는데에 생각보다 시간이 많이 걸려서 힘들었다..ㅠㅠ
생각보다 내가 기초가 부족하다는 생각을 많이했고, 동아리선배와 함께 조금씩 준비하기도 하고
저번 학기에 들었던 인터넷 프로그래밍 강의 자료를 참고도 많이 하여 만들었다!
'아기 개발자 > HoC 코드스테이츠' 카테고리의 다른 글
| [Code States] 코드스테이츠 Pre Course '1주차' (0) | 2019.11.01 |
|---|---|
| [HoC] 활동 리포트 '3주차' (0) | 2019.11.01 |
| [HoC] 활동 리포트 '1주차' (0) | 2019.11.01 |
댓글