본문 바로가기

전체 글

 (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() 함수의 매개변수 자리에는 계산식이 들어갑니다. 이 때 주의할 것은 '+'와 '-' 연산자를 사용할 경우 반드시 연산자 앞뒤로 공백이 있어야 한다는 점입니다. +와 -는 양의 숫자..

티스토리툴바