post-thumbnail

CSS로 말풍선 모달 만들기

그동안의 모달창은 그냥 네모난 직사각형 정사각형으로 만들면 되었는데..이번엔 말풍선 모양처럼 꼬리를 붙여서 띄워주는 형태의 모달창을 만들어야 했다. 세모모양으로 만들어내야 하는데 이걸 css로 어떻게 구현해야 될 지 모르겠어서 여러 서치를 통해 방법을 찾아냈다!!근데

어제
·
0개의 댓글
·

svg와 png 이미지 파일의 차이

프로젝트를 진행하면서 이미지 파일을 저장할때마다 어떤 형식으로 저장해야 될 지 고민이 될 때가 있다. 그래서 기본적으로 png나 jpg 위주로 사용을 했었는데 가끔 다른 사이트에 들어가서 찾아보면 svg 파일을 사용한 곳들이 많아서 각자 어떤 상황에 따라서 png나 s

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

React-LifeCycle

리액트는 MVC 패턴 중 view에 해당하는 라이브러리이다. 그러다 보니 각각의 컴포넌트는 생명주기인 '라이프 사이클'이 존재한다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이 난다.이 생명주기는 컴포넌트가

2022년 6월 5일
·
0개의 댓글
·

고수준 언어에서 프로그램 실행까지

1950년대 말, 1960년대 초에 컴퓨터가 프로그래머를 대신해서 더 많은 일을 수행하게 되는 또 다른 움직임이 일어났는데, 바로 특정 프로세서에 독립적인 고수준 프로그래밍 언어의 개발이다. 고수준 언어 고수준 언어를 쓰면 사람이 표현하는 방식에 가까운 용어로 계산과

2022년 6월 2일
·
0개의 댓글
·

서버리스란?

서버리스 라는 단어만 보면 서버가 없다 라고 생각할 수 있는데 정확히는 서버를 직접 관리할 필요가 없는 아키텍처를 뜻한다. 그래서 서버리스 아키텍처라고도 불린다.Baas(Backend as a Service) BaaS는 백엔드 개발에 필요한 여러 기능을 API로 제공하

2022년 5월 29일
·
0개의 댓글
·

DOM이란?

Dom이란 Document Object Model의 약자로 문서 객체 모델이란 뜻이다. 문서 객체란 무엇인가? 문서 객체란 html 태그들, 즉 element 요소들을 javascript가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 한다. > 한마디로 DO

2022년 5월 29일
·
0개의 댓글
·

프로세서는 무조건 빠른게 좋을까?

오늘날 사용되는 실제 프로세서는 '성능'을 중심으로 세부 사항이 복잡하게 구성되어있다. 그리고 이 프로세서는 인출,해석,실행 사이클을 계속 반복 수행한다. 인출 메모리에서 처리할 명령어를 인출한다. 해석 가져온 명령어를 해석한다. 명령어가 무슨 일을 하는지 파악하고

2022년 5월 25일
·
0개의 댓글
·

JavaScript의 ES란?

ES는 ECMA Script의 약자이다. 자바스크립트는 1990년대 넷스케이프사의 브렌던 아이크(Brendan Eich)라는 사람에 의해 최초 개발 되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재했는데, 이 두 스크립트가 다 제각

2022년 5월 22일
·
0개의 댓글
·

JavaScript의 특성

느슨한 타입(loosely typed)의 동적(dynamic) 언어자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능하다.JavaScript 형변환자바스크립트에는 '암시적형변환'과 '명시적형변환'이 있다.\-암시적 형변환

2022년 5월 20일
·
0개의 댓글
·
post-thumbnail

01. WIL (5/9 ~ 5/12)

항해의 첫주가 지나고 쓰는 WIL 되시겠다...!5월 9일을 시작으로 4일동안 미니 프로젝트를 진행했다.프로젝트로 만들고자 했던건 '산넘고 산넘어' 프로젝트!! 등산을 사랑하는 사람들을 위한 소셜미디어 페이지를 만들어 보았는데..첫날부터 코드 짜려니 쉽지 않았는데 4일

2022년 5월 17일
·
0개의 댓글
·

Function 2.

💁 함수가 자기 자신을 호출하는 것을 재귀호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위,즉 재귀 호출을 수행하는 함수를 말한다.💁 재귀 함수는 반복되는 동작을 위해 사용한다.메모이제이션재귀함수는 함수를 호출하고 값을 반환하면 결과값이 사라지기 때문에 효율성

2021년 12월 2일
·
0개의 댓글
·
post-thumbnail

Function 1.

함수란 JavaScrip트에서 가장 중요한 개념으로서, 입력(input)을 받아 출력(output)을 내보내는 과정이라고 할 수 있다.기본적이 함수의 형태 구조 👉 function(){};여기에 함수명과 parameter, 반환값, argument, 함수호출을 포함해

2021년 12월 2일
·
0개의 댓글
·
post-thumbnail

실검에 오르는 테스트 만들기!

🔍 Bootstrap은 트위터에서 시작된 jQuery 기반의 오픈 소스 웹 프레임워크로 모바일 우선으로 만들어져 반응협 웹을 개발할 때 사용하기 좋다.Bootstrap을 사용하면 css의 여러 기능들을 가져다 편리하게 사용 가능하다.오늘의 css는 bootstrap을

2021년 11월 17일
·
0개의 댓글
·
post-thumbnail

WIL- CSS [Grid]

grid도 flex처럼 layout을 만들 때 사용하다.grid또한 display:grid로 설정해주면 된다.flex는 한 방향 레이아웃 시스템인 1차원적인 레이아웃이고grid는 행(row)+열(column) 두 방향 레이아웃인 2차원적인 레이아웃이다.이 행과 열은 각

2021년 11월 8일
·
0개의 댓글
·
post-thumbnail

WIL- CSS[Flex]

flex는 정렬이나 공간을 구분해서 레이아웃을 만들 수 있는 '레이아웃 배치 전용' 기능으로 사용되는 요소이다.1\. display의 속성으로 display:flex; 이렇게 작성한다.2\. flex는 block의 성질을 가지고 있으며, 부모 요소인 container와

2021년 11월 7일
·
0개의 댓글
·
post-thumbnail

WIL- CSS [Float]

☝️ float이란 '둥둥뜨다'의 뜻을 가지고 있으며 normalflow를 벗어나 객체를 둥둥 띄워서 정렬시키는 특징이 있다.☝️ float은 아래의 이미지처럼 텍스트 배치 용도였지만, float:left, float:right을 이용해 왼쪽 오른쪽으로 정렬이 용이해서

2021년 11월 7일
·
0개의 댓글
·
post-thumbnail

WIL-CSS [Position]

💡 position은 '위치'란 뜻으로 요소들의 위치를 지정해주는 속성이다.이 속성을 이용해 페이지의 레이아웃을 결정할 수 있다.1\. Static & relative & absolute 💡 static은 position의 기본값이다. 기본적으로 특정한 positi

2021년 11월 6일
·
0개의 댓글
·
post-thumbnail

WIL-CSS[가변단위]

💁 오늘은 가변단위인 em과 %의 개념에 대해서 알게되었다.그전에는 가변단위를 활용할 줄 몰라서 고정단위인 px단위만 사용했었는데가변단위를 알면 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 만들어줘서 반응협 웹 만들기에 좋다는 사

2021년 11월 6일
·
0개의 댓글
·
post-thumbnail

WIL-가상클래스 선택자 & 가상요소 선택자

가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다.구조 가상 클래스:first-child 첫 번째 자식 요소 :nth-child(n) 상위 요소의 n번째 자식 요소:last-las

2021년 11월 6일
·
0개의 댓글
·
post-thumbnail

WIL-HTML(Sementic Tag)

시맨틱은 "의미의, 의미론적인"이라는 뜻이다.

2021년 11월 6일
·
0개의 댓글
·