[🥸JavaScript]📝콜백함수, 배열함수, 메서드 정리➰(foreach, map)

📍 개요 ◾ 함수의 구조를 분석할 수 있고 콜백 함수의 개념과 정의방식에 대해 학습해보았습니다. ◾ 배열함수 및 메소드 종류에 대해 배우고 콘솔창에 출력해보는 실습해보는 시간을 가졌습니다. 📌 함수의 구조함수는 명령어를 묶어놓은 블록으로 이해하면 쉽습니다. function 키워드를 사용하거나 화살표 함수 등으로 표현합니다.function 함수명(param1, param2) { // parameter return 반환값; // statements }❗return이 없거나 리턴값이 존재하지 않으면 undefined를 반환하게 됩니다. 💭 parameter => { statements } 의 이해✔️`parameter` : 함수의 매개변수(여러 개 정의 가능) ✔️`statements` : 함수가 수행할 작업..

• format_list_bulleted 🖥️ JavaScript
• · 2024. 8. 13.
• textsms

[🥸HTML/CSS]📝웹 접근성 스크린리더 관련 클래스명➰(sr-only)

✅`visually-hidden`◾ 시각적으로 숨기면서 스크린 리더 사용자에게는 접근할 수 있도록 해줍니다.◾ 시각적으로는 보이지 않아야 하지만 보조 기술에는 제공되어야 하는 텍스트나 정보에 사용됩니다. ✅ `sr-only`◾  스크린 리더에서만 보이는 텍스트를 생성합니다.◾  스크린 리더 사용자에게만 읽히는 보조 텍스트나 설명을 제공할 때 사용됩니다. ✅ `off-screen`◾  화면에서 숨기지만 스크린 리더에는 접근할 수 있도록 합니다.◾  페이지의 시각적 디자인에는 영향을 주지 않으면서 스크린 리더 사용자에게만 정보를 제공할 때 사용됩니다. ✅ `a11y-hidden`◾  스크린 리더에서 접근을 허용하면서 시각적으로는 숨깁니다.◾  보조 기술을 통해 정보가 제공되어야 하며, 시각적 디자인에는 영향..

• format_list_bulleted 🎨 HTML, CSS
• · 2024. 8. 13.
• textsms

[🥸JavaScript]📝자바스크립트 변수 선언, 타입, 연산자➰(let, const)

📍 개요 ◾ 자바스크립트의 기초적인 변수 선언과 타입을 알아보고 연산자 등의 활용 방법에 대해 학습하였습니다. 📌 자바스크립트란?먼저 자바스크립트는 공부하기 이전에 화면의 움직임 등을 나타내주는 언어라고 알고 있었는데요! 물론, 자바스크립트의 기능에는 제가 알고 있었던 부분도 포함되지만 조금 더 자세히 살펴보도록 하겠습니다☺️ 1️⃣ HTML ▪️ 웹페이지의 전체적인 구조 설계ex) 헤더와 본문, 폼, 버튼, 링크 등 2️⃣ CSS ▪️ 웹 페이지 디자인 및 스타일ex) 배경색, 텍스트 색상, 글꼴 3️⃣ JavaScript ▪️ 웹 페이지의 동작과 상호작용ex) 버튼 클릭 시 알림창 표시, 폼 제출 시 비어있는 필드 발생시 경고 메시지, 버튼 클릭시 외부 API를 가져와 표시🖥️ 콘솔창 관련 함수(lo..

• format_list_bulleted 🖥️ JavaScript
• · 2024. 8. 12.
• textsms

[🥸HTML/CSS]📝CSS 박스 모델과 Display 속성➰(Flex 레이아웃)

📍 개요◾ 웹 레이아웃의 뼈대가 되는 박스 모델의 구성을 이해하고, 여러 예제에 적용해보았습니다.◾ `display` 속성의 종류를 학습하고, `flex` 레이아웃의 속성들을 활용하여 실습하였습니다.📌 박스 모델의 구성 요소 4가지(element, padding, border, margin)◾ `element`이해하기 쉽도록 박스로 설명해보겠습니다! 예를 들어 CSS 속성으로 박스라는 요소에 스타일을 줄 수 있는 것처럼 화면에 보여지는 실제 내용, 즉 텍스트, 이미지 등을 의미합니다. ◾ `padding`요소 내부의 내용과 요소의 테두리 사이에 추가하는 여백입니다. 예를 들어, 물건이 들어있는 박스는 물건과 박스 벽 사이에 공간이 있을겁니다. 이처럼 padding이라는 공간은 텍스트가 박스의 외곽에 ..

• format_list_bulleted 🎨 HTML, CSS
• · 2024. 8. 9.
• textsms

[🥸HTML/CSS]📝CSS 선택자 종류 및 우선순위(➰사용법)

📍 개요◾ CSS의 스타일 방식과 선택자 및 연산자 종류에 대한 개념을 알아보고 실습하는 시간을 가졌습니다.⭐ CSS 스타일 방식 3가지◾ 인라인(in-line) 방식CSS 파일을 별도로 만들지 않고 .HTML 파일 내에서 부분의 태그들에 style 속성을 통하여 스타일을 주는 방식입니다.❗유지보수가 어렵기 때문에 실무에서 권장되지 않습니다.        Hello world  ◾ 내부(embedded) 방식인라인 방식과 동일하게 .HTML 파일 내에 작성하지만       Hello world  ◾ 외부(link) 방식      Hello world  /* style.css */p {  color: yellow;  background-color: black;}📁 선택자 종류 및 예제1️⃣ 전체 선택자..

• format_list_bulleted 🎨 HTML, CSS
• · 2024. 8. 8.
• textsms

[🥸HTML/CSS]📝HTML구조와 시맨틱 태그 종류(➰당근마켓, 네이버 분석)

📍 개요◾ WEB과 HTML의 개념을 학습하고 여러 태그를 사용하여 실습하는 시간을 가져보았습니다.◾ 태그 요소와 CSS를 활용하여 게시글 작성, 회원가입, 로그인, 항공권 검색 메서드를 구현하였습니다.💡 WEB, HTML 정의 ✅ HTML문서가 화면에 표시될 수 있게 해주는 마크업 언어이며 계층적 트리 구조를 가집니다.✅ WEB(World Wide Web)웹은 수많은 문서와 리소스가 서로 연결된 네트워크로 HTML 문서, 이미지, 비디오 등 다양한 형태로 이루어져 있습니다.✅  웹 브라우저HTML 문서를 읽고 해석하여 사용자에게 화면에 표시해주는 소프트웨어입니다.웹 브라우저는 웹 페이지의 HTML, CSS, JavaScript 등을 처리하여 페이지의 구조와 디자인을 화면에 나타냅니다. ⭐ HTML(..

• format_list_bulleted 🎨 HTML, CSS
• · 2024. 8. 7.
• textsms