Crescendo Code

이전에 만들었던 폼에다 자바스크립트로 유효성 검사를 추가하려고 한다. ↓ 간단한 로그인 폼 만들기 #1 : 구조 만들기 아이디, 비밀번호 입력란과 로그인 버튼이 있는 간단한 로그인 폼을 만들어 보려고 한다. CSS 활용 예시로나 볼만한 아주 간단한 디자인이기 때문에 기능적인 면은 참고가 어렵다. HTML/CSS를 이용 crescendo-code.tistory.com ▶ 기존 HTML 코드 ( loginForm.html ) Login 로그인 ▶ 기존 CSS 코드 ( loginForm.css ) .container { width : 300px; height : 280px; border : 1px solid black; border-radius : 30px; background-color : rgb(255, ..

아이디, 비밀번호 입력란과 로그인 버튼이 있는 간단한 로그인 폼을 만들어 보려고 한다. CSS 활용 예시로나 볼만한 아주 간단한 디자인이기 때문에 기능적인 면은 참고가 어렵다. HTML/CSS를 이용해 기본적인 구조를 만들고 자바스크립트로 간단한 유효성 검사를 진행할 예정이다. 기본적인 HTML 구조 Login 로그인 - 기본적으로 필요한 Login 글귀, 아이디 / 비밀번호 입력란, 로그인 버튼을 생성한다. - 아이디, 비밀번호 입력란은 웹 접근성 향상을 위해 label 태그와 함께 사용하는 것이 좋다. - 로그인은 기본적으로 계정 정보를 서버에 보내야 하기 때문에 버튼 타입은 submit으로 지정한다. - 나중에 자바스크립트로 유효성 검사를 하기 위해 입력 태그엔 name 속성을 함께 지정해 둔다. ..

자바스크립트의 true, false && (AND), || (OR) 연산자는 논리 연산자의 종류 중 일부이다. 논리 연산자는 결괏값으로 참, 거짓의 여부를 반환한다.  우선, 논리 연산자를 다루기 앞서 자바스크립트의 참과 거짓에 대한 특성에 대해 알아보려고 한다. 자바스크립트에서 참과 거짓을 판별할 수 있는 기준으로는 10  ▶ true 값을 반환하는 경우자료형예시문자 및 문자열'a', "car"0을 제외한 정수10, -20참인 식10   ▶ false 값을 반환하는 경우- ""(빈 문자열), 0, null, undefined, NaN, 틀린 식  ▶ if 문을 통한 참, 거짓 예제let boolean1 = 0;if( boolean1 ) ..

박스 모델 HTML 문서 안의 요소들은 기본적으로 박스형인 사각형 모양으로 구성되어 있고, 이를 박스 모델이라고 한다. 박스 모델 구성 요소들은 성격에 따라 inline, block, inline-block으로 분류할 수 있고 이는 display 속성의 속성값으로 지정할 수 있다. 각각의 성격이 가진 특성을 간략하게나마 알아보고 짧은 코드를 통해 복합적인 상황에서 어떻게 작용하는지 알아보려고 한다. inline inline 성격을 지닌 요소는 박스의 크기가 곧 content의 크기를 의미한다. 요소의 크기가 딱 필요한 만큼의 공간을 차지하기 때문에, width, height 속성으로 크기를 조절할 수 없다. padding이나 margin과 같은 속성을 사용할 경우, 상/하는 조절할 수 없고 좌/우만 적용..

구조적 가상 클래스 CSS를 적용할 때, 사용된 태그의 위치나 관계에 따른 요소를 선택자로 지정하는 방법이 있다. 이러한 선택자는 HTML 문서 태그의 구조적인 위치에 따라 결정되기 때문에 '구조적 가상 클래스'라고 불린다. 이 선택자의 여러 종류 중 첫 번째 자식을 의미하는 선택자로 first-child와 first-of-type을 언급할 수 있는데, 얼핏 같은 의미처럼 보이는 이 두 선택자는 분명한 차이점이 존재한다. 두 선택자의 차이점을 알아보고 이를 통해 남은 몇 가지 선택자도 같은 원리로 각각을 구분해 보도록 하자. child / of-type 구조적 가상 클래스 선택자 중 일부를 단어 단위로 쪼개보면, 시작과 끝을 뜻하는 first, last, 마지막에 붙는 단어로 child와 of-type으..

HTML 문서에서 CSS를 적용하는 방법은 세 가지가 있다. ■ 내부 스타일 시트 사용 ■ 외부 스타일 시트 사용 ■ 인라인 스타일 사용 1. 내부 스타일 시트 사용 - 내부 스타일 시트는 태그를 생성한 후 태그 안의 내용을 css 코드로 작성하는 방법이다. 보통 스타일 시트는 무언가를 정의하는 데에 많이 사용하므로, 내부 스타일 시트입니다. - 선언부( 중괄호({})로 묶인 부분 ) 안의 css의 속성과 값은 콜론 (:)으로 이어서 정의하며, 연속해서 다른 종류의 속성을 여러 개 부여하고 싶을 땐 각각의 속성 값 뒤에 세미콜론 (;)을 붙인다. 가장 마지막에 오는 속성 값에는 세미콜론을 붙이지 않아도 상관없지만, 코드의 통일성, 가독성 및 미관을 위해 붙이는 것이 좋다. 2. 외부 스타일 시트 사용 -..

표(테이블 : Table) 태그 및 속성 정리 표(Table) : 흔히 알려져 있는 격자 형태의 데이터. 행(column), 열(row), 셀(cell)로 구성되어 있다. ■ table 태그 : 표를 생성하는 태그. 표와 관련된 태그는 모두 table 태그 안에서 사용된다. - table 태그는 단독으로 사용하는 경우는 없고, tr, td와 같이 표 안의 영역을 구성하는 태그와 함께 사용한다. ■ caption 태그 : 표의 제목을 지정한다. 콘텐츠 영역에 작성한 텍스트는 표 위에 표기된다. 표 제목 ■ tr (table row) 태그 : 표에서 행을 생성한다. tr 태그 하나당 하나의 행이 생성된다. ■ td (table data) 태그 : 표에서 열을 생성한다. td 태그 하나당 하나의 열이 생성된다..

HTML 폼(Form) 태그 및 속성 정리 폼 (Form) : HTML에서 사용자와의 상호작용을 통해 정보를 입력받고 서버로 전송하기 위한 양식 ■ form 태그 : 폼 양식을 의미하는 태그. 폼을 구성하는 태그는 모두 form 태그 안에 작성됨 - action : 사용자로부터 입력받은 값을 전송할 서버의 주소를 적는 곳 - method : 송신 방식 ( 보안이 요구되는 정보라면 post ) ■ input 태그 : 입력받는 요소를 만들 때 사용 ( ex : 로그인 아이디, 비밀번호 페이지 ) - type : 입력된 값의 데이터 방식, 즉 입력 종류를 결정함. 종류로는 아이디, 비밀번호, 체크박스, 파입 업로드 등 다양함 - name : 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에..

#1. HTML 텍스트 관련 태그 정리 태그 이름 설명 hn 제목이나 주제를 나타낼 때 사용한다. p 짧은 문단을 작성할 때 사용한다. br 문단에서 줄 바꿈할 때 사용한다. blockquote 출처로부터 문단 단위로 인용한 텍스트를 작성할 때 사용한다. q 문단 안에 짧은 인용문을 작성할 때 사용한다. ins / del 텍스트에 밑줄 / 취소선이 나타난다. sub / sup 아래 첨자 / 윗 첨자 표현 시 사용한다. 1. hn 태그 : 제목이나 주제를 나타낼 때 사용하며, h1 ~ h6 총 6개가 있다. HTML 텍스트 및 영역 관련 태그 정리 HTML 텍스트 및 영역 관련 태그 정리 HTML 텍스트 및 영역 관련 태그 정리 HTML 텍스트 및 영역 관련 태그 정리 HTML 텍스트 및 영역 관련 태그 ..

HTML의 기본 구조 태그 : HTML 문법을 이루는 가장 작은 단위 ( 홑화살괄호 사이에 태그명을 넣는 형태 ) 속성 : 태그에 의미나 기능을 보충하는 역할 속성은 사용하지 않아도 되고 여러 개를 사용할 수 있음 의 양식을 따름 속성값이 여러개인 경우 하나의 큰 따옴표 안에 쉼표로 각 속성값을 구분 태그명 : html, 속성명 : lang, 속성값 : ko로 구성 HTML 문법 : 태그와 속성으로 구성되어 있음 기본적인 콘텐츠가 있는 문법은 시작 태그와 종료 태그로 구성 종료 태그는 태그명 앞에 슬래시(/)를 기재 콘텐츠가 없는 문법은 시작 태그만 사용함 주석 : 코드에 대한 메모나 설명을 남기는 기능 웹 브라우저에는 나타나지 않고 소스 보기를 통해서 확인 가능 과 같은 양식으로 사용 주석 처리 : 웹..