본문 바로가기

프론트엔드

 (7)
[React] #1. React.js란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (Facebook 소프트웨어 엔지니어 jordan walke가 만듬.) React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. - SPA(Single Page Application)을 위한 사용자 인터페이스를 만드는 데 사용된다. - “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. - React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있다. ※ SPA란? Single Page Application의 약자로 웹 사이트의 전체 페이지를 하나의 페이지에서 동적으로 화면을 표현하는 것이다. 사용자가 무언가를 클릭하거나 움직이면 전체가 아닌..
[CSS] 미디어 쿼리(media query) 1. 미디어 쿼리(media query) 화면 해상도나 기기 방향 등을 조절하여 HTML에 스타일을 적용할 수 있으며, 반응형 웹을 만들 때 사용할 수 있다. @media(조건){스타일} - 조건에 사용하는 미디어 속성은 width, height, device-width, device-height, color, color-index, resolution, monochrome, orientation, aspect-ratio, device-aspect-ratio 등이 있다. - 이 중 width를 보면 max와 min을 사용해보면 (min-width: 800px) => 최소 800px 너비부터 스타일을 적용한다는 것이고, (max-width: 800px) => 최대 800px까지 스타일을 적용한다는 것이다...
[CSS] 박스 모델(box model)과 그리드(grid) 1. 박스 모델 박스 모델(box model) - HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다. - 내용(content) 텍스트, 이미지 - 패딩(padding) 내용과 테두리 사이의 간격 - 테두리(border) 내용과 패딩을 감싸는 테두리 - 마진(margin) 테두리와 이웃하는 요소 사이의 간격 예) h1 { font-size:45px; text-align: center; border-bottom:1px solid gray; margin:0; padding:20px; } - block level element 화면 전체 이용 ※ display:inline;을 쓰면 inline element처럼 됨. - inline el..
[JS] #2. 조건문 1. 조건문 조건문은 특정한 조건을 만족했을 때 코드가 실행된다. IF IF문을 보면 조건에 따라 참인 경우, 거짓인 경우의 값으로 나뉜다. IF(조건) {조건이 참일 경우 값} else {조건이 거짓일 경우 값} 예) IF-true 결과↓ => 조건을 true로 놓고, 참(true)일 경우 2, 거짓(false)일 경우 3이 나오는 것이다. 위를 보면 조건(true)에 참인 값, 2가 나오는 것을 알 수 있다.
[JS] #1. JavaScript란? 1. JavaScript란? 객체 기반의 스크립트 프로그래밍 언어로 정적인 html과 달리 사용자와 상호작용할 수 있는 동적인 언어이다. 2. JavaScript Data Type Data Type은 프로그래밍 언어에서 사용할 수 있는 데이터(String, Varible, Boolean, Array 등)의 종류이다. 값이 불변하는 원시 타입(String, Number, Boolean 등)과 참조 타입(객체, 함수 등)으로 나뉜다. - String text, 곧 문자를 나타낼 때 사용한다. 작은 따옴표(‘’)나 큰 따옴표(“”)를 사용해 나타낸다. - Number 숫자를 64비트 부동 소수점 형태로 저장한다. 모든 숫자를 실수로 처리한다. - Boolean True와 False를 나타낸다. - Object..
[CSS] CSS란? 1. CSS란? Cascading Style Sheets의 약자이다. HTML에 시각적 표현(디자인)을 입히는 언어이다. 2. CSS 문법 - 선택자(selector)와 선언부(declaratives)로 나뉜다. - 선택자: 디자인을 입히고 싶은 태그(요소) - 선언부: 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함한다. 중괄호({ })를 사용하여 전체를 두르고 있다. 선언 => {속성명(property) : 속성값(value);} 3. CSS 선택자 - HTML 요소 선택자 .... WEB - 그룹 선택자 여러 선택자에 CSS를 적용할 수 있다. 선택자 간에 쉼표(,)로 구분한다. .... WEB HTML CSS JavaScript - id 선택자 웹 페이지에 포함된 여러 요소 중에서 특정 아이..
[HTML] HTML 정리 1. HTML이란? HTML은 HyperText Markup Language의 약자로 하이퍼텍스트를 가장 중요한 특징으로하는 마크업 형식을 가진 컴퓨터 언어이다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다. 2. HTML 태그 HTML 태그는 꺽쇠 괄호()로 감싸져 있다. (참고) - : 시작 태그 - : 닫히는 태그 예) HTML은 HyperTextMarkupLanguage의 약자이다. 자주 사용하는 HTML 요소 위의 그림을 보면 과 4. HTML 요소 구조 HTML 문서는 Element로 구성되어 있다. 내용 요소 설명 예 태그(tag) 로 감싸져 있는 문자열로 와 로 구성되어 있다. 내용 내용(content) 태그로 둘러싸인 문자열 내용 요소(element) 태그와 내용을..

티스토리툴바