FrontEnd
-
📌 폼 구성하기 폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다. 실제로 웹 페이지에서 폼은 흔하게 찾아볼 수 있다. 예를 들어, 네이버 로그인 화면에는 아이디와 비밀번호를 입력하는 요소와 로그인 상태 유지를 설정하는 체크박스, 버튼 요소까지 다양한 상호작용 요소가 있다. ▶︎ form 태그 form 태그는 폼 양식을 의미하는 태그이다. 그래서 HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성해야 한다. 또한 아래 코드를 통해 알 수 있듯이, form 태그는 action과 method 속성을 함께 사용한다. ➀ action 속성 action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 ..
03-2. HTML 필수 태그📌 폼 구성하기 폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다. 실제로 웹 페이지에서 폼은 흔하게 찾아볼 수 있다. 예를 들어, 네이버 로그인 화면에는 아이디와 비밀번호를 입력하는 요소와 로그인 상태 유지를 설정하는 체크박스, 버튼 요소까지 다양한 상호작용 요소가 있다. ▶︎ form 태그 form 태그는 폼 양식을 의미하는 태그이다. 그래서 HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성해야 한다. 또한 아래 코드를 통해 알 수 있듯이, form 태그는 action과 method 속성을 함께 사용한다. ➀ action 속성 action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 ..
2024.06.20 -
📌 텍스트 작성하기 ➞ 텍스트는 일반적인 설명일 수도 있고, 글의 제목이나 부제목일 수도 있고, 다른 인물의 말을 인용한 것일 수도 있다.➞ 이처럼 다양한 텍스트를 작성할 때는 어떤 태그를 사용하는지 살펴보자.▶︎ hn 태그 ➞ hn태그는 h1 부터 h6 태그까지 6개가 있다.➞ h는 heading을 의미하고, n에 들어가는 숫자는 중요도를 나타낸다.➞ 중요도가 가장 높은 h1 태그가 글자가 가장 크고 굵고, h6 태그로 갈수록 작고 가늘어진다. ▶︎ p 태그 ➞ p 태그는 본문의 문단(paragraph)을 작성할 때 사용한다.➞ HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기에 p 태그를 자주 사용한다. 하나의 문단을 작성할 때는 p 태그를 사용합니다. ▶︎ br 태그 ➞ br..
03-1. HTML 필수 태그📌 텍스트 작성하기 ➞ 텍스트는 일반적인 설명일 수도 있고, 글의 제목이나 부제목일 수도 있고, 다른 인물의 말을 인용한 것일 수도 있다.➞ 이처럼 다양한 텍스트를 작성할 때는 어떤 태그를 사용하는지 살펴보자.▶︎ hn 태그 ➞ hn태그는 h1 부터 h6 태그까지 6개가 있다.➞ h는 heading을 의미하고, n에 들어가는 숫자는 중요도를 나타낸다.➞ 중요도가 가장 높은 h1 태그가 글자가 가장 크고 굵고, h6 태그로 갈수록 작고 가늘어진다. ▶︎ p 태그 ➞ p 태그는 본문의 문단(paragraph)을 작성할 때 사용한다.➞ HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기에 p 태그를 자주 사용한다. 하나의 문단을 작성할 때는 p 태그를 사용합니다. ▶︎ br 태그 ➞ br..
2024.06.19 -
📌 HTML 구성 요소 ▶︎ 태그 ➞ 웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등으로 매우 다양하다.➞ 태그는 다양한 구성 요소를 정의하는 역할을 하고, HTML 문법을 이루는 가장 작은 단위이다.➞ 기본 형식은 다음과 같이 홑화살괄호( ) 사이에 태그명을 넣는 형태를 이룬다. ▶︎ 속성 ➞ 속성은 태그에 어떤 의미나 기능을 보충하는 역할을 한다. ➞ 즉, 옵션과 같은 의미로 사용하든 안하든, 또는 여러 개를 사용해도 된다.➞ 기본 형식은 다음과 같이 속성명과 속성값으로 구성된다.➞ 속성명은 따옴표 없이 작성하고, 속성값은 큰따옴표(" ") 안에 쉼표( , )로 구분해 값을 나열한다. ▶︎ 문법 ➞ HTML은 태그와 속성으로 문법을 구성한다.➞ 문법은 크게 컨텐츠가 있는 문법과 컨텐..
02. HTML 알아보기📌 HTML 구성 요소 ▶︎ 태그 ➞ 웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등으로 매우 다양하다.➞ 태그는 다양한 구성 요소를 정의하는 역할을 하고, HTML 문법을 이루는 가장 작은 단위이다.➞ 기본 형식은 다음과 같이 홑화살괄호( ) 사이에 태그명을 넣는 형태를 이룬다. ▶︎ 속성 ➞ 속성은 태그에 어떤 의미나 기능을 보충하는 역할을 한다. ➞ 즉, 옵션과 같은 의미로 사용하든 안하든, 또는 여러 개를 사용해도 된다.➞ 기본 형식은 다음과 같이 속성명과 속성값으로 구성된다.➞ 속성명은 따옴표 없이 작성하고, 속성값은 큰따옴표(" ") 안에 쉼표( , )로 구분해 값을 나열한다. ▶︎ 문법 ➞ HTML은 태그와 속성으로 문법을 구성한다.➞ 문법은 크게 컨텐츠가 있는 문법과 컨텐..
2024.06.17 -
📌 개발환경 설정하기 ▶︎ 코드 에디터 설치 ➞ 앞으로의 코드 작성은 비주얼 스튜디오 코드 환경에서 하도록 하자.➞ VSCode는 PC에 직접 설치해 사용하는 설치형 코드 에디터 프로그램으로, 운영체제에 맞게 설치해야 한다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.vis..
01. 개발환경 설정📌 개발환경 설정하기 ▶︎ 코드 에디터 설치 ➞ 앞으로의 코드 작성은 비주얼 스튜디오 코드 환경에서 하도록 하자.➞ VSCode는 PC에 직접 설치해 사용하는 설치형 코드 에디터 프로그램으로, 운영체제에 맞게 설치해야 한다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.vis..
2024.06.16