bootstrap이란? 프론트엔드 구축을 위한 프레임워크입니다. 여기서 프레임워크란 개발 전 자주 쓰이는 기능들을 미리 개발해놓은 탬플릿이라 생각하시면 됩니다. 사용 방법이 쉽고 코드를 가져다 바로 쓸 수 있어 시간 단축에 용이한 점이 있지만 내가 원하는 대로 커스터마이징이 어려울 수 있고 일반적인 탬플릿을 생각해 보면 정형화된 이미지, 딱 봐도 탬플릿을 사용한 것 같은 느낌을 줄 수 있어 bootstrap만 사용하는 것 보단 bootstrap을 통해 코드를 분석해가며 공부한 뒤 자신만의 코드를 짜 보는 방법이 베스트라 생각합니다. 사용법 1. 먼저 홈페이지에 접속합니다. https://getbootstrap.com Bootstrap The most popular HTML, CSS, and JS libr..

HTML Hyper Text Markup Language 웹문서의 구조를 설명하는 프로그래밍 언어의 한 종류로 여러 태그들로 구성되어 있고 태그를 사용하여 원하는 형태의 문서를 만들 수 있는 구조입니다. HTML 특징 1. 단순한 구조와 쉬운 문법 다른 프로그래밍 언어에 비해 구조와 문법이 쉬운 편이라 수정 및 관리가 용이합니다. 2. 마크업 언어 마크업 언어(Markup Language) : 문서의 중간에 문자나 문장 형태의 명령어를 삽입하는 방식의 문서 표현 언어 마크를 삽입하는 방식으로 파일의 정의하기 때문에 파일 용량이 작아 클라이언트와 서버 간에 빠른 문서 전달이 가능합니다. 3. 일반적인 텍스트 파일 별도의 전용 프로그램이 필요하지 않아 메모장과 같은 편집기도로 수정 후 즉시 적용까지 가능합니..

flex란? 일반적인 웹페이지의 레이아웃을 구성하기 위해서는 display, float, position등을 사용하여 레이아웃을 구축해 왔지만 이와 같은 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 한계에 부딪히곤 했습니다. 이런 문제점을 해결하기 위해 flex가 나타난 것이며 사용 방법은 display: flex;로 해당 요소에 flex를 지정하면 됩니다. 부모 요소에 display: flex; 를 설정하게 되면 그 부모 요소는 플렉스 컨테이너가 되고 자식 요소는 플렉스 아이템으로 인식하게 되므로 flexbox 레이아웃 모듈을 구성할 때는 콘텐츠(플렉스 항목)를 감싸는 부모 요소에 이 속성을 지정해야 합니다. justify-content flex요소들을 가로 선에서 정렬 flex-sta..

CSS animation, @keyframes 을 활용해 위아래로 움직이는 것처럼 보이는 이미지를 만들어보겠습니다. 저는 font awesome의 무료 아이콘을 사용했고 정적인 이미지 파일인 jpg, png 등이나 다른 태그 요소를 활용해도 무관합니다. 아이콘은 아래 링크에서 확인하실 수 있습니다. fontawesome.com Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 먼저 원하는 태그에 class를 생성해줍니다(저는 class명을 icon으로 주었고 뒤에 fas fa-bomb은 아이콘을 불러오기..

JSX란? JavaScript 에 XML 을 추가한 확장형 문법으로 하나의 파일에 JavaScript 와 HTML 을 동시에 작성할 수 있어 편리하다는 장점이 있습니다. 감싸진 요소 컴포넌트에 여러 요소가 있을 때 부모 요소를 사용해 하나로 감싸야 합니다. 아래와 같이 부모 요소 없이 h1, h5 태그로만 이루어져 있다면 실행되지 않고 오류가 발생합니다. import React from 'react'; function App() { return ( 부모 요소가 없을 때 ); } export default App; h1, h5 태그에 부모 요소를 추가하면 출력되는 걸 확인할 수 있습니다. import React from 'react'; function App() { return ( 부모 요소가 있을 때 )..

z-index란? 객체를 원하는 순서대로 배치할 수 있는 기능으로 몇 가지 특성을 가집니다. position 속성이 relatuve 거나 absolute 일 때 동작합니다. 기본값은 auto이며 음수, 양수의 숫자를 사용할 수 있습니다. z-index 의 값인 숫자가 높을 수록 가장 상단(보이는 화면에서 가깝게)에 배치되며 낮을 수록(보이는 화면에서 멀게) 배치됩니다. z-index는 같은 선상에 있는 태그값부터 확인하지만 부모 태그의 z-index가 우선이기 때문에 자식 태그가 z-index 숫자가 크더라도 부모 태그의 값을 우선시합니다. 활용 예제를 알아보기 위해 아래와 같이 3개의 div 에 style 을 부여했습니다. 이 중 두번째, div_2 를 가장 앞으로 나오게 하고 싶을 때 z-index ..