[Javascript] Ajax

Ajax(Asynchronos Javascript And XML) - 자바스크립트를 통해서 서버에 데이터를 요청하는 것 - 새로고침을 할 필요없이 부분 부분만 로딩되므로 속도가 빠름 -비동기식 동기식 / 비동기식 차이 동기식은 대표적인 예로 우리가 웹사이트 로그인을 할 때 아이디와 패스워드를 입력하여 서버로 전송하고 서버로 부터 응답을 받은 후 로그인 성공, 실패 웹페이지로 이동하는 것, 서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는 것을 뜻함. 비동기식은 서버로 데이터를 요청하고 응답이 오는 시간동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후에 작업을 하기때문에, 사용자의 입장에서는 화면 갱신이 없어 편리하고 빠르게 작업을 처리하는 것처럼 느껴짐 GET / POST 차..

• format_list_bulleted programming/javascript & jQuery
• · 2020. 12. 27.
• textsms

[CSS] Flex

1 2 3 div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간. div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것. flex container에 display: flex를 적용하는게 시작. 아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로) 그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷) flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성 row; (기본값) 가로 방향으로 배치 column; 역순으로 가로 배치 row-reverse; 세로 방향으로 배치 column-reverse; 역순으로 세로 배치 flex-wr..

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[CSS] 크리스마스 트리 만들기 수정

며칠전에 css 공부하다 만든 크리스마스 트리.. 캡쳐해놓고 보면 그럴싸하지만.. 창 크기를 조절하면 지멋대로.. 기존 작성한 코드 ○ ★ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 기존 코드에서 container의 width를 지정해주지 않아서 발생한 문제였다. width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!! .container { display: flex; flex-wrap: wrap; text-align: center; width: 900px; }

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[CSS] grid

grid는 flex보다 더 복잡적인 레이아웃 표현이 가능 -flex는 한방향 레이아웃 -grid는 두방향 레이아웃 grid 레이아웃을 만들기 위한 기본적인 HTML구조 A B C D E F G H I grid 설정하기 .container { display: grid; } 행배치 : grid-template-rows 열배치 : grid-template-columns 예) grid-template-columns: 200px 200px 500px; column을 200px, 200px, 500px로 만들겠다는 의미. grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; ※ fr(fraction)은 숫자 비율대로 트랙의 크기를 나눔. 1..

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[HTML] form 이해하기

form태그 속성 action : form이 전송되는 서버 (url 또는 html 링크) name : form의 이름 (서버로 보내질 때 이름의 값으로 데이터 전송) accept-charset : 문자 인코딩 지정 target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정 method : 전송 방법 설정 (get, post) form 내부의 태그와 속성 type : 입력 형식 name : 서버로 전송되는 데이터 이름 : text 입력란 : password 입력란 (입력 내용이 안보임) : 버튼 : form에 입력한 데이터를 서버로 보내주는 버튼 : form에 입력한 모든 데이터 삭제 : 단일선택 : 다중선택 : file 업로드 : 눈에 보이지 않는 정보를 서버쪽으로 보낼 때 사 여러..

• format_list_bulleted programming/html & css
• · 2020. 12. 24.
• textsms

[CSS] inline, block, inline-block

display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 dispaly: inline; 텍스트처럼 dispaly: block; 상자처럼 inline 요소들 , , , - 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감. block 요소들 , - width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감. inline-block속성은 위 두가지의 특징을 모두 가짐, inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능. .box1 { display: inline-block; width: 300px; } .box2 { display: inline-b..

• format_list_bulleted programming/html & css
• · 2020. 12. 24.
• textsms