front-end (10) 썸네일형 리스트형 [HTML] 폼(FORM) form사용자가 입력한 데이터(입력값)을 서버로 보내기 위해 사용하는 태그 서버와 클라이언트클라이언트가 요청하면 서버는 그에 대한 응답으로 정보를 제공클라이언트의 요청이 어떤 것인지에 따라 응답은 달라짐 예1) 사용자가 네이버 홈페이지로 이동하고 싶은 상황클라이언트 : 네이버 홈페이지 주소 입력 → 엔터 → 서버에 네이버 홈페이지로 이동한다는 요청 보냄서버 : 요청을 받아 응답으로 네이버 웹페이지 보냄 (홈페이지 html 문서)클라이언트 : 사용자 웹브라우저에 네이버 홈페이지 오픈됨 예2) 네이버 로그인 상황클라이언트 : 로그인을 위한 아이디, 비밀번호 입력 후 로그인 클릭 (엔터)→ 3가지의 입력 요소서버 : 로그인 정보 확인 후 맞으면 로그인 성공 화면 / 틀리면 로그인 실패를 알림3개의 입력 요소로.. [HTML] SELECT와 TEXTAREA select다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴option 태그 ≫ 메뉴 안에 포함되는 옵션드롭다운이 나타나 사용자 선택 가능첫 번째 선택 항목이 선택된 상태에서 시작 스타벅스 커피빈 이디야 탐앤탐스 textarea여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소input 태그로는 한 줄만 입력할 수 있지만 textarea 태그는 여러 줄 가능name 속성 추가 가능줄 수가 많아지면 자동으로 스크롤이 생김 키우고 싶은 동물 고르기 강아지 고양이 햄스터 앵무새 기본적으로 쓰여 있는 텍스트 selectmultiple 속성 ≫ 여러 개를 선택할 수 있도록 펼쳐진 상태여러 개.. [HTML] 입력 요소 만들기 input 태그사용자로부터 값을 입력받을 수 있는 대화형 컨트롤 (필드)인라인 요소단일 태그 type 속성입력 요소의 형태나 입력 데이터 유형 등이 type 속성에 따라 달라짐적용할 수 있는 추가 속성의 종류도 달라짐type은 20여 가지기본값은 text ! name 속성input 태그에 식별자 추가각각의 입력 항목에 대한 이름 색을 골라보세요! text ≫ 텍스트 입력받음placeholder 속성 - 안내 메시지 : 사용자 입력 전에만 보이는 텍스트maxlength 속성 - 문자 개수 제한 : 특정 개수 이상 문자 입력 불가button ≫ 클릭을 입력받음value 속성 - 버튼 위에 텍스트 표시color ≫ 팔레트를 통한 색상 선택추가적으.. [HTML] 목록 표시하기 : 순서 있는 목록 (ordered list) : 순서 없는 목록 (unordered list) li 태그 (항목 태그)목록에 들어가는 항목 하나 하나 표현 시 사용감싸는 태그 (ul / ol 태그)에 따라 웹 브라우저에 나타나는 기호가 달라짐≫ , , 는 모두 블록 레벨 요소를 만드는 태그 ! 귀여운 동물 목록 강아지 고양이 두더지 햄스터 프로그래밍 공부 순서 HTML CSS JAVASCRIPT NODEJS , , 는 모두 블록 태그이므로 안에 인라인 태그 추가 가능실행 결과HTMLCSSJAVASCRIPTNODEJS [HTML] 링크 만들기 링크현재 문서에서 다른 문서로 이동할 수 있는 수단a 태그 ≫ href 속성을 통해 다른 페이지, 전화번호, 이메일 주소, 그 외 다른 url로 연결할 수 있는 링크인라인 요소콘텐츠는 주로 링크의 목적지 나타냄네이버 target 속성새로운 문서를 열 때, 현재 탭에서 열지 새로운 탭에서 열지 결정"_self" : 현재 탭에서"_blank" : 새로운 탭에서기본값은 self ! ≫ 지정하지 않으면 현재 탭에서 열림 전화 걸기 / 메일 쓰기웹문서 주소 뿐 아니라 전화번호, 메일 주소 등을 href에 지정tel / mailto 문자열 지정010-1234-5678 전화걸기emailaddress@naver.com 메일 전송 네이버 구글 .. [HTML] 컨테이너와 전역 속성 컨테이너 태그콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그콘텐츠 내용 구분 / 공통적인 스타일 적용 등에 사용 : 블록 레벨 컨테이너 : 인라인 컨테이너 일단 문서를 만들자 공부 다짐하기 공부를 열심히 하기로 했다! 운동 열심히 하기 건강을 위해 운동을 열심히 하자! 콘텐츠 내용이 크게 2종류로 구분됨 → 컨테이너 태그를 통해 분류모두 블록 레벨로 작성되어 있으므로 (, ) 태그 사용브라우저에는 변동사항이 없지만 개발자 도구에서 표시됨커서를 갖다 대면 나누어진 블록 확인 가능 태그 사용콘텐츠에 사용하면 그 글씨만 따로 표시됨 (개발.. [HTML] 이미지 표시하기 img 태그이미지를 표시할 때 사용단일 태그콘텐츠를 적지 않고 표시할 이미지에 대한 정보를 속성으로 지정 src 속성표시할 이미지의 위치 정보와 파일명을 입력받는 속성이미지의 url을 입력받음서버에 위치한 이미지 파일 / 내 컴퓨터에 저장된 이미지 파일 ≫ 모두 가능url 작성 방법내 컴퓨터에 있는 이미지 파일같은 파일 내에 images 파일 생성 후 사진 추가"images/이미지파일이름"서버에 위치한 이미지 파일서버에서 원하는 이미지 파일의 주소 복사"복사된이미지파일주소" alt 속성alternative의 약자 ≫ 대체 텍스트 역할이미지가 로딩되기 전 / 이미지 로딩에 실패한 경우 ≫ 이미지 대신 대체 텍스트가 표시됨올바른 url 지정 후 alt 태그 지정하면 대체 텍스트는 나타나지 않음 이미지 크기 .. [HTML] 블록 태그와 인라인 태그 태그의 구분블록 레벨 요소를 만드는 "블록 태그"자신이 속한 영역의 너비를 모두 차지하여 블록 형성인라인 요소를 만드는 "인라인 태그"자신에게 필요한 만큼의 공간만 차지 블록 태그, 등개발자 도구에서 커서 가져다 대면 블록 확인 가능위,아래, 양 옆 공간으로 블록이 있음 인라인 태그string 태그 ≫ 콘텐츠를 굵게 표시em 태그 ≫ 콘텐츠를 기울여 이탤릭체로 표시mark 태그 ≫ 콘텐츠에 형광펜 표시 제목을 표시하는 큰 텍스트! 문단을 나타내는 작은(?) 텍스트 굵은 글씨 기울여진 글씨 형광펜 글씨 , 태그는 블록 태그로 블록 영역이 있음 (위, 아래, 양 옆 공간 차지) 태그 속의 , , 태그는 태그의 블록을 방해하지 않으면서 자신만의 .. 이전 1 2 다음