html (12) 썸네일형 리스트형 form 태그 사용자가 입력 요소를 통해 입력한 데이터를 서버로 보내기 위해 사용하는 태그. 여기서 서버란 고객에게 정보를 제공하는 주체를 말한다. 예를 들어, 고객이 브라우저에 www.naver.com 을 입력하여 naver 홈페이지를 보여달라고 서버에 요청하면 서버는 고객에게 naver 홈페이지를 보여 준다. 그리고 고객은 특정 요소를 직접 입력하여 서버에 자료를 요청하기도 한다. 예를들어 네이버에 로그인 하기 위해서는 아이디와 비밀번호를 입력해야 한다. 고객이 아이디와 비밀번호를 입력하여 서버에 전달하면 서버는 그 정보가 맞는지를 확인하여 해당 정보를 고객에게 전달한다. 이렇듯 고객이 서버에 입력 요소를 보내기 위해 필요한 태그를 form 태그라고 한다. 즉, form 태그는 입력 요소들을 감싸며, 사용자가 입력.. select & textarea 태그 select 태그 다수의 선택지를 포함할 수 있는 선택 메뉴 선택지 항목은 option 태그를 이용하여 표시한다. 인라인 요소 기본 문법 국어 영어 수학 과학 select 요소는 name을 지정하여 다른 요소와 식별할 수 있다. 각각의 option에는 value를 지정할 수 있다. option을 선택했을 때 그 value 값이 반환되어 연산 등의 기능을 할 수 있다. 국어 영어 수학 과학 코드 예시 내가 좋아하는 과목 내가 좋아하는 과목을 선택하세요. 국어 영어 수학 과학 multiple 속성을 이용하면 여러개를 선택할 수 있다. ctrl을 누른 상태에서 선택지를 선택하면 여러 항목을 선택할 수 있다. selected 속성을 이용하면 기본적으로 선택이 되어 있게 할 수 있다. 내가 좋아하는 과목 내가 좋.. 입력 요소: input 태그 input 태그 사용자로부터 값을 입력받을 수 있는 입력창을 말함. 인라인 요소, 단일 태그 input의 type 속성 input의 type 속성에 따라 입력 요소의 형태, 유형이 달라짐. input의 기본 type 속성은 텍스트임 다양한 입력 요소 만들기 각 입력 요소마다 속성을 추가할 수 있다. 다양한 입력 요소 만들기 name 속성을 이용하여 각각 입력 요소의 이름을 지정하여 서로 식별할 수 있다. 이는 차후 javascript를 통해 각 요소에 기능을 줄 때 유용하게 사용할 수 있다. 다양한 입력 요소 만들기 색을 고르시오. 목록 만들기 목록이란 연과 있는 항목들을 나열한 것을 의미 순서 없는 목록(unordered list)과 순서 있는 목록(ordered list)으로 구분됨. 순서 없는 목록: 태그 사용, 블록 레벨 태그 사자 고양이 청설모 호랑이 순서 있는 목록: 태그 사용, 블록레벨 태그 영어 수학 국어 코드 예시 목록 만들기 동물원 동물 목록 사자 고양이 청설모 호랑이 내가 좋아하는 과목 순서 영어 수학 국어 링크 만들기 링크 현재 문서에서 다른 문서로 이동하게 만드는 수단 a 태그와 href 속성을 이용하여 해당 콘텐츠로 이동할 수 있는 링크를 만든다. a 태그는 인라인 요소이다. 기본 문법은 아래와 같다. 콘텐츠 내용 a 태그는 target 속성을 이용하여 해당 콘텐츠를 현재 창에서 열지 새로운 창에서 열지를 결정할 수 있다. 콘텐츠 내용 콘텐츠 내용 코드예시 링크 만들기 코딩 공부 기록으로 갑시다. 왼쪽 사진의 "코딩 공부 기록으로 갑시다"라는 텍스틀를 클릭하면 오른쪽 사진의 "코딩 공부 기록" 티스토리 페이지로 이동하는 것을 볼 수 있다. 왼쪽 사진의 "코딩 공부"라는 이미지를 클릭해도 오른쪽 사진의 "코딩 공부 기록" 티스토리 페이지로 이동하는 것을 볼 수 있다. 링크 만들기 코딩 공부 기록으로 갑시다. "코딩 .. id, class 태그 id : 요소에 고유한 이름을 부여하는 식별자 속성 class: 요소를 그룹별로 묶어서 정의하는 식별자 속성 id와 class로 요소를 지정해 놓으면 차후 css나 javascrip로 해당 요소에 기능을 추가할 때 유용하다. id는 태그한 하나씩만 지정해야 하지만, class는 다중 지정 및 중복 가능함. 건강 수칙! 운동을 하자! 주 150시간 이상의 운동을 합니다. 식단 조절을 하자! 탄수화물 섭취를 줄이고 과일 채소를 많이 먹습니다. 개발자 도구를 통해 확인해 보면 두개의 div 요소가 각각 id가 exercise, nurtion 으로 지정되어 있어 서로 식별이 가능함을 확인할 수 있다. 두 div 요소의 h2 태그는 모두 title이라는 class로 지정되어 있음을 확인할 수 있다. 컨테이너 태그 - div, span 태그 컨테이너 태그 여러 요소를 묶어 관리하기 편하게 만드는 역할을 하는 태그 콘텐츠 내용을 구분하거나, 공통적인 스타일 적용하고자 할 때 사용 컨테이너 태그를 이용해 콘텐츠의 내용을 묶어주면 차후 javascript를 통한 명령어를 적용할 때 유용하다. div 태그 블록 레벨의 콘텐츠를 묶어주는 컨테이너 태그 나의 목표 1 프로그래밍 언어를 공부한다. 나의 목표 2 운동을 열심히 한다. 개발자 도구를 이용해 확인해 보면 나의 목표 1이 한 블록으로 묶여 있음을 확인할 수 있다. 개발자 도구를 이용해 확인해 보면 나의 목표 2가 한 블록으로 묶여 있음을 확인할 수 있다. span 태그 인라인 레벨의 콘텐츠를 묶어주는 컨테이너 태그 나의 목표 1 프로그래밍 언어를 공부한다. 나의 목표 2 운동을 열심히 한다. .. 이미지 태그(img) img 태그는 이미지를 표시할 때 사용하는 태그입니다. 단일 태그로써 닫는 태그가 필요없습니다. 1. 기본 문법 scr 속성은 표시할 이미지의 경로와 파일명을 입력 받음. alt 속성은 이미지 로딩이 실패할 경우 이미지를 대체할 속성. 2. 이미지 크기 조절하기 width와 height를 이용하여 이미지 크기 지정 너비값과 높이값은 px 단위 3. 코드 예시 이미지 태그 사용 img 태그를 이용하여 이미지를 나타낸다. 내가 좋아하는 나연 사진입니다. 4. 코드 설명 html 프로젝트 폴더에 이미지 폴더를 만들고 거기에 nayeon.jpg 파일을 넣는다. img src에 nayeon.jpg가 속해있는 폴더인 images\nayeon.jpg 를 기입해 준다. nayeon.jpg 이 로딩이 되지 않았을 경우 .. 이전 1 2 다음
