본문 바로가기

분류 전체보기

 (31)
웹 요소 가운데로 배치하기 방법1) 웹 요소의 너비(width) 값을 안다면 요소의 width 값을 지정했다면 좌우의 마진을 auto로 지정해서 가로로 중앙에 배치할 수 있습니다. 단, 이 방법은 width 값을 기준으로 하기 때문에 가로 방향으로만 중앙 정렬합니다. 방법 2) 요소의 너비(width) 값을 모른다면 가로로 중앙에 배치하려면 부모 요소의 50% 위치로 옮겼다가 (시작점이 50% 위치가 됨) 다시 요소 너비의 반을 왼쪽으로 이동시킵니다. 그림으로 보면 이런 형태가 되겠죠. 같은 방법으로 세로로 가운데 배치할 수 있습니다. #wrapper { width: 600px; height: 200px; position: relative; /* 부모 요소에 position: relative 포함 */ border: 1px sol..
자바스크립트 라이브러리와 프레임워크, 어떤 순서로 공부할까 모던 웹 개발에서 Javascript는 빼놓을 수 없는 프로그래밍 언어입니다. HTML과 CSS는 웹의 기본이기 때문에, 이미 공부했다고 치고~^^ 자바스크립트를 어떤 순서로 공부해 나가야할지 정리해 보았습니다. 시작은 Javascript부터 JavaScript: 웹 개발의 기본이 되는 프로그래밍 언어이며 다른 모든 주제를 이해하는 데 필수적입니다. JavaScript는 프런트엔드와 백엔드 개발 모두에 사용됩니다. JavaScript, 특히 ES6+ 기능에 대한 탄탄한 이해가 필요합니다. 프런트엔드 개발 프런트엔드 개발에는 Angular를 비롯해 Vue.js 같은 다양한 라이브러리와 프레임워크들이 있습니다. 현재 가장 많이 사용하는 React를 기준으로 설명합니다. React: 사용자 인터페이스, 특히 ..
[공유] ChatGPT, 넌 누구냐? 요즘 ChatGPT가 정말 핫하죠? 이미 써 본 분들도 있을거고, 들어보긴 했지만 아직 접해보지 않은 분도 있을 겁니다. 대화형 인공지능이라서 이것저것 물어보고 대답하는 과정이 재미있긴 했지만 이것을 어디에 어떻게 활용해야 할지 난감했습니다. 그래서 이것저것 정보를 찾아보던 중, 쉽게 ChatGPT를 설명한 강의가 있어서 공유합니다. 내용도 어렵지 않고, 여러 가지 생각할 거리를 던져주는 영상입니다. https://www.youtube.com/watch?v=-5S8yHHsaHQ
계산식을 사용하는 CSS 함수 - min(), max(), clamp() min() 함수, max() 함수 괄호 안의 값이나 계산식을 비교해서 작은 값이나 큰 값을 적용합니다. 예를 들어, box의 크기를 500px과 50% 를 비교해서 작은 값을 선택하거나 큰 값을 선택하도록 할 수 있습니다. .box1 { width: min(500px, 50%); } .box2 { width: max(500px, 50%); } 위 소스를 사용했을 때, 화면 너비가 1600px 이라면 .box1과 .box2의 너비는 어떻게 될까요? .box1은 500px과 50%(=800px) 중 작은 값이므로 너비가 500px이 되고, .box2는 500px과 50%(=800px)중 큰 값이므로 너비가 800px이 됩니다. clamp() 함수 반응형 웹이 일반화되면서 화면 크기에 반응하기 위한 CSS 기..
계산식을 사용하는 CSS 함수 - calc() 최근에는 CSS에서 속성 값을 지정할 때 특정한 값이 아니라 계산식을 사용할 수도 있습니다. +, -, *, / 를 계산한 결과가 속성 값이 되는 것이죠. 예를 들어, 다음 소스는 요소의 너비를 부모 요소 너비 전체에서 200px을 뺀 만큼 지정하는 것입니다. 반응형으로 동작해서, 부모 요소의 너비가 얼마가 되든 무조건 200px을 뺀 나머지 크기를 너비로 사용하죠. 웹 화면에서 왼쪽에 200px 너비만큼 내비게이션이 있을 경우 사용하면 되겠죠? .element { width: calc(100% - 200px); } calc() 함수의 매개변수 자리에는 계산식이 들어갑니다. 이 때 주의할 것은 '+'와 '-' 연산자를 사용할 경우 반드시 연산자 앞뒤로 공백이 있어야 한다는 점입니다. +와 -는 양의 숫자..
캔버스 기본 도형 그리기 - 사각형 외 캔버스에서 사각형을 제외한 삼각형이나 원 같은 도형들은 별도의 메서드를 제공하지 않고 경로 그리기를 이용해 도형을 그립니다. 경로를 이용해 도형을 그릴 경우 다음과 같은 단계를 거칩니다. ① beginPath() 메서드를 이용해 경로가 시작됨을 알립니다. ② 직선이든, 호든 원하는 경로를 그립니다. 경로를 그리는 메서드는 캔버스 API에서 제공하고 있습니다. 경로에 따라 사용하는 메서드가 달라지겠죠? ③ closePath() 메서드를 이용해서 경로 시작점부터 끝나는 점까지 선을 그립니다. 이 메서드는 옵션 사항이기 때문에, 도형을 채울 경우에는 이 메서드를 사용하지 않아도 됩니다. ④ stroke() 메서드로 테두리를 그리거나 fill() 메서드로 도형을 채웁니다. 경로를 만들 때 사용하는 메서드 beg..
[캔버스] 기본 도형 그리기 canvas는 웹에서 직접 그림을 그리거나 표시할 수 있도록 HTML5에 도입된 그래픽 요소로, 자바스크립트 프로그램을 통해 무엇인가를 그리거나 색상을 칠할 수 있습니다. 이렇게 웹 상에 그림을 그릴 수 있게 해주는 기능들은 Canvas API에 모두 모여 있죠. 태그 태그는 웹 페이지에서 그래픽을 제어할 수 있는 캔버스 영역을 지정합니다. 캔버스 영역에서는 그림을 그릴 수 있을 뿐 아니라 이미지나 동영상을 불러와서 조작할 수도 있습니다. 태그만 사용하면 브라우저에서 기본으로 지정한 크기만큼 만들어지고, width와 height 속성을 사용하면 캔버스 크기를 직접 지정할 수 있습니다 크기를 지정하지 않을 때 크기를 지정했을 때 400*300 화면 전체를 캔버스로 사용하기 화면 전체를 캔버스로 사용하려면 ..
좌우로 왔다갔다 하는 CSS 애니메이션 1. CSS 애니메이션 만들기 CSS에서 기본 애니메이션을 만들려면 @keyframes 규칙을 사용하여 애니메이션을 정의한 다음 animation 속성을 사용하여 요소에 적용합니다. 다음은 box 요소를 왼쪽에서 오른쪽으로 이동시키는 간단한 애니메이션의 예입니다. /* 애니메이션 정의하기 */ @keyframes move-right { 0% { left: 0; } 100% { left: calc(100% - 50px); } } @keyframes move-left { 0% { left: calc(100% - 50px); } 100% { left: 0; } } /* 애니메이션 적용하기 */ .box { width: 50px; height: 50px; background-color: red; position..
2023년부터는 나이가 줄어든다? - 만 나이 계산하기 외국의 나이 계산 방식과 우리 나라의 나이 계산 방식이 달라서, 그 동안 우리는 '세는 나이'와 '만 나이'를 따로 계산했었습니다. '세는 나이'는 태어나면서부터 1살이 되고 다음에 1월1일이 되면 1살씩 증가시키는 방법으로, 지금까지 우리가 사용하던 방법입니다. 현재 연도에서 태어난 연도를 뺀 후 1을 더해서 계산했었죠. 반면 '만 나이'는 출생 직후 0살에서 시작해 생년월일을 기점으로 1년이 지날 때마다 1살씩 늘어나는 방법입니다. 공공 기관 서류에 나이를 적거나 미성년/성년을 따질 때도 이 만나이를 사용합니다. 그리고 만 나이는 대부분의 국가에서 통용되는 나이 계산법이죠. 2023년 6월부터는 '세는 나이'를 없애고 '만 나이'를 사용하게 됩니다. 누군가는 그 날부터 나이가 2살 줄어든다고도 하고,..
박스 모델 테두리에 이미지 넣기 박스 모델 테두리에 이미지를 넣기 위해서는 사용할 이미지를 지정하고, 그 이미지를 필요한만큼 쪼개서 가져와야 합니다. 여기서 중요한 것은 원본 이미지를 어떻게 나눌까, 하는 것입니다. 관련된 속성을 하나씩 살펴보면서 어떻게 적용되는지 살펴보죠. border-images-source 속성 박스 모델 테두리에 어떤 이미지를 넣을지 지정합니다. 만일 테두리 이미지를 가져오지 못할 경우를 대비해서 일반적인 테두리 스타일도 작성해야 합니다. 기본값은 none입니다. .box { width:300px; height: 300px; background-color: #eee; border: 36px solid orange; border-image-source : url('images/border.png’); } bord..

티스토리툴바