PUBLISHER W

보이기 toLeft toRight
CONTACT

WEB PUBLISHER

WEB
PUBLISHER

웹 개발 단계에서 전반적인 HTML, CSS, Script 등을
웹 표준, 웹 접근성에 맞게 디자이너가 디자인한 템플릿에 맞추어
홈페이지를 구축하는 직업

웹 퍼블리셔는 HTML, CSS, Java Script를 이용해
코딩을 진행하는 직업이기에 HTML, CSS, Java Script 외에도
웹 표준, 웹 접근성에 대한 기본 지식을 갖추고 있어야 한다.

WEB

World Wide Web

HyperText 기능을 이용한 정보를 웹 브라우저라는 통일된 방법으로 찾아볼 수 있게 한 광역 정보 서비스로 쉽게 말해 인터넷망 자체를 웹이라고 한다.

Time Berners Lee

유럽 입자 물리 연구소(CERN)에서 근무하던 물리학자 팀 버너스 리 (Tim Berners-Lee)가 1989년에 개발했다. 개발초기에는 동료들과 연구자료를 검색하거나 공유하기 위해 개발했으나 더 많은 사람들이 WWW를 자유롭게 이용할 수 있도록 특허 등록을 하지 않았다. 팀 버너스 리는 WWW 뿐만 아니라 HTTP 프로토콜을 제작하고, 웹브라우저로 HTML 문서를 연결하는 방법을 개발해냈다.

웹 표준

웹을 구현하기 위한 표준으로
모든 운영체제와 브라우저에서 항상 동일하게 보여지고 작동해야 한다.

웹 표준의 중요성

웹 표준이 지켜져야 모든 사람들이 자유롭게 웹에 접근할 수 있고,
새로운 브라우저나 제품이 출시 되었을 경우에 혼란을 줄일 수 있다.
또, 콘텐츠와 디자인 제작과 유지 및 보수가 용이하고,
여러 기기와 호환해 사용해도 충돌 없이 사용이 가능하다.

W3C
World Wide Web Consortium

웹의 개발자 팀 버너스리를 중심으로 1994년에 설립된 국제 컨소시엄이다.
다양해지고 있는 하드웨어와 소프트웨어에 대한 요구사항을 충족시키고
웹이 미래에도 지속적으로 이용될 수 있도록 다양한 기술을 개발하고 있다.
대표적으로 HTML과 CSS의 표준을 지정했다.

크로스 브라우징

어느 브라우저에서 웹을 이용해도 동일하게 보여지도록
웹 표준 기술을 이용해 웹을 구성하는 것을 의미하며,
웹 표준을 준수하여 코딩한다면 크로스 브라우징을 이용할 수 있다.
원한다면 CSS를 초기화해 각 브라우저에 맞는 기본값을 정해주거나,
각 브라우저의 버그나 일종의 편법을 사용할 수도 있다.

접근 호환성

크로스 브라우징의 한 개념으로 브라우저 간의 호환성 뿐만 아니라 모든 사용자들에게 높은 접근성을 갖게 웹페이지를 구축하는 것을 뜻한다. 예시로 이미지가 제대로 표시되지 않는 사용자들을 위해 대체 텍스트를 작성하는 것도 접근 호환성을 갖추는 방법이 될 수 있다.

Mark-Up Language

HTML

문단 요소 - 제목
<h1>대제목</h1>
<h2>중제목</h2>
<h3>소제목</h3>
<h4>소소제목</h4>
<h5>소소소제목</h5>
<h6>제목은 블록요소</h6>
문단 요소 - 단락
<p></p>
문단 요소 - 줄 바꿈
<br />
문단 요소 - 구분선
<hr />
그룹화 요소
<div></div>
<span></span>
하이퍼링크
<a href=“#”></a>
이미지
<img src=“경로” alt=“이미지 설명”>
비순서형 목록 ul
<ul></ul>
자식 요소 : <li></li>
순서와 관계없는 목록
순서형 목록 ol
<ol></ol>
자식 요소 : <li></li>
절차적인 목록 표시
정의형 목록 dl
<dl></dl>
자식 요소 : <dt></dt> (용어), <dd></dd> (용어 정의)
정의형 목록 뿐만 아니라 주종관계가 성립되는 콘텐츠에 광범위하게 사용.
텍스트 관련 요소
<strong>강한 강조</strong>
<em>강조</em>
<ins>추가글</ins>
<del>삭제</del>
<sup>윗첨자</sup>
<sub>아랫첨자</sub>
테이블 관련 요소
<table></table>
<tr>행</tr>
<th>제목</th>
<td>내용</td>
<td rowspan="n">으로 세로 셀 병</td>
<td colspan="n">으로 가로 셀 병합</td>

CSS

넓이, 높이
width : 넓이
height : 높이
텍스트 관련
color : 텍스트 색
text-align : 텍스트 정렬
text-decoration : 텍스트 꾸밈 요소
font-size : 폰트 크기
font-weight : 폰트 굵기
font-family : 폰트 설정
font-style : 폰트 스타일 (기울임 등)
line-height : 행간 (높이와 같은 값이면 세로 중앙 정렬)
letter-spacing : 자간
여백
padding : 안쪽 여백
margin : 바깥쪽 여백
display
block - 블록 요소로
inline-block - 내용에 꽉 차게
none - 보이지 않음
position
absolute - 앞 뒤 블록에 영향을 받지 않음
fixed - 고정
relative - 앞 뒤 블록에 영향을 받음
inline-block - 내용에 꽉 차게
none - 보이지 않음
background
-color : 배경 색상
-image : 배경 이미지
-position : 배경 이미지의 위치 설정
-repeat : 배경 이미지의 반복 설정
-size : 배경 이미지의 사이즈 설정
border
border : (외곽선 굵기) (선의 모양) (선 색상)
border-radius : 모서리 둥글게
글씨 안 보이게 하기
font-size: 0;
text-indent: -9999;
color: transparent

Java Script

변수 variable
var 변수 이름 = 변수 값;
값을 담는, 이름을 가진 컨테이너
변수의 데이터 타입
숫자 : Number
문자 : String
불리언 (참, 거짓) : Boolean
오브젝트 : Object
정의되지 않음 : Undefined
값이 없음 : Null
연산자
대입 연산자 : +=, -=, *=, /=, %=
비교 연산자 : ==(값 비교), ===(데이터타입까지 비교), != (같지 않음), <=, >= (부등호)
산술 연산자 : +, -, *, /, %
논리 연산자 : &&(and), ||(or)
조건문
if(조건){조건 성립}else{조건 성립 X}
if(조건){조건1 성립}else if(조건 2){조건2 성립}else{아무 조건도 성립 X}
배열
var arr = [1, 2, 3, 4, 5];
arr[0] = 1, arr[3] = 4
반복문
for(초기문; 조건문; 증감문) {조건문에 해당되는 경우 반복수행}
함수 function
function 함수이름(매개변수) {유효범위}
함수이름(매개변수);로 함수 실행/dd>

HTML 학습 사이트

SiteImage

JUNG WOO MIN

사진
  • 정우민
  • WHAMOOP
  • WOOM
  • 1997. 03. 31
  • 경기도 안성시 중리동
  • 학력
    삼죽초등학교 (2004 ~ 2009)
    안청중학교 (2010 ~ 2012)
    가온고등학교 (2012 ~ 2015)
    계원예술대학교 디지털 미디어 디자인과 (2016 ~)
  • 010 - 4049 - 0334
  • hikpur@naver.com
  • 취미 : 그림그리기/음악 감상/가사 쓰기
  • 특기 : 랩

    SKILL

  • HTML
    85%
    CSS
    80%
    Java Script
    60%
    jQuery
    50%
    PhotoShop
    65%
    Illustrator
    70%
BACK

CONTACT

LOGO

WOOM
I Wanna be One Of Meanings

  • TEL
    010 - 4049 - 0334
  • e-Mail
    hikpur@naver.com

THX FOR WHACHING!