분류 전체보기
-
[CSS] Font, BackgroundFrontEnd/CSS 2021. 2. 21. 00:16
Background -해당 요소의 배경을 지정한다. 이미지나 색상이 올 수 있다. 설정 가능한 속성은 이쪽: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders -이미지를 사용하고 싶은 경우 background-image: url("파일경로");를 쓴다. 여러 이미지를 겹쳐서 사용할 수도 있다. 먼저 설정한 이미지가 앞으로 온다. 아래의 repeat, size 등은 이미지 별로 지정 가능한데, 쉼표로 구분해야 한다. -이미지가 화면 크기보다 작은 경우 background-repeat를 이용해서 채우기를 할 수 있다. 기본값은 repeat이고 화면에 반복 출력된다. 반복하지 않으려면 no-repeat을 쓴다. 가로나 세로로만 채우고 싶..
-
[CSS] Box Model , Display, Position, floatFrontEnd/CSS 2021. 2. 19. 02:45
BoxModel Box에는 content, padding, border, margin이 있다. -박스 크기는 이렇게 구해진다. 너비: width + left/padding + left/border + left/margin 높이: height + top/bottom padding + top/border + top/bottom margin -값을 따로 정하지 않으면 기본값 auto가 적용된다. (margin에 auto를 주면 브라우저 중앙에 위치하게 된다.) -값을 지정할 경우 px, % 등의 단위를 쓴다. 박스모델 관련 속성은 상속되지 않는다. -top, right, bottom, left가 모두 같다면 margin: 25px; 처럼 한번에 지정해도 된다. -box-sizing 프로퍼티는 content-b..
-
CSS - 선택자, 속성값, Reset CSSFrontEnd/CSS 2021. 2. 17. 17:11
CSS(Cascading Style Sheets)는 HTML 같은 문서를 화면에 어떻게 표현할 것인지를 정의하는 언어다. Rule Set(구문) 위와 같은 구문을 Rule Set 혹은 Rule이라고 부른다. 이런 Rule Set을 모아둔 시트를 Style Sheet라고 부른다. Selector(선택자) CSS 구문에서 스타일을 적용할 HTML element를 선택하는 부분을 Selector라 부른다. -HTML 문서 내의 모든 요소를 선택하고 싶다면 * 키워드를 사용할 수 있다. (head 태그와 html 태그도 포함된다.) -* 키워드를 이용해 상속되지 않는 box-sizing 프로퍼티를 상속시킬 수도 있다. *, *:before, *after { box-sizing: inherit; } -HTML e..
-
HTML 태그 정리FrontEnd/HTML 2021. 2. 17. 15:13
사용자가 데이터를 입력할 수 있는 폼. 입력란, 전송버튼, 체크박스 등이 포함된다. 폼의 input에서 데이터를 입력할 수 있고, 전송 시에 name을 key, value를 값으로 하여 key=value 형태로 전달된다. 전송버튼을 누르면 action에 지정된 URL로 데이터가 전송된다. 전송방식은 Get과 Post가 있고, method에서 지정할 수 있다. 입력 데이터 레이블: 입력 데이터 레이블2 textarea 입력란 기본값 그외에도 input type=""에 들어갈 수 있는 속성에는 여러 가지가 있다. *아래에서 데이터를 박스로 묶는 데 사용한 태그는 , label을 달 때 사용한 태그는 유저에게는 노출되지 않고 데이터 전송시에만 전달되는 데이터인 hidden, 전송버튼을 이미지로 표현하게 해주는..
-
[Node.js + AJAX] 편집 페이지(Author) - 무한 스크롤 / Fetch API생활코딩/WEBn 2021. 2. 14. 21:33
생활코딩 AJAX 강의를 완료하고, 기존에 Node.js로 백엔드를 구현해놓은 코드에 AJAX를 적용해보았다. 가장 큰 차이는 기존에는 MySQL 쿼리문으로 직접 받아왔던 데이터를, fetch API에서는 URL로 받아온다는 것. Node.js의 app 라우팅 부분에 데이터 리턴을 추가해서 프론트의 fetch API와 URL로 소통할 수 있도록 했다. 이쪽을 참조했다: node-js-mysql-how-to-do-the-ajax-call-and-access-the-data-on-server-js 작업하다보니 내용이 길어져서 글을 나누었다. 기본 페이지(Rread): [Javascript - AJAX] Node.js + AJAX - 기본 페이지 편집 페이지(Author): 현재 포스팅 편집 페이지(Creat..
-
[Javascript - AJAX] Node.js + AJAX - 기본 페이지생활코딩/WEBn 2021. 2. 9. 14:10
생활코딩 AJAX 강의를 완료하고, 기존에 Node.js로 백엔드를 구현해놓은 코드에 AJAX를 적용해보았다. 가장 큰 차이는 기존에는 MySQL 쿼리문으로 직접 받아왔던 데이터를, fetch API에서는 URL로 받아온다는 것. Node.js의 app 라우팅 부분에 데이터 리턴을 추가해서 프론트의 fetch API와 URL로 소통할 수 있도록 했다. 이쪽을 참조했다: node-js-mysql-how-to-do-the-ajax-call-and-access-the-data-on-server-js 작업하다보니 내용이 길어져서 글을 나누었다. 기본 페이지(Rread): 현재 포스팅 편집 페이지(AuthorPage): [Javascript - AJAX] Node.js + AJAX - 편집 페이지(Author) ..
-
[JavaScript - Ajax] 개요생활코딩/WEBn 2021. 1. 28. 15:25
Asynchronous Javascript And Xml 웹페이지의 정보를 부분적으로 변경(갱신)하는 기술. 갱신이 필요하지 않은 부분은 재사용함으로써 사용자의 경험을 개선해주고 서버 운영자의 리소스를 절약해준다. 이런 효과를 가지는 웹페이지를 SPA(Single-Page Application)라고 부르기도 한다. SPA의 발전형으로 PWA(Progressive Web Apps)가 있는데, SPA에 offline 동작을 지원하는 어플리케이션을 말한다. Fetch API Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작할 수 있도록 인터페이스를 제공해준다. [MDN] Fetch-API 예제: fetch라는 버튼을 누르면 text.html의 파일을 읽어와서 출력하게 만드는 ..
-
[Gitn] Cherry-pick, Rebase, Pull request생활코딩/Gitn 2021. 1. 27. 18:48
Cherry-pick 특정한 커밋으로 생긴 변화만을 대상 브랜치에 병합하는 작업 master 브랜치와 other 브랜치가 있는 상황에서, other 브랜치의 other1 커밋을 가져오고 싶다면 # git checkout master # git cherry-pick commit-id *conflict 원인과 해결 파일의 같은 부분이 동시에 수정되었을 때 (master의 마지막 커밋과 other의 해당 커밋이 둘다 같은 부분을 수정했을 때) merge시와 똑같이 conflict 부분을 해결하고나서, 파일을 add하고 나면(머지툴을 사용한다면 파일을 수정저장하고나면 add가 완료된다.) 아래처럼 마저 진행을 하면 된다. # git cherry-pick --continue Rebase base(병합할 브랜치들의..