웹 개발 시작과 준비, 웹 퍼블리셔가 하는 일
웹퍼블리서가 하는것은
메뉴구성-jquery, HTML 마크업, css 스타일링, 웹표준성, 웹접근성, javascript
랜더링,, 모두다 해서 업무의 영역을넓혀가는 것이좋다 (정답은 아니고, 역할 이라는 것이 애매함)
웹디자이너
퍼블리셔
개발자
=>웹디자인(많은 부분에서 편집), html마크업, css스타일링, ui개발, 데이터바인딩, 백엔드 개발
디자인을 받아서,
브라우저에서 구현가능한 폰트로 작업이 되었는지,
웹은 주로 문서 -> 텍스트
<웹퍼블리셔라는 말을 만든 이유>
웹퍼블리셔가 되기 위해서는,
html 마크업실력을늘리자 -> 시멘틱 마크업 연습(마크업 언어 = 문서를 태그로 잘 정리해서 화면에 보여주는 것, 궂이 실수했다더라도 화면에서 차이가 없을 수도 있다, 정보를 제대로 전달하기 위함) 문서가 구조화가 되면서 정리가 됨
CSS-셀렉터와 스타일로 나누어 익히자
컨텐츠에 대한 감각을 키우자(화면상에 어떻게 효율적으로 배치하고 구성, 컨텐츠에 대한 이해도가 높을 수록 편리해짐)
웹의 시작
웹의 기본목적 : 한 컴퓨터에서 만든 문서를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것
문서 - 완전히 텍스트 기반
웹클라이언트 <-> 인터넷 <-> 웹서버
웹브라우저
컴파일러
URL
http, https 통신프로토콜 + 가고싶은 사이트의 주소 URL
= http 퀘스트
웹서버
클라이언트 요청에 따라서 ..
웹 어플리케이션 서버, 웹서버
주로 웹서버 정적, 앱서버 백엔드 개발쪽 동적
웹서버쪽은 웹서버 소프트웨어가 있어야 함
결국에는 인터넷 상에서 무언가를 주고받는 서비스가 웹서버
웹 vs 인터넷
웹 =/ 인터넷(www.~)
인터넷 == 도로
도로에서 다니는 차 중 한대의 자동차 == 웹( 다른 서비스도 많다는 것)
인터넷을 통해 웹을 작업 -
FTP
프로토콜은 약속
웹페이지를 구성하는 3요소
html 테크로 구조화된 문서
css 문서 내용에 서식 지정
js interaction
HTML의 기본구조
<html>
<head>
<title>제목</title>
<style>스타일CSS</style>
<script>스타일</script>
</head>
<body>
대부분의 태그는 이곳에서 사용
</body>
</html>자주 사용하는 HTML 태그
글자 관련 태그 : h1~h6, p, b, span, br, ul, ol, li
멀티미디어와 링크 : img, audio, video, a
테이블 : table, tr, th, td
폼양식 : form, input, textarea, button, select, option, label
공간을 만드는 태그 : header, nav, article, section, main, aside, footer
<!DOCTYPE html>
<!--DOCTYPE : 웹 브라우저가 문서를 정확하게 해석할 수 있다록 사용하는html비전 명시
1) DOCTYPE : 웹 브라우저가 문서를 정확하게 해석할 수 있도록 사용하는 html 버전 명시
2) html : HTML문서의 시작과 끝 알림(대소문자를 구분 하지 않지만 DOCTYPE은 대문자)
3) head : 브라우저에서 보이지는 않지만 문서에 필요한 내용 표기
4) meta : 문서내용, 키웓, 작성자, 문자셋
5) title : 탭의 제목(문서 제목)
6) body : 웹 브라우저 화면에서 보이는 내용 작성
-->
<!--heading tag
<h1> : 가장 중요한 제목 ~ <h6> : 가장 덜 중요한 제목
웹페이지 하나당 <h1>은 하나만 사용
태그 수준을 건너뛸 수 없음(<h2> -> <h4> X)
기본 크기 : 16px
h1: 기본 크기의 2배
h2: 1.5배
h3: 1.17배
-->
<!--paragraph tag
<p> : 문단을 만든다. 태그의 앞, 뒤에 자동으로 빈줄
br> : 줄바꿈, 닫는태그 필요 없음-->
<html>
<head><!--본문에 안나옴, 설정값, 자바스크립크 경로 등-->
<title>html 구조연습</title> <!--사용하는 웹브라우저의 제목-->
<meta charset="utf-8"> <!--메타테그, charset은 영어이외의 다른언어들이 웹에서 잘 표기가 되도록 사용하는 것, 깨지지 않게-->
</head>
<body> <!--본문에 주로 나오는 내용-->
<!--h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6-->
<!--h1>경제M</h1>
<h2>경제M</h2>
<h3>억대 연봉에 월요일은 '늦출'...</h3>
<p>가장 입사하고 싶은 게임사 1위 카카오프렌즈,<br>
2위는 엔씨소프트 연복 높고 복지 좋은 곳 선호
</p>
<p>IT업 계발 개발자 연봉 경쟁의 시작은 게임사</p>
<h2>경제M</h2>
<h3>'지산' 뜬다더니...</h3>
<p>[땅집고] 서울에서 직장을 다니는 박모씨..</p-->
<!--글자꾸밈 tag
<strong>, <em> : 강조
<b> : bold 진하게 표시, 적절한게 없을 때 제일 마지막에 선택, 글자를 단순히 굵게 할 때 사용
<span> : 특별한 기능 없음. CSS와 잘 사용, inline 속성(<-> block속성 한문장에 사용안됨 뚝 떨어짐)
공백을 의미 많이 쓰면 많이 멀어짐
-->
가장 입사하고 싶은 게임사 1위 <strong>카카오프렌즈</strong><br>
가장 입사하고 싶은 게임사 1위 <mark>카카오프렌즈</mark><br>
가장 입사하고 싶은 게임사 1위 <em>카카오프렌즈</em><br>
가장 입사하고 싶은 게임사 1위 <b>카카오프렌즈</b><br><br><br>
IT업 계발 <i>개발자 연봉 경쟁</i>의 시작은 게임사<br>
IT업 계발 <del>개발자 연봉 경쟁</del>의 시작은 게임사<br>
IT업 계발 <ins>개발자 연봉 경쟁</ins>의 시작은 게임사<br>
IT업 계발 개발자 연봉 <sub>경쟁</sub>의 시작은 게임사<br>
IT업 계발 개발자 연봉 <sup>경쟁</sup>의 시작은 게임사<br>
IT업 계발 개발자 연봉 <span>경쟁</span>의 시작은 <block>게임사</block><br>
<제목>
제목 & 내용
<br> © ® <!--이미지를 가져 오지 않아도 되서 편리-->
<pre>
여기는
작성한 그대로 내용이
나옵니다.
공백도 다 인식을 합니다.
</pre>
</body>
</html>출력시,
