프론트 엔드

[HTML] HTML - 7.서식

서식(Formatting)\ HTML에서 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)들을 제공합니다. 1.강조 효과 HTML 문서에 텍스트를 굵게 표시하고 싶다면 태그를 사용하거나 태그를 사용합니다. "볼드체 글씨 부분"은 글씨가 굵은 부분을 나타낸다 "strong 부분"은 중요한 부분을 굵게 표시 태그는 단순히 화면의 텍스트를 굵게 표시하는데 사용하고 태그는 텍스트 자체를 굵게 표현해줄 뿐만 아닌 그 내용이 중요하다는 의미와 함께 포함됩니다. HTML 문서에서 italic체를 표현하고 싶을 때에 태그(italic text)나 태그(emphasized text)를 사용합니다. "이탤릭체 글씨부분"은 단순히 글씨가 이탤릭체인 부분 "em 태그 부분"은 단순히 중요한 부분이라 이탤릭체로 표현 ..

[HTML] HTML - 6.단락

단락(Paragraph) html에서 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미합니다. 이것을 문단이라고도 불리는데 HTML에서는 태그를 이용해서 이러한 단락을 표현합니다. 제목1 제목2 제목3 단락 부분 태그의 위아래 여백은 자동적으로 채워집니다. HTML 띄어쓰기와 줄 나누기 HTML 코드에서 띄어쓰기와 줄 나누기를 여러 번 작성해도 웹 브라우저 상에서는 전혀 영향을 주지 못합니다. 웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식합니다. html에서 띄어스기를 하기위해서는 이렇게 여러번의 띄어쓰기와 줄나누기를 한다. 줄나누기 위 예제는 여러번의 띄어쓰기와 줄 나누기를 표현하기 위해 태그를 사용합니다. 하지만 태그 내에 작성된 여러번의 띄어쓰기와 ..

[HTML] HTML - 5.제목 Title

1.제목(Heading) HTML에서 제목을 표현하기 위해서는 의 태그를 사용합니다. 크기가 가장 큰 부터 태그까지 다양한 크기로 페이지의 제목을 설정할 수 있습니다. 제목1 제목2 제목3 제목4 제목5 제목6 태그는 제목의 표현이라는 기능 외적으로도 중요한 역할을 담당하고 있습니다. 여러 검색엔진에서는 각 웹사이트의 내용을 바로 태그를 사용해 키워드를 수집하며 각각의 내용들을 파악하는 역할을 하고 있습니다. 따라서 HTML 문서에 포함되는 제목을 태그로 작성해야만 검색엔지에 의해 제대로 검색될 확률이 높습니다. 태그에는 항상 종료태그가 포함되어야 한다. 대부분의 웹 브라우저에서는 종료 태그를 포함하지 않아도 HTML 문서를 제대로 표현할 수 있습니다. 종료 태그를 포함해야하나? 그러나 종료 태그가 없다..

[HTML] HTML - 4.HTML 요소 구조

HTML 요소구조 HTML 요소(element)는 여러 속성을 가질 수 있고, 이러한 속성(attribute)는 해당 요소에 대한 추가적인 정보를 제공합니다. 속성에는 HTML 요소 중에서도 언제나 시작 태그 내에서 정의되고, 속성 이름과 속성값(value)로 표현됩니다. 속성의 이름은 항상 소문자로 작성해야한다. HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다. 하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자 형태로 작성하는 것을 권장하고 있습니다. 또한, XHTML에서 속성 이름을 더욱 엄격하게 소문자로만 사용해야 합니다. 속성값은 언제나 따움표를 사용해 감싸야한다. HTML5 표준을 기준으로 속성 값에 따옴표 사용을 강제해야 합니다. 하지만 속성값을 따옴표로 감싸..

[HTML] HTML - 3.HTML 기본 구조

HTML 기본 구조 이번 시간에는 HTML의 기본 구조에 대해 알아보도록 하겠습니다. 제목 크기1 제목 크기2 제목 크기3 : html의 문서유형을 지정해주는 선언문 : HTML 문서의 시작과 끝을 알려주는 태그 : HTML 문서의 메타데이터(metadata)를 정의하는 태그 - 메타데이터(metadata)는 HTML 문서에 대한 정보(data)로 웹 브라우저에는 그려지지 않는 정보를 의미 - 이러한 메타데이터는 , , , , , 등의 태그들을 사용할 수 있다. : HTML 문서의 제목 title을 뜻하며, 다음과 같은 용도로도 사용된다. - 웹 브라우저의 사이트 제목으로도 표시된다. - 웹 브라우저의 즐겨찾기(favorites)에 추가될 시 사용되는 제목 - 검색 엔진의 결과 페이지로도 이 title이..

[HTML] HTML - 2.HTML의 기초

1.HTML이란? HTML이라는 것은 HyperText(비순차적 검색이 가능한 텍스트) Markup (출력) Language (언어) 의 약자로 한마디로 요약하자면 "내가 입력한 텍스트 출력해주는 언어"라고 요약할 수 있습니다. 웹 페이지에서는 HTML문서 (HTML Document)라고도 불리며 각각의 HTML 태그들로 구성되 있습니다. 각각의 HTML 태그들은 웹 페이지의 디자인이나 기능을 결정할때 사용됩니다. 제목크기 1 제목크기 2 제목크기 3 설명1 설명2 2.HTML 태그(tag) HTML 태그는 태그 사이에 꺽쇠 괄호()로 감싸며 표현합니다. // 시작태그 // 종료 태그 HTML 태그는 보통 시작 태그(start tag,opening tag)와 종료 태그(end tag, closing ta..

[HTML] HTML - 1.HTML의 개요

HTML HTML(하이퍼 텍스트 마크업 언어)라는 뜻으로 즉 웹 페이지를 표현하기 위해 개발된 언어로 누구나 쉽게 배울 수 있는 언어입니다. HTML은 1993년에 발표되었고 현 시점으로부터 19년이 된 언어입니다. HTML을 개발한 버너스 리는 1991년 말 처음으로 인터넷에서 문서를 "HTML 태그(HTML tag)로 부르면서 시작되었습니다. HTML은 앞서말한 것처럼 웹 페이지를 표현, 만드는 데 사용되는 언어이며 배울 의지가 있다면 쉽게 배울 수 있습니다. HTML에 대한 모든 태그는 미리 정의되어 있으면서 각각 태그의 속성만을 사용하면 됩니다. HTML의 파일명은 언어의 이름 그대로 .html 입니다. html을 처음 구성하기 위해서는 시작할 수 있는 코드가 존재합니다. html의 첫시작 Git..

[Doker] Docker를 사용한 React 환경 구성

어드민 웹 배포 지금까지는 누가 접근하더라도 문제가 없는 공용 웹만을 개발해 배포했었지만, 어떤 서비스의 어드민을 직접 배포하는 적은 없었습니다. 그렇기에 하나의 서비스를 이용해서 어드민을 직접 배포할 수 있는 Docker를 알아보자는 취지에서 Docker 포스팅을 작성하고자 합니다. Docker를 사용하면 굳이 어드민을 추가하지 않고 Aws처럼 비용을 사용하지않기에 비용을 아끼면서 보안적인 Docker를 선택했습니다. 필요에 따라서 간편하게 run/stop도 할 수 있고.. 로컬환경에서 무언가를 하기에는 가장 적합하다 판단되었습니다. Dockerfile 작성 리액트 환경이 구성되었다면, 해당 프로젝트 환경을 이미지로 도커라이징 하기 위해 도커 파일을 생성해야한다. Docker 컨테이너를 생성하기 위해서..

[React]Supabase를 사용한 Todo앱 빌드하기

정말 오랜 시간끝에 포스팅을 하게되었습니다. 사실 요즘들어서 크게 포스팅할 일이 없어서 글을 쓰지 않았지만 이번에는 Firebase를 대체할 수 있는 것이 있다기에 Supabase 포스팅을 하고자 합니다. 이번 시간에서는 Supabase를 사용해서 ReactTodo 앱을 구축해보겠습니다. 먼저 시작하기전에는 React와 Next.js에 대한 사전적인 지식이 필요합니다. 우리가 구축해볼 앱은 위와 같은 Todo 앱형식의 서비스를 구축해보려 합니다. 다음은 위 서비스에 필요한 필수 사항입니다. React.js Next.js Supabase Chakra UI Vercel 1. Supabase 테이블, 인증 및 스토리지 구성 위 서비스를 구성하기전 먼저 Supabase를 사용해 기능을 구현해보는 시간을 가져보겠..

[Go] GO를 이용해 HTTP Server 만들기

Go를 이용해 HTTP 서버를 만드는 법을 포스팅하고자 합니다. 1.Go HTTP Sever 만들기 http 패키지는 HTTP 클라이언트 및 서버를 구현할때 사용되는 패키지 입니다. HTTP 서버를 만들기 위한 4가지 방법이 있는데 No request Parsing Manual request Parsing Multiplexer Global multiplexer 이 4가지 중에서 Multiplexer(멀티플렉서)를 사용하는가 안하는가에 따라 두가지로 나뉩니다. 1.No request parsing 가장 기본적인 구성 방법입니다. 어떠한 요청이 와도 동일한 응답을 처리해주는 서버입니다. package main import ( "fmt" "net/http" ) type database map[string]st..

[React] StroyBook 도입기

Storybook 이란 ? Storybook은 React에서 컴포넌트 단위의 UI 개발 환경을 지원하는 도구로써 Storybook을 사용하면 실제 웹 어플리케이션의 환경과는 별개로 컴포넌트 UI 개발 진행이 가능합니다. 스토리북(Storybook)의 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 됩니다. Storybook을 React에 적용하는법 먼저 CRA(Create React App)를 이용해서 프로젝트를 하나 생성해주어야 합니다. 우선 웹팩 환경을 구성하지 않고 Storybook을 적용하는 방법입니다. 타입스크립트 기반의 프로젝트를 생..

[CSS,JS] CSS 노트 원고지 만들기

HTML과 CSS JS만을 이용해 노트 원고지를 만들어 보겠습니다. 1.노트 만들기 HTML 코드 이별은 공평하지 않다. 한 사람이 가볍게 생각한 마음을 다른 사람은 선물처럼 끌어 안고 있다. 어떻게든 추억이라는 말로 포장하려고 해도, 세상에서 단 하나밖에 없던 이야기는 또 하나의 흔해 빠진 사랑얘기가 될 뿐이다. 목매달고 애원했던 것들도 세월이 지나면 뭐 그리 대단한 것도 아니다 끊어지고 이어지고 끊어지는 것이 인연인가보다 그 누구도 살아서는 이 세상을 빠져 나갈 수 없다. 따라서 바로 지금 이 순간이 우리가 살고, 보살피고, 나누고, 축하하고 그리고 사랑해야 할 시간이다. 기회는 신선한 음식같은거야. 냉장고에 넣어두면 맛이 떨어져. 젊은이에게 제일 나쁜건 아예 판단을 내리지 않는거야. 우리가 보낸 하..