프론트엔드, 백엔드, 풀스택, html
개발기술에는 다양한 분야가 있다.
먼저, 프론트엔드는 앞단으로 주로 백엔드에서 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의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
|
| 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요소
|
| 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 태그의 속성
|
| img | <img src="" alt="" /> | 이미지 가져오기, inline요소 이미지 속성
|
| form | <form>name="numberJoin" action="aa.html"method="post"</form> | 입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성
|
| 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
|
| 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초기화필요 |
출처: https://sjh836.tistory.com/18?category=687142 [빨간색코딩]
'기타 정보 > IT 관련 정보|뉴스' 카테고리의 다른 글
| HTTP 구조 (https, request, response, 주요 상태코드) (0) | 2021.03.24 |
|---|---|
| RESTful 아키텍처, 서비스 (0) | 2021.03.23 |
| 개발자가 읽어야할 책 (0) | 2021.03.15 |
| 주요 오픈소스 라이선스에 대한 핵심 설명 (0) | 2020.12.08 |
| IT/용어 POC, Pilot, BMT 란? (0) | 2020.04.02 |
| Oracle, Sun 인수 후 특허 전쟁 시작 (0) | 2018.12.05 |