CSS (28) 썸네일형 리스트형 input 태그 input 태그 사용자가 데이터를 입력 할수있는 입력 영역을 지정하는 태그입니다. for 요소 안에 사용되면 태그는 닫는 태그가 없습니다. input type input type의 종류에는 Input Type: text 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input: Input Type: password 는 password 필드를 정의한다. Input Type: submit 는 폼 -헨들러 (form- handler)에게 폼을 제출하 는 버튼을 정의합니다. 폼-헨들러(form-handler)는 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지이 다. 폼-헨들러(form-handler)는 폼의 action 속성에 명시되며 일반적으로 수신된 입력을 가지고 무언가.. label 태그 label 태그란 사용자의 인터페이스 항목의 설명을 나타내고 label은 폼의 양식에 이름 붙이는 태그입니다. 을 요소와 연결하면 몇 가지 이점이 있습니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다. 주요 속성은 for입니다 을 요소와 연관시키려면, 에 id 속성을 넣어야합니다. 그런 다음 에 id 와 같은 값의 for 속성을 넣어야합니다. Click me 아니면 안에 을 넣을 경우 연관이 암시적이므로 for 및 id속성이 필요없습니다. Do you like peas? developer.mozilla.org/ko/docs/Web/HTML/Element/label, www.codingfactory.net/11008 보고 포스팅 하였습니다. 감사합니다^^ CSS 뷰포트 CSS 뷰포트 브라우저 에서 Viewport 는 화면 크기 표시영역을 말합니다. viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원합니다. 모바일 브라우저에서 viewport가 중요한 이유 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것입니다. 결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율 축소가 발생해 가독성이 떨어지게 됩니다. 바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다. 사용방법 head 태그 사이에 다음을 코드로 입.. css 다중 선택자와 css 클래스명 띄어쓰기 css 다중 선택자로 여러 요소를 동시에 선택해서 적용 할수 있다. 1.공백없이 클래스끼리 붙어있는 경우 .class1.class2{} ex)-.name1.name2 클래스 속성 내에 name1과 name2가 모두 설정된 모든 요소를 선택합니다. 2.쉼표가 있는 경우입니다. element, element, element { style properties } css 선택자 목록(,)은 일치하는 모든 요소를 선택합니다. 쉼표로 구분한 목록을 한 줄에 배치할 수 있습니다. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } 3. 공백으로 연결해서 사용 하면 하위 개체로 지정합니다 . .a .b .c a클래스 내부의 b클래스 내부 c클래스요소에만 스타일 적용합니다. 특.. css font-family 그리고 웹 폰트 font -family 글씨폰트를 지정하는 속성 입니다. 지정하는 서체가 사용자가 가지고 있어야 합니다. 사용자 컴퓨터에 설치되어있지 않은 경우 다음선언된 폰트를 찾습니다. 없을 경우 대한 서체를 함께 넣어줘야 합니다. 예문 font-family: Gill Sans Extrabold, sans-serif; arial, helvetica,arial, helvetica, arial, helvetica, 아니면 웹 폰트 웹폰트를 사용해서 온라인에 서버에서 파일을 다운로드하여 화면에 보여주는 폰트입니다. 구글에서 필요한 스타일들을 체크한후에 여기에 있는 부분을 복사해와서 css 코드로 이렇게 font-family: 'Roboto', sans-serif; 사용을 합니다 CSS- float float 속성은 기존의 레이아웃 흐름에서 벗어나서 요소를 다음 요소 위에 떠오르게 할 수 있으며 3가지의 속성 값을 가질 수 있습니다. none 예시 float: none; 선택한 요소를 떠오르게 하지 않는다 left 예시 float: left; 선택한 요소를 왼쪽 부터 떠오르게 한다 right 예시 float: right; 선택한 요소를 오른쪽 부터 떠오르게 한다 Clear 속성 clear 속성은 float 속성이 적용된 요소의 영역으로부터 벗어나게 할 수 있는 속성입니다. 즉, 두 요소 간에 겹치지 않도록 할 수 있습니다. float 속성을 적용했을 때 의도치 않게 요소의 영역들끼리 겹쳤을 때 유용하게 사용할 수 있습니다. clear속성은 4가지 값을 가질 수 있습니다. none clear:none.. CSS- position position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종치를 결정합니다. position: static; position: relative; position: absolute; position: fixed; relative position: relative; 자체로는 특별한 의미가 없습니다. 딱히 어느 위치로 이동하지는 않습니다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다. top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다. .relative { position: relative; }.. css -input , index.html 을 실행시켜주세요. type, placeholder라는 attribute가 있습니다. 왼쪽 결과화면에서 각각 input 요소에 커서를 두고 타이핑해보세요. 1. type="text" text를 입력하는 속성입니다. 대부분의 input type은 text 입니다. 어느 텍스트나 입력할 수 있습니다. 이름, id, 주소, 닉네임 등을 입력 받을 때 사용합니다. 2. type="password" text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옵니다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것입니다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있습니다. 3. type="number" 숫자만 입력할 수 있습니다. 만약 typ.. 이전 1 2 3 4 다음
