본문 바로가기
반응형

Front-end16

Javascript - JSON 데이터 조작하기. (배열과 객체) 1. JSON (JavaScript Object Notation) 이란 JSON의 키-값의 쌍으로 구성된 문자열 형태의 데이터 포맷입니다. 웹이 동작하기 위해서는 클라이언트와 서버 간의 끊임없는 데이터 전송이 필요합니다. 이때 정보를 담아서 주고받을 수 있는 형식 중 하나가 JSON입니다. 아래는 id, name, phone, type, childnode 라는 속성과 그에 대응되는 값으로 구성된 json tree의 예시입니다. var data = [{ "id": 1, "name": "Yong", "phone": "010-0000-0000", "type": "sk", "childnode": [{ "id": 11, "name": "echo", "phone": "010-0000-1111", "type": "k.. 2021. 11. 28.
SASS SASS(Syntactically Awesome Style Sheets)는 css를 확장하여 몇 가지 편의성을 제공하는 스타일시트 언어이다. sass 파일은 .scss로 저장되는데, 이 파일을 css로 컴파일하여 html 문서에 연결해야하는 다소의 불편이 따른다. 사용을 위해서 우선 sass를 설치해야 한다. 1. ubuntu에 sass 설치하기 $ sudo apt-get update $ sudo apt-get install sass 위와 같이 입력하면 sass가 설치된다. 2. 컴파일하기 $ sass name.scss name.css 2-1 자동 컴파일 파일을 수정할 때마다 컴파일을 하는 것은 귀찮고 불편한 일이다. $ sass --watch name.scss:name.css 위와 같이 입력하면 ctr.. 2021. 5. 13.
CSS로 반응형 웹 디자인하기 컴퓨터 화면에 맞추어 제작된 웹사이트를 작은 화면으로 본다면 화면의 모든 요소들이 작아지거나 깨지는 현상으로 인해 가독성이 현저히 떨어지게 된다. 이 문제를 해결하기 위해서는 디바이스 별로 별도의 웹 페이지를 제작할 수도 있지만(Adaptive web design) 화면 크기에 맞추어 자동으로 웹 페이지의 구성이나 배치가 변하도록 할 수도 있다. 이것을 반응형 웹 디자인(Responsive web design)이라고 한다. responsive.css /* media queries 화면이 600px 미만으로 작아지면 배경색을 빨강으로 바꾼다. */ @media (min-width: 600px) { body{ background-color: pink; } } @media (max-width: 599px) {.. 2021. 5. 12.
CSS CSS(Cascading Style Sheets)는 마크업 언어를 꾸미기 위한 언어로 html 등에 사용된다. 폰트를 바꾸거나 배경색을 바꾸는 등 웹페이지의 스타일을 만들어주는 역할을 한다. 사용방법은 세 가지가 있다. 1. inline heading 한 h1 요소에 대해 색상은 초록, 가운데 정렬로 바꿔준다. 요소 하나하나에 직접 속성을 입력하는 방식으로, 중복이 많이 발생할 수 있으며 가독성이 떨어질 수 있다. 2. 이렇게 된다. 2021. 5. 12.
반응형

티스토리툴바