본문 바로가기

Study/HTML CSS JS6

[JS] 자바스크립트 🙏🏻 자바스크립트 JavaScript 📍 화살표 함수 1) 매개변수가 없을 경우 ( ) => { ... } 2) 매개변수가 한 개인 경우 x => { ... } 3) 매개변수가 여러 개인 경우 (x, y) => { ... } 📍 Javascript 연산자 / 입출력 / 변수 1) 연산자 ▪️ == : 자료형을 자동으로 형변환 ▪️ != : 자료형을 자동으로 형변환 ▪️ === : 값이나 자료형이 같음 ▪️ !== : 값이나 자료형이 다름 ▪️ ? : 삼항 연산자 2) 입출력 ▪️ 알림창 출력 alert("안녕"); ▪️ 확인창 출력 var replay = confirm("확인하시겠어요?"); ▪️ 프롬프트창 입력 받기 var name = prompt("이름을 입력하세요.", "default"); ▪️ 웹.. 2022. 11. 22.

[HTML] html 🙏🏻 HTML HTML은 웹 사이트의 모습을 기술하기 위한 마크업 언어라고 할 수 있습니다. 프로그래밍 언어가 아니라 마크업 정보를 포함하는 마크업 언어로, 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함합니다. 📍 기본 태그 제목입니다 내용입니다 ① : 웹 문서의 유형을 html로 지정 ② : 문서를 html로 시작하며 언어를 한국어로 지정 ③ : 주로 브라우저의 정보를 입력하는 곳 ④ : 웹 서버와 웹 브라우저 간에 교환되는 정보 정의 ⑤ : 문서 제목 ⑥ : 문서 내용 입력 📍 문서 구조 태그 1) : 머리글 영역 - 주로 태그를 사용하여 검색 창을 넣거나 태그를 사용하여 사이트 메뉴를 넣음 2) : 내비게이션 영역 - 문서를 연결하는 내비게이션 링크로 동일한 사이트 내 문서나 다른 사이트 .. 2022. 11. 21.

[Front] 와이어프레임 안녕하세요 백엔드 개발자 홍민정입니다 🫧 와이어프레임이라고 많이 들어보셨죠 ? 오늘은 이에 대해 간단히 설명하겠습니다 ! ☝🏻 와이어프레임 설계 및 목업 구현 📍 와이어프레임 (Wireframe) - 웹 또는 앱을 개발할 때 화면 영역 구분을 위해 레이아웃의 뼈대를 그리는 단계 - 단순한 선이나 도형으로 인터페이스를 시각적으로 묘사 - 피그마, 미로, 오븐 등 활용 📍 목업 (Mock-up) - 실물 크기의 모형을 실제 작동하는 모습과 동일하게 만들지만 기능적으로 동작하지 않음 📍 마크업 언어 - 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어 📍 id - 고유(unique)한 이름을 붙이기 위해 사용 - → div#hong 📍 class - 반복되는 영역을 유형별로 분류하기 위해 사용 - cl.. 2022. 4. 28.

[Front] 페이지 레이아웃 안녕하세요 백엔드 개발자 홍민정입니다 🫧 오늘은 화면을 나누는 페이지 레이아웃에 대해 간단히 살펴보고자 합니다 ! 🌱 페이지 레이아웃 (Page Layout) ☝🏻 레이아웃 : 화면을 나누는 방법 📍 HTML 구성하기 - 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐름 - CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용 1️⃣ 수직분할 : 화면을 수직으로 구분하여 콘텐츠가 가로로 배치될 수 있도록 요소를 배치 2️⃣ 수평분할 : 분할된 각각의 요소를 수평으로 구분하여 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치 → 수평으로 구분된 요소에 height 속성을 추가하면 수평분할을 보다 직관적으로 할 수 있음 ⚡️Atomic CSS 방법론 : 클래스 이름과 구현을 1:1로 일치시켜 아.. 2022. 4. 28.

[Front] CSS 안녕하세요 백엔드 개발자 홍민정입니다 🫧 오늘은 CSS에 대해 알아보고자 합니다 ! 🎨 CSS ☝🏻 CSS (Cascading Style Sheets) - 웹 페이지의 스타일링 담당하여 독립적으로 기능하지 않음 - HTML이 웹 페이지의 구조와 내용을 담당한다면 CSS는 각 HTML의 요소를 꾸미는 역할을 담당함 📍 CSS의 역할 : 효율적으로 사용자 인터페이스(UI)를 구성함으로써 더 나은 사용자 경험(UX)을 제공하기 위해 사용 - 웹 페이지를 화려하게 꾸미기 전에 먼저 웹 페이지의 구성 계획 - 콘텐츠의 배치와 위치 (레이아웃 디자인) - CSS를 통해 화면에 나타나는 정보들의 레이아웃을 최적화함으로써 정보 전달력을 끌어올림 - 콘텐츠의 가독성을 향상시킬 수 있음 📍 CSS 태그 : 시맨틱 태그 -.. 2022. 4. 27.

[Front] HTML 안녕하세요 백엔드 개발자 홍민정입니다 🫧 오늘은 HTML에 대해 간단히 살펴보고자 합니다 ! ☝🏻 HTML 📍 HTML (HyperText Markup Language) - 웹 페이지를 구성하는, 틀을 만드는 마크업 언어 - 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어 - 어떤 웹 페이지가 어떤 내용을 가지며 그 내용을 어떻게 조직할 것인지를 지정하기 위한 언어 - 컴퓨터에게 특정한 데이터 처리 절차를 명령하기 위한 언어가 아니기 때문에 프로그래밍 언어는 x 📍 HTML의 기본 구조와 문법 - HTML은 태그들의 집합 - Tag : 부등호()로 묶인 HTML의 기본 구성 요소 - hello 일 때, - 는 시작태그 , 는 종료태그 - class="paragraph" 는 속성 (속성이름 .. 2022. 4. 26.

이전 1 다음

티스토리툴바