Crescendo Code

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

박스 모델 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. 외부 스타일 시트 사용 -..