5) 글로 적는 웹개발 공부 - 복습
- WWW(World Wide Web) 에서 웹페이지를 만들기 위한 언어는 HTML 이다.
- 프로토콜은 HTTP 프로토콜이다.
- HTTP프로토콜은 요청 / 응답 프로토콜이다.
- 웹표준이란 구조 / 표현 몇 동작 / 동작 및 제어의 분리다.
- 웹표준에서 구조는 HTML 이 담당하고, 표현 및 동작은 CSS 가 동작 및 제어는 Javascript 가 담당한다.
- 웹표준은 표준에 맞는 요소와 속성을 사용하고 의미에 맞게 마크업해야 한다.
- <h1>, <div>, <span> 이런 것들을 요소라고 한다. 영어로는 element
- <img src="">, <div id=""> 에서 src, id 등은 속성이고 영어로는 attribute
- 제목을 의미하는 요소는 <h1>~<h6> 다.
- 문단을 의미하는 요소는 <p> 이다.
- 순서가 있는 리스트는 <ol> 이다.
- 순서가 없는 리스트는 <ul> 이다.
- 제목과 내용으로 구성된 정의리스트는 <dl> 이다.
- 이미지를 의미하는 요소는 <img> 이다.
- 하이퍼링크는 <a> 이다.
- <ol>, <ul> 의 자식요소는 반드시 <li> 이다.
- <dl> 의 자식요소는 제목을 의미하는 <dt> 와 내용을 의미하는 <dd> 이다.
- <img> 요소는 반드시 src 속성과 alt 속성을 가져야 한다.
- <a> 요소는 반드시 href 속성을 가져야 작동한다.
- 표를 HTML 에서 표현하기 이해서는 <table> 요소를 이용한다.
- table 요소는 구조상 머리부분을 <thead> 요소가, 내용 부분을 <tbody> 요소가, 하단 부분을 <tfoot> 요소가 담당.
- table 에서 한 줄(row)를 의 <tr> 이다.
- table 에서 하나의 데이터 셀을 의미하는 요소는 <td> 이다.
- table 에서 하나의 제목 셀을 의미하는 요소는 <th> 이다.
- 유저가 로그인을 하거나 글을 쓸때 유저가 입력한 정보가 서버(의 특정주소로)로 넘어가야 한다. 바로 이런 데이터를 파라미터(Parameter) 라고 한다.
- 파라미는 이름(Name)과 값(Value) 으로 구성되어 있다.
- 폼안의 input, select, textarea 는 반드시 name 속성을 가지고 있어야 파라미터가 제대로 넘어간다.
- 서버로 넘길 방식은 get 방식과 psot 방식이 있다. (그 외에도 RESTFUL 을 이용하려면 put, delete 도 있다.)
- get 방식은 파라미터가 주소창에 "?id=test&pwd=1234"와 같이 서버로 넘어간다. 이런 문자열을 쿼리스트링(Query String) 이라고 한다.
- post 방식은 HTTP 프로토콜의 body 에 파라미터가 넘어가는 방식으로 주소창에 노출되지 않는다. 또 용량제한이 없어서 글쓰기, 로그인, 회원가입, 파일업로드에 사용된다.
- 유저가 입력한 여러 데이터를 한번에 함께 서버로 넘길때 필요한 요소는 <form> 이다.
- <form> 요소에 입력된 데이터들을 넘길 주소를 작성하려면 action 속성에 작성한다. 또 넘길 방식을 작성하려면 method 속성에 쓴다.
- <form> 요소에는 입력필드를 묶어주는 <fieldset> 요소와 그의 제목을 의미하는 <legend> 요소도 같이 마크업하는 경우가 많다.
- 한 줄 글자 입력필드는 <input> 요소다.
- 선택하는 요소는 <select> 요소다.
- 여러줄의 글을 입력하는 요소는 <textarea> 이다.
- 중복체크가 불가능한 요소는 input type="radio" 이다. 그리고 input 요소의 제목을 의미하는 요소는 label 이다.
- 중복체크가 가능한 요소는 input type="checkbox" 이다.
- 파일을 선택하는 요소는 input type="file" 이다.
- 버튼 요소는 <button> 이다.
- <button> 요소의 type 은 button / sumbit / reset 이 있다.
- 요소는 block-level 과 inline-level 요소로 나뉜다.
- block-level 요소는 컨테이너다. 레이아웃을 담당한다.
- inline-level 요소는 컨텐츠(글자) 다.
- CSS 는 다양한 선택자를 가진다. h1, span 등은 요소선택자다.
- #id, #wrap 등은 id선택자다.
- .box, .shadow, .list_movie 등은 class선택자다.
- '>' 는 자식선택자이다. ' '(한 칸 띄우기) 는 자손선택자다.
- ':' 는 가상클래스선택자다. '::' 는 가상요소선택자다.
- 블록레벨요소는 width 와 height 값을 지정하여 크기를 줄 수 있다.
- 인라인레벨요소는 크기를 지정할 수 없다. 다만 인라인레벨 요소중 대체되는 요소들은 크기를 지정할 수 있다.
*대체된 요소에 대해서 알아보자. img, object, video, button, input, textarea, select
- 강조를 나타내는 요소들은 <em> 과 <strong> 이 있다.
- 글자의 색상을 지정하는 css 속성은 color 속성이다.
- 뒷배경색상을 지정하는 속성은 background-color 속성이다.
- 글자의 크기를 지정할때는 font-size 속성을 작성한다.
- 한 페이지의 내부링크를 만들때는 <a> 요소의 href 속성에 id 를 작성한다.(#을 포함해서)
- 블록레벨의 가장 대표적인 요소로 구역을 의미하는 요소는 <div>다.
- 인라인레벨의 대표적인 요소로 특별히 의미가 없지만 많이 사용되는 요소는 <span> 요소다.
- 아이디(id)는 한 페이지에 똑같은 이름으로 두 개 이상 쓸 수 없다. 즉 고유한 이름이어야 한다.*매우 중요
- 클래스(class)는 한 페이지에 여러개 있어도 되고, 한 요소에 여러개를 지정할 수도 있다.
예) <button class='btn delete'></button>
- 외부 css 를 HTML 에 적용하기 위해서는 <link>요소를 연결한다.
- font-awesome 은 아이콘을 웹폰트로 이용하는 라이브러리다.
- 웹폰트는 서버에서 다운로드 받는 폰트이다. 즉 웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법이다.
- :hover 는 해당 요소에 마우스를 hover 했을때 적용된다.
- 뒷배경색을 적용하는 속성은 background-color 이다.
- 뒷배경이미지를 적용하는 속성은 background-image 이다.
- 뒷배경이미지의 반복을 적용하는 속성은 background-reapeat 이다.
- 뒷배경이미지의 위치를 지정하는 속성은 background-position 이다.
- 글자들이 부모를 기준으로 가운데 정렬 되게 하려면 text-align 속성의 값을 center 로 지정한다.
- 블록레벨안에 글자가 한 줄이 있고, 그 글자들을 수직으로 정렬 하기 위해서는 블록레벨의 height 속성의 값과
line-height 속성의 값을 같게 써주면 된다.
- 부모로부터 벗어난 자식들을 처리하는 속성은 overflow 이다.
- 부모에서 벗어난 자식들을 숨기려면 속성값에 hidden 을 준다.
- 파비콘 설정은 <link> 요소를 이용한다.
- 글자 들여쓰기는 text-indent 속성이다,
- 마우스 커서의 모양을 지정하는 속성은 cursor 이다.
- css 의 변화값을 부드럽게 처리하기 위해서 transition 속성을 적용한다.
- 투명한 뒷배경색을 적용하기 위해서는 rgba() 속성값을 이용한다.
- 요소 전체가 (반) 투명하기 위해서는 opacity 속성을 이용한다.
- 요소에 그림자를 적용하기 위해서 box-shadow 속성을 이용한다.
- 글자에 그림자를 적용하기 위해서는 text-shadow 속성을 이용한다.
- 클릭했을때 적용하는 가상클래스는 active 이다.
- input 등 포커스가 맞을때의 가상클래스는 focus이다
| 포커스(focus) |
|
- 박스의 끝을 둥글게 처리하기 위해서 border-radius 속성을 사용한다.
- transform 속성의 값에는 translate / scale / rotate 등이 있다.
- css의 애니메이션을 만들려면 @keyframes 과 animation 속성을 이용한다.
'개발자의 길 > 글로 적는 웹개발' 카테고리의 다른 글
| 5-3) 글로 적는 웹개발 공부 - 복습 (0) | 2019.09.22 |
|---|---|
| 5-2) 글로 적는 웹개발 공부 - 복습 (0) | 2019.09.18 |
| 4) 글로 적는 웹개발 공부 - 웹(Web) (0) | 2019.09.16 |
| 3-2) 글로 적는 웹개발 공부 - 오라클 디비(Oracle DB) (0) | 2019.09.15 |
| 3) 글로 적는 웹개발 공부 - 오라클디비(OracleDB) (0) | 2019.09.14 |