본문 바로가기

분류 전체보기336

목록 썸네일 이미지 브라우저 객체 모델 6가지 정리, 사용법 브라우저 객체 모델(BOM)의 종류와 사용법을 정리해보겠습니다. window, screen, location, history, navigator, document 객체를 이용해서 웹 브라우저에서 제공하는 정보를 이용하고 브라우저 기능을 자유자재로 다룰 수 있을 것 입니다. 지난 글에서 자바스크립트에는 3가지 객체가 있으며, 객체 기본 사용법과 내장 객체를 어떻게 사용하는지에 대해 소개해드렸었습니다. 자바스크립트 객체 사용법, 3종류 객체 핵심 정리 자바스크립트 객체 핵심 정리를 해보겠습니다. 내장 객체, 브라우저 객체, 문서 객체 모델에 대해 다룰 것 입니다. 이전 자바스크립트 공부 순서 글에서 언급했듯이, 자바스크립트의 가장 큰 특 cucat.tistory.com 이번 글에서는 지난 글에서 못다한 아래.. 2022. 8. 10.
목록 썸네일 이미지 자바스크립트 객체 사용법, 3종류 객체 핵심 정리 자바스크립트 객체 핵심 정리를 해보겠습니다. 내장 객체, 브라우저 객체, 문서 객체 모델에 대해 다룰 것 입니다. 이전 자바스크립트 공부 순서 글에서 언급했듯이, 자바스크립트의 가장 큰 특징은 '객체 기반 언어'라는 것 입니다. 객체를 이용하면 많은 것들을 힘들이지 않고 손쉽게 구현할 수 있습니다. 이 글에서는 객체의 개념과 종류, 객체의 기능인 '메서드'와 속성인 '프로퍼티'를 쓰는 방법을 알아보겠습니다. 객체란? 객체(Object)는 한마디로 '기능과 속성을 가진 사물'과 같은 것이라고 할 수 있습니다. 미리 만들어진 기능을 가져다가 속성을 바꿔서 사용하기만 하면 되는 템플릿이라고 생각해도 되겠습니다. 자바스크립트의 객체는 아래와 같이 크게 3가지로 나눌 수 있습니다. 내장 객체 : 자바스크립트 엔진.. 2022. 8. 10.
목록 썸네일 이미지 제어문(조건문, 선택문, 반복문) 7가지 핵심 정리 제어문(조건문, 선택문, 반복문) 7가지 핵심 정리를 해보겠습니다. 제어문은 조건문, 선택문, 반복문 이렇게 3가지로 나뉩니다. 그리고 자바스크립트에서 사용 가능한 제어문은 각각 아래와 같이 세분화 할 수 있으며 이 글에서 전부 알아볼 것 입니다. 조건문 : if, else, else if 선택문 : switch 반복문 : while(+do while), for 그리고 반복문에서 활용할 수 있는 break와 continue에 대해서도 살짝 알아보겠습니다. 참고로 이 자바스크립트 연재는 처음 자바스크립트를 시작하는 초보가 꼭 알아야할 것들만 핵심 정리하는 연재입니다. 또한 프로그래밍 문법으로는 이번 글이 마지막 글이 될 것 입니다. 이후에는 실습과 함께 객체나 함수, 라이브러리를 공부할거에요. 이전 글이라.. 2022. 8. 8.
목록 썸네일 이미지 연산자 7종류 핵심 정리 연산자 7가지 종류에 대해 핵심 정리를 해보겠습니다. 산술, 문자 결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자까지 살펴보겠습니다. 자바스크립트를 비롯한 프로그래밍 언어에서는 연산자를 이용해서 계산하고, 비교하고, 조건을 사용해서 다양하게 활용할 수 있습니다. 연산자를 이해하려면, 앞서 이야기했던 변수와 데이터의 자료형에 대해 알아두셔야 예시를 이해하실 수 있습니다. 변수의 개념과 사용법, 자료형 정리 변수의 개념과 사용법, 자료형에 대해 정리를 해보겠습니다. 문자와 숫자 자료형을 변환하는 방법도 소개합니다. 자바스크립트나 다른 모든 프로그래밍을 시작하려면 기초적인 프로그래밍 문 cucat.tistory.com 참고로 이 글을 읽고, 이어서 제어문에 대해 정리한 글까지 보시면 프로그래밍 기초 문법.. 2022. 8. 8.
목록 썸네일 이미지 변수의 개념과 사용법, 자료형 정리 변수의 개념과 사용법, 자료형에 대해 정리를 해보겠습니다. 문자와 숫자 자료형을 변환하는 방법도 소개합니다. 자바스크립트나 다른 모든 프로그래밍을 시작하려면 기초적인 프로그래밍 문법을 알 필요가 있습니다. 이 글과 연산자, 제어문만 알면 어느정도는 기본 문법을 터득했다고 보고 실습을 하시면 됩니다. 영어도 문법을 공부하지 않고 무작정 읽고, 쓰고 하다보면 늘긴 하지만 문법을 알면 더 효율적인 것 처럼 똑같습니다. 이 글에서는 프로그래밍 문법의 가장 기초적인 변수와 자료형에 대해 간단하게 알아보겠습니다. 생소한 단어가 나오더라도 어렵지 않게 이야기할테니 차근차근 읽어보시면 좋겠습니다. 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.