Multi Developer SuHo

안녕하세요~  이번에는 자바스크립트 기초 문법에 대한 변수 선언과 변수 사용에 대해 알아보겠습니다. 서론오늘 알아볼 내용은 변수입니다. 자바스크립트에서 변수란 무엇인지, 그리고 변수를 선언하는 방식과 변수를 사용하는 방법을 예시코드로 작성하면서 설명해드리겠습니다. 더보기목차1. 변수란?2. 변수 선언 ( var, let , const )2-1 변수 선언 ( var 예약어 사용 )2-2 변수 선언 ( let 예약어 사용 )2-3 변수 선언 ( const 예약어 사용 )2-4 예약어 var, let , const 차이점 3. 변수 사용 본론1. 변수란?자바스크립트에서 변수는 프로그램 실행 중에 값을 저장하는 데 사용되는 공간이라고 생각하면 됩니다.  즉, 데이터를 담는 상자 라고 이해하시면 더 편합니다. 2..

서론안녕하세요~ 이번에는 HTML과 CSS를 마치고 자바스크립트를 접해봅니다. 우선 자바스크립트가 무엇인지, 그리고 자바스크립트가 웹 페이지에서 어떤 역할을 하는지, 자바스크립트의 역사와 특징들을 간단하게 알아볼까요? 목차1. 자바스크립트란?2. 자바스크립트의 역사3. 자바스크립트의 역할4. 자바스크립트 특징 본론1. 자바스크립트란 무엇인가 ? 자바스크립트란?자바스크립트는 웹 페이지에 동적인 기능을 추가하여 사용자와 상호작용하는 데 사용되는 프로그래밍 언어입니다.  예를 들어 로그인 버튼을 눌렀을 때 로그인이 성공정으로 일어나는 것 처럼 사용자와 상호작용 하는 데 사용됩니다.    2. 자바스크립트 역사자바스크립트는 웹 페이지에 생동감을 불어넣고 인터랙티브한 경험을 제공하는 필수적인 언어입니다. 탄생부터..

안녕하세요~ 이번에는 반응형과 적응형 , 미디워 쿼리(media query)에 대해 알아보겠습니다. 간단한 이론과 실습 코드로 설명해드리겠습니다. 반응형과 적응형이라고 들어보셨나요?  반응형과 적응형의 개념부터 살펴보시죠 반응형이란?반응형 : PC 사이즈와 모바일 사이즈로 변화하는 것이 아니고 접속한 디바이스를 판단해서 요청 URL이 달라질 수 있다. 현재 웹사이트 대부분마다 반응형으로 디바이스 규격에 따라 레이아웃이 다르게 나타납니다.  적응형이란?적응형 : PC 사이즈에서 모바일 사이즈 혹은 탭 사이즈로 변환될 때 화면 사이즈에 비례해서 페이지의 내용이 맞게 변화한다.미디어 쿼리(media query)란? 웹 페이지가 보여지는 기기의 종류나 화면 크기에 따라 스타일을 다르게 적용할 수 있도록 해주는 ..

안녕하세요~ 최근 눈이 내려서 도로가 많이 미끄럽죠? 걸으실 때, 급하게 나가실 때 조심하셔서 미끄럽지 않도록 주의하시면 좋겠습니다. 이번에는 보일러 플레이트와 index 파일의 사전적 의미를 이해하는 시간을 갖게 되겠습니다.  보일러 플레이트란? (Boilerplate code) 프로그래밍에서 반복적으로 사용되는 기본적인 코드 틀을 말합니다.  보일러 플레이트를 왜 사용할까요?  프로그래밍에서 반복적인 작업을 줄이고 개발 효율을 높이기 위해 사용합니다.  인덱스 파일(index.html 등 같은)이란?  특정 디렉토리나 파일 시스템의 시작점을 나타내는 파일입니다. 웹 개발에서 가장 흔하게 사용되는데, 웹 서버가 특정 디렉토리를 요청받으면  기본적으로 index 파일을 먼저 찾아서 실행합니다. index..

안녕하세요~ 오늘은 디스플레이 속성과 간단한 포지션 속성에 대해 알아보겠습니다. 디스플레이(display) 속성우리가 디스플레이라고 화면 보통 TV를 떠오르시거나 화면을 생각하시게 됩니다. 맞습니다. CSS에서 display 속성은HTML 요소가 화면에 어떻게 표시될지를 결정하는 중요한 속성이고,  이 속성을 통해 요소의 크기, 위치, 레이아웃 등을 조절할 수 있습니다그럼 간단한 display 속성의 값에 대한 개념을 소개하겠습니다.display : block; 요소가 차지하는 공간을 완전히 채우고, 다음 요소는 새로운 줄에서 시작합니다.  전에 배웠던 블록 태그 아시나요? 같은 맥락이라고 생각하시면 됩니다. display : inline; 요소가 텍스트처럼 한 줄에 배치됩니다. 하지만 인라인 요소는 높..

안녕하세요 요즘 날씨가 점점 추워지고 있습니다. 감기가 유행이니 환절기 조심하세요~~ 🤧🤧 😷😷이번에는 결합자와 간단한 스타일 속성 들을 간단하게 배워보고 넘어가겠습니다. 우선 결합자에 대한 개념을 짚어보겠습니다. 결합자란? 👈여러 개의 선택자를 연결하여 더욱 정확하게 HTML 요소를 선택하고 스타일을 지정하는 방법입니다. 결합자 종류 div p {} 자손 결합자.a .b {} 자손 결합자div > p 직계 자식 결합자p + div 인접 결합자p ~ div 형제 결합자자손 결합자 👈첫 번째 선택자의 후손 요소를 모두 선택합니다. 즉, 자식, 손자 등 모든 하위 요소를 포함합니다.표기 방법 : 공백으로 표기  첫 번째 단락 두 번째 단락  div p { color: blue; /..