Web/HTML 기본 개념7 select 태그를 통해서 여러 데이터 나열하기 1.간단한 select 예시 여러 데이터 나열하기 국어 수학 영어 select 태그를 통해서 drop down형식으로 여러 데이터를 나타낼 수 있다. option 태그는 select box안에 포함될 항목들을 정의하는 것이고 value값을 통해 항목 값을 지정해 준다. 처음에 select box안에 뜨게 하는 기본값? 은 selected를 통해서 정해주면 된다. size 화면에 표시될 dropdown 메뉴의 개수 multiple 다중 선택 기능 지원 value 옵션을 선택했을 때 서버로 넘겨질 값 selected 화면에 표시될 때 기본으로 선택되어져 있는 옵션 2. select 다중 선택하기 여러 데이터 나열하기 사과1 사과2 사과3 사과4 사과5 사과6 select에서 multiple옵션을 줘서 다중 .. 2021. 3. 5. [HTML]입력양식 태그 form 사용자에게 입력 받을 항목을 정의한다. form tag 내부에 여러 개의 control 요소를 포함한다. input 텍스트 박스, 체크박스, 라디오 버튼 등 사용자가 데이터를 입력할 수 있도록 한다. textarea 여러 줄의 문자를 입력할 수 있도록 한다. button 버튼 select select box (dropdown ,combo box)표시 optgroup select box의 각 항목들을 그룹화한다. option selectbox의 각 항목들을 정의한다. label 마우스를 이용해서 input 항목을 선택 시 편리함을 제공한다. for 속성을 이용하여 다른 control 요소와 텍스트를 연결시켜서 더 편리하게 선택할 수 있도록 한다. fieldset 입력항목들을 그룹화 legend f.. 2021. 3. 5. [HTML]이미지, 오디오 , 비디오 삽입하기 이미지 src 이미지 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 너비 height 높이 이미지 경로 url로 지정하기 아래의 코드와 같이 url 주소를 복사해서 지정할 수 있다. 2.내 폴더에 저장되어 있는 이미지로 지정하기 src는 상대경로로 지정해주면 된다. 이미지를 그냥 불러왔을 때와 너비와 높이를 지정해 주어서 불러왔을 때 그리고 존재하지 않는 이미지를 불러왔을 때 alt값을 지정해주면 어떻게 뜨는지 확인해 보았다. 오디오 src 오디오 경로 지정 preload 음악 재상하기 전에 모두 불러올지 지정 autoplay 자동재생 할지 지정 loop 음악을 반복할지 지정 controls 음악 재생 도구를 출력할지 지정 이렇게 음악만 삽입하면 따로 화면상에 아무것도 뜨지 않는다. c.. 2021. 3. 5. [HTML]테이블 열,행 합치기 rowspan 셀의 높이 지정 colspan 셀의 너비 지정 현재 기본적인 구조 더보기 1 2 3 4 1. 세로로 합치기 1 2 4 1에서 rowspan = 2로 주어서 1과 3을 합쳤다.(2칸 합치기) 그리고 3은 지워주었다. 1 2 3 2와 4를 합쳐주고 싶을 때는 2 부분에 rowspan을 주어서 뒤에 있는 2개 끼리 합쳐지도록 하였다. 2.가로로 합치기 1 3 4 1 부분에서 colspan = 2를 주어서 1과 2를 합쳐주었다. (2칸 합치기) 그리고 2를 지워주면 위의 사진과 같이 나타난다. 이력서 테이블 만들어보기 이력서 사진 성명 홍길동 주민번호 000000-0000000 생년 월일 2000년 01월 01일 주소 서울시 강남구 역삼동 연락처 집 02-111-1111 이메일 hong@gmail.. 2021. 3. 5. [HTML]테이블 태그 기본적인 테이블 요소 태그 tr 표 내부의 행 th table header의미 , 행 내부의 제목 태그 td table data의미, 행 내부의 일반 셀 태그 간단한 테이블 만들어보기 제목 1 제목 2 제목1 관련 데이터 제목2 관련 데이터 제목1 관련 데이터 제목2 관련 데이터 태그를 통해서 가로로 한 줄씩 생성되는 것을 확인할 수 있다. 근데 지금 상태로는 테이블에 선이 없어서 구별하기가 어렵다. border 표의 테두리 두께를 지정 제목 1 제목 2 제목1 관련 데이터 제목2 관련 데이터 제목1 관련 데이터 제목2 관련 데이터 테이블 속성에 border를 추가해 줌으로써 조금 더 보기 간편해졌다. 2021. 3. 5. [HTML]글자 태그(2) p 본문 글자 태그 -> 단락 생성 br 줄바꿈 hr 수평 줄 생성 예시 P 태그 테스트 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi praesentium dolores labore autem harum, ad, laboriosam, amet similique esse animi at nihil voluptatem fugit adipisci consectetur molestiae? Molestias, praesentium ut? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab accusamus perspiciatis veritatis quidem rerum eaque dict.. 2021. 3. 2. [HTML]글자 태그(1) - h 태그 1. H 태그 h1 크기 200% h2 크기 150% h3 크기 120% h4 크기 100% h5 크기 80% h6 크기 70% 첫번째로 큰 글짜 첫번째로 큰 글짜 첫번째로 큰 글짜 첫번째로 큰 글짜 첫번째로 큰 글짜 첫번째로 큰 글짜 2021. 3. 2. 이전 1 다음
