빨간색코딩

프론트엔드, 백엔드, 풀스택, html 본문

Web

프론트엔드, 백엔드, 풀스택, html

빨간색소년 2017. 2. 4. 12:13

개발기술에는 다양한 분야가 있다.


먼저, 프론트엔드는 앞단으로 주로 백엔드에서 json형태로 뱉으면 그걸받아서 클라이언트단에 뿌려주는 역할을 한다.

HTML / HTML5: Semantic web

CSS / CSS3: LESS, SASS, Media Queries

JavaScript: jQuery, AngularJS, Knockout, etc.

Compatibility quirks across browsers

Responsive design

AJAX, JSON, XML, WebSocket


백엔드는 서버단이라고 하며, 주로 json으로 만들어 뱉는 거까지 한다. 프론트엔드와 협업할때, 주소를 알려주면 된다

Web servers: Apache, Nginx

Programming language: PHP, Java, C, C#

Database: MySQL, MongoDB, Oracle, HDFS, SQL / JSON in general

Framework: Spring


이외 기술들이다.

Design

Converting website design into front-end code

UI

UX


Mobile Technology

iOS

Android

Hybrid: PhoneGap, Appcelerator


풀스택은 프론트엔드와 백엔드를 모두 다룰줄 아는 개발자를 말한다.


HTML태그


명칭구성내용
html<html>...</html> 
head<head>...</head>머리말
meta<meta... />정보에 대한 정보를 알려줌. 빈태그, self close
title<title>...</title>문서 제목
body<body>...</body>본문
p<p>...</p>Paragraph의 P : 단락, 문단, 절
h1 ~ h6<h1>...</h1>제목, 글자 크기, 요즘은 중요도 우선순. h1은 화사 로고에 많이 표시
hr<hr>단락 구분. 문서의 구분선
주석태그<!-- -->주석
br<br />break, 줄바꿈을 해줄때
div<div>...</div>division의 약자. HTML 문서 영역이나 섹션의 분할을 정의한다.
span<span>...</span>inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다.
table<table>...</table>표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
  • border - 테이블의 선 두께
  • cellpadding - 셀 안쪽 여백
  • cellspacing - 셀과 셀 사이 간격
  • width - 테이블의 넓이
  • summary - 요약, 잘 사용하지 않음
caption<caption>...</caption>summary 역할. css에서 안보이게 함. 스크린리더기에 활용
colgroup<colgroup>...</colgroup>열 그룹. 구조적인 그룹화를 위해 사용됨
col<col...>빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정
thead<thead>...</thead>테이블 헤더 행 그룹
tbody<tbody>...</tbody>테이블 내용 행 그룹
tfoot<tfoot>...</tfoot>테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치
th<th>...</th>셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline요소
tr<tr>...</tr>테이블 내의 한 행을 정의하는 태그. tabel row
td<td>...</td>각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다. inline요소
  • colspan - 가로 행을 합쳐준다.
  • rowspan - 세로 열을 합쳐준다.
  • * 합쳐준 개수만큼 td 항목을 없애줘야 한다.
ol<ol>...</ol>ordered list. 순서가 있다. 앞에 넘버링이 붙는다.
ul<ul>...</ul>unordered list. 순서가 없다. 앞에 기호가 붙는다.
li<li>...</li>list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다.
dl<dl>...</dl>definition list(정의 목록)
dt<dt>...</dt>항목 definition term
dd<dd>...</dd>설명 definition description
a<a href="" target="">daum</a>anchor. 링크 연결. inline요소 
a 태그의 속성
  • href - 목적지, url
  • target - 보여질 위치
    • * target의 속성
    • _blank - 새창
    • _self - 이동
    • _parent - 먼저 띄워진 창
    • _top - 현재 띄워진 가장 최상단에 위치한 창
  • name - a태그의 이름 지정(북마크 역할)
  • title -링크에 대한 설명
  • href - 목적지, url

    • 링크 속성 ":"는 가상 클래스
    • a:link - 방문 안한 곳, 파란색
    • a:visit - 방문 한 곳, 보라색
    • a:hover - 마우스 올렸을 때
    • a:active - 활성화 된 링크, 빨간색
img<img src="" alt="" />이미지 가져오기, inline요소 
이미지 속성
  • src - 경로 지정, 필수 입력
  • alt - 이미지를 위한 대체텍스트를 정의
  • title - 거의 사용하지 않음.
form<form>name="numberJoin" action="aa.html"method="post"</form>입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성 
  • name - 전송될 데이터의 이름. value는 text. 해당 입력양식이 어느 폼에서 만들어졌는지 식별
  • action - 입력된 데이터가 전송될 페이지를 지정. value는 url. 개발자가 주로 정함.
  • method - 입력데이터가 처리될 방식. value는 get(소량) / post(대량). get이 default. 사용은 post로
fieldset<fieldset>...</fieldset>form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
fieldset 요소의 제목은 legend 태그를 사용
legend<legend>...</legend>fieldset에 대한 설명. 여기서의 legend는 설명(caption), 범례의 의미와 가깝다.
label<label>...</label>리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명. 
for 속성 - 라벨에 표시되는 양식폼 요소의 이름을 지정.
input<input.../input>입력 상자. 속성에 type, name, value, checked, maxlength, readonly, disabled
  • name - 필수 입력. 이름지정
  • value - 입력 구성요소의 값을 지정
  • checked - 'checked', 'radio' 일 경우 체크된 상태로 표시하게 함. checked 사용시 name값이 동일해야 함
  • maxlength - 타입 속성이 text, password 일 경우 입력 가능한 최대 문자수를 지정
  • readonly - 타입 속성이 text, password 일 경우, 요소의 값을 수정할 수 없는 읽기 전용으로 지정, 데이터 전송이 가능
  • disabled - 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 한다. 수정 불가능, 데이터 전송 불가능
  • type - 입력 구성 요소의 종류를 지정
    • * type 속성 종류
    • text - 텍스트
    • password - 비밀번호창
    • email - 이메일입력
    • radio - 하나만 선택
    • checkbox - 원하는 만큼 선택
    • file - 파일첨부
    • submit - 폼의 액션페이지로 전송
    • reset - 초기화
    • button - 이벤트 발생, 자바스크립트가 붙는다
    • hidden - 개발자가 이용
textarea<textarea="say" cols="50" rows="5">하고픈 말을 적으세요 </textarea>긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦.
select / option<select name="email"> <option value="1">naver </option>
<option value="2'">daum</option>
<option value="3'">google</option> </select>		선택메뉴(드롭다운 리스트), select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다.
button<button> </button>

버튼생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화필요


'Web' 카테고리의 다른 글

자바스크립트(JavaScript) 공부하자  (0) 2017.03.16
코드카데미 Learn HTML & CSS: Part I  (0) 2017.03.15
마크다운(markdown)  (0) 2017.03.12
CSS 선택자의 우선순위, 명시도 계산법, 박스 모델링  (0) 2017.03.11
CSS 선언방식, 선택자  (0) 2017.03.07
'Web' Related Articles more
Comments