꺾이지 않는 마음

노마드코더 강의를 수강하다가 Canvas API를 알게되었다. 이 API를 사용하면 마치 한붓그리기 놀이(?) 같은 것을 할 수 있게 해준다. 태그를 만들고(이 태그가 도화지 역할을 한다), 여러 함수를 사용하여 그 안에 그림을 그릴 수 있다. 아래는 canvas api를 이용하여 내가 그린 그림이다. 이렇게 원, 직사각형 등 도형을 그릴 수 있고, 그냥 선을 그을 수도 있다. 색깔도 변경 가능하다. 신기해서 블로그에 복습 겸 정리해놓으려고 한다. ⚙️ 기본 세팅법 1. HTML 파일의 태그 안에 태그를 삽입해준다.(이 태그가 그림을 그릴 도화지이다) 2. js 파일을 하나 만들고 3. js 파일에서 태그를 셀렉터를 통해 선택한 후, getContext("2d") 메소드를 사용하여 그림을 그린다. con..

웹 페이지에 아이콘을 삽입하는 방법에는 여러 가지가 있다. 구글 material-icons를 활용하는 방법도 있고, jpg, png 등 여러 형식의 이미지 파일을 활용하는 방법도 있다. 본 포스팅에서는 그중 웹 디자인 영역에서 가장 각광 받는 SVG 파일을 활용해보고자 한다. 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 개인적으로 학습하면서 이번에 SVG 파일을 아이콘으로 HTML 내에 삽입하게 되었는데, 예전에 사용했던 구글 material-icons 활용 방식 보다 훨씬 편리..

오늘 실무에서 자주 쓰이는 유용한 CSS 스킬을 하나 배웠다! 바로 요소를 영역 내에서 중앙에 고정하는 방법이다. position과 margin, calc() 함수를 사용하면 쉽게 할 수 있다. 순서는 다음과 같다. 1. 중앙 배치할 요소에 position: absolute; 를 주고, 부모 요소에게 position: relative를 준다. (부모 요소 안에서 독립적으로 포지셔닝을 하기 위함) 2. 중앙 배치할 요소에 left: 50%; 를 준다. (부모 영역 가로의 정 중앙 위치에서부터 콘텐츠가 배치된다.) 3. 중앙 배치할 요소에 margin-left: (요소의 가로 길이 / -2); 를 준다. (중앙 배치할 요소도 자체의 가로 길이를 가지기 때문에 2번 과정을 통해 정 중앙에서 요소가 시작되도록..

(블로그를 이전하면서 3~14일차 글이 날아갔음을 알립니다.. 고로 15일차부터 티스토리에 작성) 3주차에는 travel page 만들기를 시작하였다. 애니메이션이나 트랜지션 같은 비교적 복잡한 기능은 넣지 않았고, 기본적인 HTML&CSS 개념을 가지고 간단한 정적 페이지를 만드는 과정이다. 본 과정에서는 문서 HTML 기본 구조 및 스타일링 방법을 익히고, 더 나아가 시멘틱 짜는 연습 + 포지션 속성에 대한 이해가 중점이 되는 것 같다. #1. 시멘틱 태그로 전체 구조 짜기 웹 페이지를 제작할 때 가장 먼저 해야할 것은 시멘틱 요소로 전체 틀을 짜는 것이다. 실질적인 내용이 들어가는 태그 영역 안에서 구조화하며, , , 의 3단 구조가 가장 기초적인 틀이라고 할 수 있다. 이 태그들은 실질적인 의미..

#1 HTML이란? 'Hypertext Markup Language'의 줄임말로, 브라우저 화면 상에 나타나는 내용(콘텐츠)과 구성을 정의하는 데 사용되는 언어이다. #2 HTML의 요소 이해하기 코드 한 줄로 예시를 들어보자, 여기 Hello World 라는 코드가 있다. 앞에 과 맨 뒤 처럼 와 그 감싸져있는 부분을 HTML의 '태그(Tag)'라고 한다. 맨 앞에 놓여 코드의 시작을 알리는 부분을 '열린 태그', 맨 뒤에 놓여 그 코드의 끝을 알리는 를 '닫힌 태그'라고 한다. 닫힌 태그는 안에가 /로 시작한다는 것을 명심하자. 그리고 열린 태그와 닫힌 태그로 둘러쌓인 가운데 부분을 콘텐츠, 즉 '내용'이라고 한다. 이는 실질적으로 브라우저 화면상에 표시할 내용이 무엇인지를 기술하는 부분이다. 마지막..

[CSS] Flex 속성 알아보기 2 - Flex-grow [CSS] Flex 속성 알아보기 1 CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 i-do-dream.tistory.com flex-shrink는 flex-grow와 더불어 유연한 레이아웃을 가능케 하는 중요 속성이다. 지난 포스팅에 이어 이번에는 flex-shrink 속성에 대해 알아보자. #1. flex-shrink flex-grow가 컨테이너 내부 여백을 어떻게 처리할 지에 관한 속성이라면, flex-shrink는 item들이 컨테이너의 영역 크기를 초과했을 때 어떤 비율로 각 요..

#1 '웹개발'이란? 말 그대로 웹페이지를 만드는 것이다. #2 작동원리 우리는 보통 웹 사이트를 방문하기 위해서는 컴퓨터나 노트북으로 브라우저를 이용한다. 브라우저 주소창에 특정 주소를 입력하거나, 포털사이트 검색 결과로 나온 링크를 클릭하면 브라우저가 그 기업의 컴퓨터에 방문하겠다는 요청을 보낸다. 이 요청을 보낼 때 쓰는 표준화된 방식이 'HTTP' 혹은 'HTTPS'(Hypertext Transfer Protocol Secure)이며, 컴퓨터는 사용자에게 보여줄 웹페이지 화면을 나타내는 웹사이트 코드를 브라우저에게 보냄으로써 이에 응답한다. 즉, 웹 개발자란 어떤 코드로,' 어떤 프로그래밍 언어로 응답을 보낼 코드를 작성해야 할까'를 고민하는 것이라고 사람이라고 할 수 있다. 물론, 이건 매우 축..

[CSS] Flex 속성 알아보기 1 CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 않는다. flex와 grid가 훨 i-do-dream.tistory.com 지난 포스트에 이어서 이번에는 Flex items에게 주는 속성들을 정리해 보았다. justify-content, flex-flow, flex-wrap 등이 부모 요소인 Flex container에게 주는 속성이라면, 이번에 정리한 속성은 그 자식 요소인 item들 즉, 정렬되는 요소 자체에게 지정해서 사용하는 속성이다. 예시를 들기 위해 Flex container를 하나 만들어 보았다. ..