front-side16 비동기 처리방법 3가지 [공부한 자료] https://youtu.be/TAyLeIj1hMc -> JavaScript - callback https://youtu.be/Sn0ublt7CWM -> JavaScript - Promise https://youtu.be/1z5bU-CTVsQ -> JavaScript - async & await JS의 문법은 '비동기 처리'와 관련이 있다는 글을 정말 많이 보았다. '비동기 처리'란 브라우저를 지원하는 js의 언어 특성상, 코드를 실행하다 중간에 시간이 걸리더라도, 브라우저에 응답을 띄워야 하기 때문에 시간이 걸리는 부분에서 기다리지 않고 다음 코드를 실행하는 js의 문법 특성이다. 비동기 처리 웹 브라우저와 서버는 서로 즉각적으로 통신해야 한다. 그러므로 만약에 js 언어로 통신하던 중.. 2022. 4. 5. Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법 [생활코딩 CSS 강의 중 마지막 - Semantic UI 부분] 참고한 사이트: 1. 자바스크립트가 필요한 컴포넌트의 사용법 - Semantic UI (opentutorials.org) 2. Dropdown | Semantic UI (semantic-ui.com) 1. 라이브러리의 개념 library란, 무언가를 만들 때 공통적으로 많이 사용되는 것들을 한데 모아서, 재사용하기 쉽게 만들어 놓은 것. 여기에서는 라이브러리로 Semantic UI와 Bootstrap를 소개했다. Semantic UI (semantic-ui.com) 이 사이트의 모든 요소가 Semantic UI로 만들어졌다. Semantic UI Shipping Choose your shipping options semantic-ui.co.. 2021. 5. 31. 10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor) 1. 코드 경량화(= minify 하기) : 꼭 필요한 작업은 아님. 웹사이트의 규모가 크거나, 방문자가 많은 경우에 효과 있는 처리. 경량화 하는 방법도 여러 가지가 있음! 1. HTML/CSS editor에 코드 경량화(code minifier) 프로그램 설치하기 나는 Bracket editor을 사용했다. 다른 editor에도 이와 비슷한 경로로 경량화를 할 수 있을 것이다! => JS CSS Minifier 를 설치한다. * 이때, 경량화 할 코드가 들어있는 파일은 CSS 형태의 파일로 저장한다! b/c html이 확장자인 파일에 minify를 적용하면 아무 일도 일어나지 않는다! 해당 파일을 열어 놓은 상태에서, [편집]-[Minify]를 누르면 => 기존파일명.min.css 라는 파일이 새로 .. 2021. 5. 18. 9. 그래픽 fin ~ 유지보수-link와 import 그래픽 5) SVG : 직접적인 그래픽과 상관은 없지만, SVG파일도 CSS에서 효과를 주는 대상이기 때문에 있는 챕터. 1. SVG파일이란? Vector file로, 기존의 bitmap 이미지와 비교할 때 차이가 있다. bitmap : 작은 점으로 이미지를 표현. 확대하면 계단 효과 등 깨짐 발생 -> png vector : 이미지를 선과 점의 연결로 표현. 확대해도 깨짐 발생 X -> svg 2. SVG / PNG 파일 다운받아서 CSS에 불러 오기 1. SVG / PNG 이미지 다운받기: thenounproject.com/ 여기서 이미지 아이콘 무료 다운로드 가능! 2. 태그를 사용해서 나타낸다. 확장자만 다르다. SVG:Vector PNG:Bitmap 전혀 차이 없는 두 개의 이미지가 만들어지지만.. 2021. 4. 13. 8. 그래픽 1. 배경(background) 1) 배경의 세부 속성들(순서대로) 1. background-color : 색깔 2. background-image : 특정 이미지를 배경에 적용할 때. background-image : url("이미지 경로.확장자") 3. background-repeat : 배경 이미지의 경우, 바둑판식으로 반복될지를 결정하는 속성 1. : no-repeat : 이미지 반복 안 함 2. : repeat-x : 가로 방향으로만 반복나열 3. : repeat-y : 세로 방향으로만 반복나열 4. : repeat[기본값] : 가로 세로 반복(바둑판식) 4. background-attachment : 배경이미지가 화면에 어떻게 붙어 있을지를 결정함 1. scroll[기본값] : 화면 스크롤하면.. 2021. 4. 12. 7. 레이아웃 1. flex의 기타 속성들 정리 : 모든 내용은 Flexbox playground (codepen.io)를 참고했다. [1] 전체 element에 적용되는 속성 1) flex-wrap flex의 기본 설정 : 같은 row/column에 배정된 컨텐츠의 총 너비/높이의 합이 컨테이너 전체의 너비/높이의 합보다 크다면(높이가 지정된 경우), flex-direction 이 설정된 경우 그냥 한 row/column에 컨텐츠를 나타낸다. flex-wrap에는 3가지 값이 있다 1. flex-wrap : nowrap => 기본값. KSY HTML CSS JavaScript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum del.. 2021. 4. 7. 이전 1 2 3 다음
