본문 바로가기

🎨 Frontend6

📘 자바스크립트(JavaScript) 기본 다지기 - Part 2 함수, 객체/배열, DOM, this, 실행 컨텍스트 완전 정복 자바스크립트의 기본기를 더 탄탄하게 만들기 위해, 이번 글에서는 실무에서 자주 마주치는 핵심 주제들을 다뤄볼게요.함수의 선언 방식부터, 객체와 배열의 활용, DOM 조작, 그리고 많은 개발자가 처음에 헷갈려하는 this, 실행 컨텍스트까지 함께 정리해 보겠습니다.✅ 함수의 다양한 선언 방식자바스크립트에서 함수를 선언하는 방식은 크게 세 가지가 있어요.🔹 함수 선언식 (Function Declaration)function sayHello() { console.log("안녕하세요!");}sayHello(); // ✅ 선언 전에도 호출 가능선언 전에 호출해도 작동해요.자바스크립트 엔진이 실행 전에 함수 선언을 호이스팅(끌어올림) 하기 때문이에.. 2025. 4. 27.

📘 자바스크립트(JavaScript) 기본 다지기 - Part 1 자바스크립트란 무엇인가? 변수, 스코프, 타입, 조건문까지 기초 완전 정복!✅ 자바스크립트란 무엇인가?자바스크립트(JavaScript, JS)는 웹페이지에 동적인 기능을 추가할 수 있는 프로그래밍 언어입니다.HTML이 구조, CSS가 스타일을 담당한다면, JS는 기능과 상호작용을 담당합니다.버튼 클릭 시 팝업 띄우기로그인 폼 유효성 검사서버에서 데이터 받아와 페이지에 렌더링애니메이션 효과 등현재는 브라우저를 넘어 Node.js 환경에서도 백엔드 개발까지 가능할 정도로 범용성이 넓어요.// 간단한 자바스크립트 예시console.log("Hello, World!"); // 콘솔에 텍스트 출력document.getElementById("demo").innerHTML = "환영합니다!"; // HTML 요소.. 2025. 4. 24.

웹 페이지 레이아웃 제대로 잡기 스타일은 멋지게 입혔는데, 요소들의 위치가 엉망이라면 사용자 입장에선 불편한 UI가 될 수밖에 없죠.그래서 웹 개발에서 가장 중요하면서도 헷갈리는 부분이 바로 레이아웃 구성입니다. 이번 글에서는 실무에서도 가장 많이 사용되는 레이아웃 기법들을 정리해 볼게요.✅ Flexbox로 요소를 유연하게 정렬해 보자Flexbox는 일렬로 정렬되는 콘텐츠를 배치할 때 정말 유용해요.특히 정중앙 정렬, 간격 조절, 반응형 레이아웃 등에 탁월하죠..container { display: flex; justify-content: center; /* 가로 정렬 */ align-items: center; /* 세로 정렬 */ height: 100vh;} 📌 주요 속성 요약속성설명flex-direction주축 방.. 2025. 4. 23.

CSS로 스타일링 시작하기 HTML만으로는 웹 페이지가 너무 밋밋하죠.그래서 우리는 CSS(Cascading Style Sheets)를 사용해 글꼴, 색상, 레이아웃 등 웹의 시각적인 스타일을 입힐 수 있어요.이 글에서는 CSS의 기본 개념부터 꼭 알아야 할 핵심 속성들까지 정리해볼게요.1️⃣ CSS 기본 문법과 구조CSS는 HTML에 다음과 같은 방식으로 스타일을 적용합니다.선택자 { 속성: 값;} 예시:p { color: blue; font-size: 16px;}선택자(Selector)는 어떤 요소에 스타일을 적용할지를 지정속성(Property)은 적용할 스타일 종류값(Value)은 속성에 대한 구체적인 설정CSS 적용 방식인라인 스타일: HTML 요소에 직접 style 속성 사용내부 스타일: 태그를 안에 작성외부 스.. 2025. 4. 10.

HTML 기본기 다지기 웹 개발을 시작할 때 가장 먼저 배우는 것이 HTML입니다.HTML은 웹 페이지의 뼈대를 구성하는 언어로, 모든 웹 사이트는 결국 HTML 위에 쌓여 있어요.이번 글에서는 HTML의 기본 구조부터 주요 태그, 시맨틱 태그, 그리고 폼 태그까지 깔끔하게 정리해 볼게요.✅ HTML의 기본 구조 이해하기HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있어요. Hello, HTML! 태그 설명 HTML5 문서임을 선언 HTML 문서의 시작과 끝을 감쌈 문서 정보를 담는 영역 (제목, 인코딩, 메타정보 등) 화면에 실제로 보여지는 콘텐츠 영역 🏷️ 주요 HTML 태그 소개HTML에는 정말 다양한 태그가 있지만, 자주 쓰이는 기본 태그 몇 가지만 먼저 익혀볼게요.?.. 2025. 4. 9.

웹은 어떻게 작동할까? 웹 개발을 처음 시작할 때, 가장 먼저 알아야 할 것은 웹이 어떻게 작동하는가입니다. 단순히 브라우저에 URL을 입력하면 페이지가 열리는 그 과정을 조금 더 자세히 들여다보면, 웹 개발의 기본 원리를 이해할 수 있어요.1. 브라우저와 서버, 그리고 그 사이의 이야기우리가 흔히 쓰는 크롬(Chrome), 사파리(Safari), 엣지(Edge) 같은 브라우저는 단순히 정보를 보여주는 도구가 아닙니다.사용자가 URL을 입력하면 브라우저는 다음과 같은 과정을 거칩니다. DNS 조회 – 도메인 이름을 IP 주소로 변환서버에 요청 전송 – 해당 IP 주소의 서버로 요청(Request)을 보냄서버 응답 – 서버는 HTML, CSS, JS 등의 파일을 브라우저에 응답(Response)으로 전달브라우저 렌더링 – 받은 .. 2025. 4. 8.

이전 1 다음

티스토리툴바