웹122 변수의 개념과 사용법, 자료형 정리 변수의 개념과 사용법, 자료형에 대해 정리를 해보겠습니다. 문자와 숫자 자료형을 변환하는 방법도 소개합니다. 자바스크립트나 다른 모든 프로그래밍을 시작하려면 기초적인 프로그래밍 문법을 알 필요가 있습니다. 이 글과 연산자, 제어문만 알면 어느정도는 기본 문법을 터득했다고 보고 실습을 하시면 됩니다. 영어도 문법을 공부하지 않고 무작정 읽고, 쓰고 하다보면 늘긴 하지만 문법을 알면 더 효율적인 것 처럼 똑같습니다. 이 글에서는 프로그래밍 문법의 가장 기초적인 변수와 자료형에 대해 간단하게 알아보겠습니다. 생소한 단어가 나오더라도 어렵지 않게 이야기할테니 차근차근 읽어보시면 좋겠습니다. 0. 자바스크립트를 실행하는 방법 지금부터 소개해드릴 프로그래밍 기초 문법의 예시를 직접 실행해보시는게 이해가 빠릅니다. .. 2022. 8. 8. 자바스크립트 공부 순서 4단계로 정리 자바스크립트 공부 순서를 정리해보겠습니다. 이 글은 자바스크립트 카테고리의 첫 글이므로, 처음 자바스크립트를 접하시는 분들도 쉽게 시작하실 수 있게 작성해보겠습니다. 개인적으로는 웹사이트 외주를 위한 실전 코딩 연습을 위해 이 연재를 시작하게 되었습니다. 하지만 퍼블리셔, 프론트 엔드 개발자를 목표로 하시는 분들에게도 분명히 도움이 될 것이라고 생각합니다. 이런 내용을 이야기할 것 입니다. 그럼 지금부터 차근차근 시작해보겠습니다. 자바스크립트 공부 순서 자바스크립트는 프로그래밍 언어입니다. 프로그래밍 언어 공부를 시작하는 방법은 대략 아래와 같다고 할 수 있습니다. 언어의 특징, 역사, 구조 등의 이론 프로그램 설치 등의 환경 설정 프로그래밍 기초 문법 실제 코드를 사용하는 코딩 실습 여기서 가장 부담스.. 2022. 8. 8. 이미지, 동영상, 지도를 반응형으로 삽입하는 5가지 방법 이미지, video나 iframe 형식의 동영상, 지도를 반응형으로 삽입하는 5가지 방법을 공유합니다. 반응형 웹사이트를 위해 이미지나 동영상 등의 미디어를 삽입할 때, 너비나 높이가 마음처럼 조절되지 않을 수 있습니다. 또한 정렬이 잘못되면 다른 요소에 겹치는 등 엉망이 되기 쉽상이죠. 구글 지도 또한 iframe이라서 뜻대로 안될 수 있습니다. 이럴 때 너비와 높이, 비율 등을 기준으로 깔끔하게 삽입할 수 있는 방법들이 있어 공유해보겠습니다. 가장 쉬운 방법부터 조금은 까다로운 방법까지, 필요한 상황에 따라 사용해보시기 바랍니다. 반응형 이미지 먼저 이미지부터 시작해보겠습니다. 1. 너비 100% 이미지를 반응형으로 만드는 가장 간단한 방법은 이미지의 너비를 100%로 하는 것 입니다. 그냥 widt.. 2022. 8. 3. CSS를 위한 부트스트랩 사용 방법, 예시 CSS를 위한 부트스트랩 사용 방법을 정리해보겠습니다. 부트스트랩을 이용하면 일일이 스타일을 주지 않아도, 템플릿 같이 미리 만들어진 스타일을 편하고 쉽게 사용할 수 있습니다. 협업이나 업무를 인수인계할 때도 편리해서 많은 개발자들이 사용하는 도구입니다. 유명하니까 많이 쓰고, 많이 쓰니까 계속 유명한 선순환이네요. 반응형 레이아웃에도 탁월합니다. 부트스트랩은 CSS뿐만 아니라 JS에서도 사용되지만 그건 다음에 소개해드리기로 하겠습니다. 이 글에서는 부트스트랩을 처음 시작하는 분들을 위해, CSS로서의 부트스트랩 기능만 소개해보겠습니다. 1. 부트스트랩 CSS CDN 붙여넣기 물론 홈페이지에서 CSS 파일을 다운받아서 링크하실 수도 있지만, 어차피 인터넷 없는 환경에서 작업하진 않으니 CDN을 추천합니다.. 2022. 8. 3. 구글 폰트, 어썸 폰트 등 웹폰트와 아이콘 적용 방법 구글 폰트, 어썸 폰트 등 웹폰트 적용 방법을 공유해보겠습니다. 폰트는 말 그대로 글자의 스타일이기도 하지만, 어썸 폰트같이 아이콘도 웹폰트에서 제공받을 수 있습니다. 폰트를 컴퓨터에 다운로드 받아서 @font-face로 적용할 수도 있겠지만, 다른 사람의 컴퓨터에 없다면 보이지 않을 수 있습니다. 반면에 웹폰트는 인터넷만 연결되어 있다면 누구나 볼 수 있기 때문에 널리 사용되고 있습니다. 이 글에서는 다음과 같은 것들을 알아보겠습니다. 기본적으로 글자의 스타일을 부여하는 웹폰트 사용 방법 웹폰트에서 제공하는 아이콘을 사용하는 방법 구글 폰트 CDN 사용 방법 1. CDN 얻기 먼저 구글 폰트 사이트에서 원하는 폰트 스타일을 클릭하고, 사이트 오른쪽 윗부분의 네모 아이콘을 클릭해줍니다. 처음엔 Noto .. 2022. 8. 2. CSS 벤더프리픽스 예시, 자동 접두사 라이브러리 CSS 벤더프리픽스(vendor prefix) 핵심과 예시, 자동으로 접두사를 붙여주는 라이브러리를 정리해보겠습니다. 코딩을 하다가 -webkit, -moz와 같은 글자를 보신 적 있으신가요? 이러한 접두어들은 웹브라우저에 따라 적용되지 않는 CSS 신기능이 있을 때 대체할 스타일을 명시하는데 사용됩니다. 상당히 귀찮은 작업이지만, 모든 브라우저에서 원하는 모습대로 웹사이트를 구동하려면 꼭 해야하는 작업입니다. 이 글에서는 벤더프리픽스에 대해 간략하게 알아보고, 예시와 자동 접두사 라이브러리도 공유해보겠습니다. 1. 벤더프리픽스란? 벤더프리픽스는 주요한 웹브라우저가 새로운 기능을 제공할 때, 새로운 기능을 제공하지 못하는 이전 버전의 웹브라우저에게 이 사실을 알리고 스타일을 사용할 수 있게 해주는 역할을.. 2022. 8. 2. 반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리 반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리를 해보겠습니다. 이번 글에서 할 이야기는 다음과 같습니다. Responsive툴로 작업 중 모든 디바이스에서 사이트가 어떻게 보이는지 확인할 수 있습니다. 뷰포트로 디바이스의 너비나 높이에 맞게 사이트를 설정할 수 있습니다. 디바이스에 따라 레이아웃이 변화하는 '반응형 웹'을 구현하기 위해 @media를 사용합니다. 그럼 지금부터 하나씩 알아보겠습니다. 1. Responsive툴 Responsive툴은 개발자 도구에서 접근이 가능합니다. 윈도우는 F12, 맥은 우클릭 후 '검사'를 누르면 개발자 도구가 열립니다. 여기서 왼쪽 화면 위쪽에 responsive라고 쓰여진 것이 Responsive툴입니다. 클릭해서 원하는 디바이스를.. 2022. 8. 2. CSS transition 요약 정리 CSS transition 요약 정리를 해보겠습니다. transition은 transform이나 animation 효과에 대한 지속 시간, 딜레이, 움직이는 느낌 등을 설정할 수 있는 기능입니다. 그러나 꼭 트랜스폼이나 애니메이션 효과가 아니더라도 트랜지션은 유용하게 쓰입니다. 예를 들어 배경이 검은색이었다가 특정 행동을 하면 투명해지도록 설정했다면, 그 전환 효과를 부드럽게 해주는 역할을 하기도 합니다. transition 축약 사용 animation처럼 transition 명령도 관련된 메소드들을 한꺼번에 설정할 수 있습니다. transition에 숫자 뒤에 s또는 ms를 써서 지속 시간만 설정할 수도 있고, 다음과 같이 콤마로 여러가지 메소드를 설정할 수 있습니다. /* 변화할 값, 지속 시간, 움.. 2022. 8. 2. 이전 1 2 3 4 5 ··· 16 다음
