Crescendo Code

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

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