개발자의 길
-
1) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS2019.09.05
1) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS
- 개발에 필요한 여러가지 기능을 묶어놓은 응용 소프트웨어(일반적으로 프로그램 or 앱이라고 칭함)를
IDE(Integrated Development Environment) 라고 한다.
- WWW(World Wide Web) 은 팀 버너스리(Tim Berners-Lee)가 처음으로 제안하고 만들었다.
- 온라인 논문문서이자 그 문서를 제작하는 언어가 HTML 이다.
이 문서들을 저장하는 컴퓨터를 서버(Server) 라고 하고, 서버와 인터넷으로 연결되어 있으며,
그 논물을 볼 수 있는 컴퓨터를 클라이언트(Client) 라고 한다. 또한 클라이언트 컴퓨터에 설치
되어 있어야 하며, HTML 문서를 볼 수 있는 응용 소프트웨어(프로그램 or 앱)을 브라우저(Browser)
라고 한다.
- HTML은 www를 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어이다.
- 웹개발은 크게 서버의 백엔드(Back-end) 개발과 클라이언트의 프론트엔트(Front-end) 개발로 나뉜다.
- 주석(Comment) 이란 프로그래밍에 있어 내용을 메모하는 목적으로 쓰인다.
즉 다른 개발자나 미래의 자기 자신에게 설명할 것을 적어 놓는다.
주석을 적절하게 사용하는 습관을 들여야 나중에 협업, 코드 리뷰등에 편리하며, 훌륭한 개발자의
기본요건이라고 말할 수 있다.
- <!-- --> 는 HTML 주석이다.
- 하이퍼텍스트(Hypertext) 는 하이퍼링크(Hyperlink) 를 통해 한 문서에서 다른 문서로 즉시 접근 할 수
있는 텍스트이다.
- 마크업(Markup) 은 <xxxx> 이런 모양의 태그(tag) 를 이용하여 문서나 데이터의 구조를 명기하는 언어다.
- HTML 은 처음에 단순히 논문정도의 내용만 담았다. 그래서 단지 제목, 문단, 표, 이미지, 리스트 등
기본적인 구조 및 내용만 개발되었다. 하지만 점차 대중적으로 널리 사용되었고, 점점 더 많은 사람들이
다양한 기능 및 디자인을 원하게 되어, 새로운 언어 및 기술 CSS, Javacript 등의 기술과 함께 사용되었다.
이렇게 HTML / CSS / Javascript 로 나눠서 개발하는 것이 웹표준이다.
- 개발시 편리함을 위해서 구조 / 표현 및 동작 / 동작 및 제어를 나누어 개발
- 프론트엔드 개발에서 구조와 데이터를 담당하는 건 HTML 이다.
- 표현(동작) 담당은 CSS 이다.
- 동작 및 제어 담당은 Javascript 이다.
■ HTML
- <html> / <h1> 처럼 이런걸 요소(element)라고 한다.
- html 의 자식 요소는 <head> 와 <body> 로 구성
- 브라우저는 <head> 요소의 내용을 먼저 읽은 후 <body>를 렌더링한다.
- <html lang="ko"> , <div id="xx"> 에서 lang 과 id 등을 속성(Attrubute)이라고 한다.
- 속성은 이름(name) 과 값(value) 로 구성된다.
- 제목을 의미하는 요소는 <h1>~<h6> 이다.
- 문단을 의미하는 요소는 <p> 이다.
- 줄바꿈을 하고 싶을때는 <br> 요소를 마크업한다.
- 순서가 있는 리스트(목록)을 의미하는 요소는 <ol> 이다.
- 순서가 없는 리스트는 <ul> 이다.
- 제목과 내용으로 구성된 정의리스트는 <dl< 이다.
- <ol> 과 <ul> 의 자식요소는 반드시 <li> 이다.
- dl 의 자식요소는 제목을 의미하는 <dt> 와 내용을 의미하는 <dd> 이다.
- 이미지를 의미하는 요소는 <img> 이다.
- 하이퍼링크의 요소는 <a> 이다.
- img 요소는 반드시 <img src="" alt=""/> src 속성과 alt 속성을 가져아 한다.
*<img> 요소 안에 있는 src , alt 를 속성이라고 한다.
- 이미지의 자원경로를 쓰는 속성은 src 이다.
- 이미지가 서버에서 다운로드 되지 않았을때 대체텍스트를 쓰는 속성은 alt 속성이다.
- <a> 요소는 반드시 <a href=""/> 처럼 href 속성을 가져야 작동한다.
- 표를 HTML 에서 표현하기 위해서는 <table> 요소를 이용한다.
- <table> 요소는 구조상 머리부분을 <thead> 요소가, 내용 부분을 <tbody> 요소가,
하단 부분을 <tfoot> 요소가 담당한다.
- <table> 요소의 제목을 의미하는 요소는 <caption> 이다.
- <table> 요소에서 하나의 셀을 의미하는 요소는 <td> 이다.
- <table> 요소에서 하나의 제목 셀을 의미하는 요소는 <th> 이다.
- 유저가 로그인을 하거나 글을 쓸때 유저가 입력한 정보가 서버(의 특정 주소로)로
넘어가야 한다. 바로 이런 데이터를 파라미터(parameter) 라고 한다.
- 유저가 입력한 데이터를 서버로 넘길때 필요한 요소는 <form> 이다.
- <form> 요소에 입력된 데이터들을 넘길 주소를 작성하려면 <form action=""> 처럼
action 속성에 작성한다. 또 넘길 방식을 작성하려면 <form action="" method=""> 처럼
method 속성에 쓴다.
- 서버로 넘길 방식은 GET 방식과 POST 방식이 있다. ( 그외에도 RESTFUL 을 이용하려면
PUT과 DELETE 등도 있다.)
- GET 방식은 파라미터가 주소창에 "?id=test&pwd=1234"와 같이 서버로 넘어간다.
이런 문자열을 쿼리스트링(Query String) 이라고 한다.
- POST 방식은 HTTP 프로토콜의 body 에 파라미터가 넘어가는 방식으로 주소창에
노출되지 않는다. 또 용량제한이 없어서 글쓰기, 로그인, 회원가입, 파일업로드등에 사용한다.
- <form> 요소에는 입력필드를 묶어주는 <fieldset> 요소와 그의 제목을 의미하는 <legend>
요소도 같이 마크업하는 경우가 많다.
- 한 줄 글자 입력필드는 <input> 요소다.
- 회원가입시 자주 보는 년월일을 선택하는 요소를 <select> 라고 한다.
- <select> 의 자식요소들은 <option> 요소이다.
- 여러줄의 글을 입력하는 요소는 <textarea> 요소다.
- 중복체크가 불가능한 요소는 <input type="radio"> 이다.
그리고 <input> 요소의 제목을 의미하는 요소는 <label> 이다.
- 중복체크가 가능한 요소는 <input type="checkbox"> 이다.
- 파일을 선택하는 요소는 <input type="file"> 이다.
- 숨거진 <input> 요소는 <input type="hidden"> 이다.
- 버튼을 만드는 요소는 <button> 이다.
- 마크업을 할때는 최대한 의미에 맞게 해야 한다.
- 폼에서 submit 할때 파라미터가 넘어가기 위해서는 <input> , <select> , <textarea> 에
name 속성을 반드시 써야 파라미터가 넘어간다.
<input name=""> , <select name=""> , <textarea name="">
- 개발자가 입력한 글자를 그대로 표혀하는 요소로 빈공백도 그대로 표현되는 요소는
<pre> 이다.
- 외부 CSS 를 불러오거나 파비콘을 지정하려면 <link> 요소를 사용한다.
- <link> 요소는 HTML 과의 관계를 지정하는 <link rel="" href=""> rel 속성과 링크될 자원의
주소를 지정하는 href 속성이 있다.
- font awesome 라이브러리는 폰트를 이용하여 아이콘을 사용하는 방법이다.
사용법은 <i> 요소에 class 속성으로 'fa' 와 우리가 필요한 모양의 'fa-xxxxx' 를 찾아서 지정한다.
- CSS 를 HTML 내부에서 사용하려면 <style> 요소를 <head> 의 자식요소로 마크업한 후 코딩하면
된다.
- #facebook 을 CSS 에서는 id선택자 라고 한다.
- 글자의 색상을 지정하는 CSS 속성은 color 이다.
'개발자의 길 > 글로 적는 웹개발' 카테고리의 다른 글
| 2-2) 글로 적는 웹개발 공부 - 자바(Java) (0) | 2019.09.08 |
|---|---|
| 2) 글로 적는 웹개발 공부 - 자바(Java) (0) | 2019.09.08 |
| 1-4) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS, Javascript (0) | 2019.09.07 |
| 1-3) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS (0) | 2019.09.06 |
| 1-2) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS (0) | 2019.09.06 |