[CSS] 반응형 웹(viewport, 미디어 쿼리)

1. 반응형 웹 - 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념 반응형 웹의 일반적인 조건 - 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 함 - 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 함 2. 뷰포트(viewport) - 일반적으로 모바일 기기에 적용하기 위해 생성된 개념 - 가상의 윈도우(화면)에 웹 페이지를 렌더링하여 확대/축소/스크롤 등을 하기 위한 가상 렌더링 화면 - 기본적으로 데스크탑 브라우저에서는 viewport를 사용하지 않기 때문에 무시됨 데스트탑(viewport) vs 모바일(viewport) - 데스트탑 : 브라우저 창이 곧 viewpor..

[CSS] CSS Flex(Flexible Box) - Items

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Items 요소의 속성 order Flex Item의 순서를 설정 flex-grow Flex Item의 증가 너비 비율을 설정 align-self 교차 축(cross-axis)에서 아이템의 정렬 방법을 설정 flex flex-grow, flex-shrink.. 축약형 ..... 3. order(row, column) - Flex..

[CSS] CSS Flex(Flexible Box) - Container

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Container 요소의 속성 display 컨테이너를 수직/수평 방향으로 정렬 flex-direction 아이템들의 주축(main-axis) 정렬 방향(수직/수평)을 설정 flex-wrap 아이템들의 줄묶음(줄 바꿈) 설정 justify-content 주축(main-axis)의 정렬 방법을 설정 align-content 교차 ..

[JavaScript] JavaScript HTML template

1. HTML template - 반복적인 HTML 부분을 화면에서는 보이지 않는 template로 만들어 두고 서버에서 전달되는 JSON과 연결하여 반복적인 tag를 만들어 내는 기법 - 즉, 반복적인 HTML 코드를 template에 넣어놓고 JavaScript를 이용해서 받은 데이터로 교체해주고 HTML로 나타내주는 것이다. - 바꾸고 싶은 데이터 부분을 {icon}, {img}, {title} ...로 해준 다음 JavaScript에서 서버에서 받은 데이터(JSON)의 각 데이터로 replace를 해준다. 그런 다음 원하는 태그 쪽에 appendChild() 해주면 된다. - 여기서 그냥 태그를 appendChild를 해주면 여러 개가 적용이 되지 않는다. - 그래서 태그이름.cloneNode(t..

[JavaScript] JavaScript 함수형 프로그래밍

1. 함수형 프로그래밍 Simple is the Best! 즉, 기능 동작을 위해 간단하고, 간결하고, 간소하게 작성하는 방법론 함수형 프로그래밍은 객체지향 프로그래밍과 비교되는 방법론으로 객체지향 프로그래밍에 비해 더 간결하고, 더 예측 가능하고, 더 테스트하기 쉬운 경향이 있다. 단, 이 장점들이 단순히 함수형 프로그래밍이 객체지향 프로그래밍에 비해 더 쉽다는 것은 아니다. 2. 함수형 프로그래밍의 3대 개념 ① 순수 함수(Pure Function) ② 불변성(Immutable state) ③ 1급 객체(First-class) 3. 순수 함수(Pure Function) - 같은 입력 값이라면, 항상 같은 결과 값을 반환한다. - 외부적인 것에 영향을 받지 않는다. - 예측이 가능해야 한다. 4. 불변..

[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제

1. DOM 노드 - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - 브라우저의 문서에 객체(태그)를 의미 2. DOM 노드 읽기 - 노드 읽기 : 문서에 DOM 노드(객체)를 가져와 자바스크립트에서 읽거나 사용 getElementById() 요소에 지정된 id를 통해 객체를 가져옴 getElementsByTagName() 요소에 태그명을 통해 객체를 배열로 가져옴 getElementByName() 요소에 이름을 통해 객체를 배열로 가져옴 getElementByClassName() 요소에 지정된 클래스명을 통해 객체 배열을 ..

[CSS] CSS 애니메이션

1. CSS 애니메이션 - 웹 페이지를 보다 시각적으로 역동적이게 움직이게 하기 위한 스타일 기능 - 이 속성은 블록 요소(Block Element)를 기본으로 하여, 일반적으로 div 블록을 사용 * 애니메이션의 대표적인 속성 transform 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 수행 transition 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 transform과 transition이 짝이고, @keyframe와 animation이 짝이다 @keyframe 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation 키프레임 애니메이션 실행을 위해 CSS에 설정해주는 속성 2. transform / transition transfo..

[CSS] CSS 위치 지정 및 화면 중앙 배치

1. 가로 가운데 정렬 방법 margin 이용 가로 가운데 정렬 방법 margin-left: auto; margin-right: auto; margin: 0 auto; margin: 0 auto 0 auto; text-align 이용 가로 가운데 정렬 방법 - 부모에 스타일 적용해야 함 text-align: center; // left, right 단, 자식 박스는 반드시 display: inline-block; or inline; 여야 한다. position/transform 이용 가로 가운데 정렬 방법(박스 높이를 모를 경우) - 부모에 스타일 적용해야 함 position: relative; left: 50%; transform: translateX(-50%); display flex 가로 가운데 정..

[CSS] CSS float, clear 속성

1. float 속성 - float 사전적 의미는 뜨다, 띄우다, 뜨는 물건, 부유물 이라는 의미이다. - 태그에 플로팅 속성을 준다면, 다른 태그에 영향 없이 왼쪽 또는 오른쪽으로 정렬하여 띄운다는 기본속성을 가짐 - 단, 위 또는 아래에 태그가 있거나 부모 태그가 있다면 예상치 못한 상황이 발생할 수 있는 것에 주목 left 요소를 왼쪽으로 정렬 right 요소를 오른쪽으로 정렬 2. clear 속성 - float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 된다. - 이러한 문제를 해결하기 위해 그 전의 상태로 돌릴 경우 사용한다. both 오른쪽/왼쪽 취소(가장 많이 사용) left 왼쪽 취소 right 오른..

[CSS] CSS 배경 이미지(background-image)

https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com 1. 배경이미지 스타일(background-image) - 웹 화면 또는 박스 모델 등의 배경으로 이미지를 삽입할 때 사용 * 배경 이미지 관련 속성 background-image 이미지를 삽입할 경우 사용 background-s..