코드 그라데이션

태그 이외의 태그들 1) : 여러 줄을 입력하는 텍스트 영역 태그 여러 줄을 입력하는 텍스트 영역 속성 2) , : 드롭다운 목록을 만들어 줌 사용자가 내용을 직접 입력하지 않고, 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용함. 전자는 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 태그를 사용하여 원하는 항목을 추가한다. 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정한다. 2-1) 태그의 속성 태그를 사용해 만든 드롭다운 목록은 기본적으로 옵션이 하나만 표시된다. 옆에 있는 화살표를 클릭해 필요한 항목을 선택할 수 있다. 이 때 size 속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절할 수 있음. 속성 2-2) ..

input 태그의 주요 속성 1) autofocus : 자동으로 입력 커서를 가져다 놓음 이제는 자바스크립트 이용할 필요 없음 기본형 2) placehorder : 힌트를 표시해 줌 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할 지 알려줄 수 있음. 예제 뉴진스 앨범 주문하기 배송 정보 이름 배송 주소 이메일 연락처 배송 지정 (주문일로부터 최소 3일 이후) 실행 결과 3) readonly : 읽기 전용 필드를 만들어 줌. readonly라고만 쓰거나 readonly = "readonly" 또는 readonly = "true" 로 지정한다. 4) required : 필수 입력 필드를 지정 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데..

input 태그의 type 속성 1) type="text", type="password" : 텍스트와 비밀번호를 나타냄 텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 때 사용. 비밀번호 필드는 입력하는 내용을 화면에 보여주지 않아야 하므로, 특수문자를 사용 이 점만 제외하면 텍스트 필드와 똑같이 동작하고, 같은 속성을 사용한다. 텍스트, 비밀 번호 필드에서 사용하는 주요 속성 예제 아이디: 비밀번호: 실행 결과 2) type="search", type="url", type="email", type="tel" : 용도에 맞게 입력 type = "search" 는 검색을 위한 텍스트 필드로 인식 type = "url"은 웹 주소를 입력할 필드. type ="email"은 이메일 주소를 입력. 입력값이 지정한..

폼 폼과 관련된 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데, 모두 데이터베이스를 기반으로 작동한다. : 폼을 만드는 태그 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정함. 태그의 속성 자동완성 기능 : autocomplete 속성 기본 속성은 on. autocomplete ="off" 라고 지정하면 됨. , : 폼 요소를 그룹으로 묶는 태그 하나의 폼 안에서 여러 구역을 나누어 표시할 때 태그를 사용 태그는 다음과 같이 태그로 묶은 그룹에 제목을 붙일 수 있음 : 폼 요소에 레이블을 붙이는 태그 lable이란 입력란 가까이에 아이디나 비밀번호 처럼 붙여 놓은 텍스트 이 태그를 사용하면 폼 요소와 레이블 텍스트..

이미지 삽입 태그 src 속성은 이미지 파일의 경로를 지정 => 웹 브라우저에 알려준다. alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어줄 텍스트를 지정 src 속성은 웹 문서 파일과 이미지 파일이 같은 경로에 있다면, 이미지 파일 이름만 적으면 된다. 만약 하위 폴더에 있다면 src 속성에 하위 폴더와 함께 이미지 파일 이름을 적어야 한다. alt를 지정하면 인터넷 연결이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다. 화면을 꾸밀 때 사용한 이미지는 텍스트를 따로 넣지 않아도 된다. 빈 칸으로 두면 된다. width는 이미지 너비 지정, height는 이미지 높이 지정. 둘 중 하나만 지정해도 됨. 이 때 나머지 값..

01. 목록 만들기 1) 순서 있는 목록 : ol : ordered list li : list 태그의 속성값 - 기본적으로는 1부터 시작하지만, 필요에 따라 바꿀 수도 있다. 예제 오늘 공부 // 시작 바꿈 Java HTML CSS 실행 결과 2) 순서 없는 목록 ul : unordered list 예제 오늘 공부 Java는 클래스가 너무 쉬워요. HTML은 그냥 쉬워요. CSS는 나도 몰라요. 실행 결과 3) , . : 설명 목록을 만드는 태그 설명 목록(description list) 이란 이름과 값 형태로 된 목록을 말한다. 설명 목록은 이름(단어명) 부분을 지정하는 태그와 값(설명) 부분을 지정하는 태그로 구성된다. 과 사이에는 한 쌍의 태그와 태그를 넣는다. 이 때 하나에 여러 개의 를 사용할 ..

1) 태그 : 제목을 나타냄. h는 제목을 뜻하는 heading을 줄인 말이다. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다. >>>>>> : 크기 닫는 태그가 반드시 필요하다. 예제 뉴진스 민지 해린 다니엘 하니 혜인 실행 결과 2) : 텍스트 단락 생성 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 여기서 주의할 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다는 것. 3) : 줄을 변경함 단독으로 사용하므로 닫는 태그가 필요 없음. 예제 - h1 태그와 p 태그 사용 Hello!! Java 쉬워요 스프링 쉬워요. 실행 결과 4) : 인용문 작성 시 사용 다른 텍스트보다 약간 들여써짐. 예제 비밀정원 난 아직도 ..

시멘틱 태그의 필요성 시멘틱 : '의미론적인, 의미가 통하는'. 1) 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문. 2) 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트기기의 다양한 화면에서 웹 문서를 표현하기가 쉬워짐. 3) 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있게 된다.. 예제 - 시멘틱 태그 알아보기 와는 다르다. 2) : 네비게이션 영역을 나타냄 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦. 내비게이션을 만들 때 사용 웹 문서의 위치에 영향을 받지 않는다. 그래서 헤더나 푸터, 사이드 바 안에 포함할 수도 있고, 독립..