본문 바로가기

📁Web Developing59

input 태그-2 (버튼) 체크박스와 라디오버튼 여러 항목 중 하나의 항목을 선택하려면 라디오버튼을, 2개 이상 선택하려면 체크 박스를 사용한다. 버튼에서 사용할 수 있는 속성은 다음과 같다 종류 설명 value 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다. checked 버튼은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 만약 기본으로 선택해 놓고 싶은 항목이 있다면 사용합니다. 속성값은 따로 없습니다. 상품 주문을 넣는 폼을 체크바긋와 라디오버튼을 활용하여 만들어보겠다. 상품 주문 주문할 상품을 선택해 주세요. 선물용 3kg 선물용 5kg 가정용 3kg 가정용 5kg 선물포장 여부를 선택해 주세요. 선물 포장 선물 포장 안 함 라디.. 2022. 5. 30.
input 태그-1 (텍스트 입력) 구글의 검색 창, 인스타그램의 로그인 창 등은 모두 input태그로 만들어졌다. input태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다. input태그는 매우 다양한 입력 형태로 만들 수 있다. input태그에서 입력 형태를 지정할 때 type속성을 사용한다. 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트박스를 넣습니다. passward 비밀번호를 입력할 수 있는 필드를 넣습니다 search 검색할 때 입력하는 필드를 넣습니다 url URL주소를 입력할 수 있는 필드를 넣습니다 email 이메일 주소를 입력할 수 있는 필드를 넣습니다 tel 전화번호를 입력할 수 있는 필드를 넣습니다 checkbox 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다. r.. 2022. 5. 30.
폼 삽입하기 아이디 비번, 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다. 텍스트박스나 버튼같은 폼 형태는 HTML태그로 만들지만 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용해 처리한다. 일단은 태그만 살펴보자. form 태그 태그 사이에 여러가지 폼 요소를 넣는다. 기본형은 다음과 같다 여러 폼 요소 form 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 어떤 프로그램을 이용해 처리할 것인지를 지정한다. 종류 설명 method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. get : 데이.. 2022. 5. 29.
하이퍼링크 삽입하기 는 anchor로 하이퍼링크를 다루는 태그이다. 링크는 태그로 만드는데, 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다.기본형은 다음과 같다 텍스트 또는 이미지 텍스트 링크와 이미지 링크 만들기 이런 식으로 삽입된 하이퍼링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서 새로운 문서를 연다. 만약 새 탭에서 링크를 열고 싶다면 target속성에 _blank를 지정하면 링크를 클릭했을 떄 문서가 새 탭에서 열린다. Youtube 2022. 5. 29.
멀티미디어 컨텐츠 삽입하기 object 태그 오디오파일, 비디오, 자바 애플릿, PDF등 다양한 멀티미디어 파일을 사용할 때 object태그를 사용한다. 기본형은 다음과 같다 data 속성에는 보여줄 멀티미디어 파일을 지정한다. width, height 속성을 상요해 플레이어의 크기를 지정한다. embed 태그 src속성을 사용해 삽입할 멀티미디어 파일을 지정한다. 필요하다면 width, height 속성도 이용 가능하다. 태그에는 닫는 태그가 없다. 기본형은 다음과 같다 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있다. 따라서 HTML의 , , 태그를 지원하지 않는 웹 브라우저를 고려해야 하면, 태그를 사용해서 멀티미디어 파일을 삽입한다. , 태그 이 태그들은 음악이나 비디오를 재생할 수 있는 컨트롤바와 컨.. 2022. 5. 29.
이미지 삽입하기 태그는 이미지를 추가할 때 쓰인다. 기본형은 다음과 같다 이런 식으로 이미지를 넣을 수 있다. src 속성에는 이미지 파일 경로를 넣어야 하는데 이때 파일의 경로는 웹 문서 파일의 위치를 기준으로 결정된다. 이미지의 크기 조정 이미지의 크기를 변경하고 싶다면 width 혹은 height 속성을 활용하면 된다. width="200" 이런식으로 옵션을 추가적으로 적어주면 된다. 이때 숫자 수치는 픽셀값이며, "50%"처럼 비율값으로 설정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다. 이때 width와 height중 하나만을 입력하면 다른 하나의 값은 비율에 맞추어 알아서 계산해준다. +title옵션을 활용해 마우스를 올리면 추가정보를 툴팁으로 표시해줄 수 있다. 2022. 5. 28.
표 태그 이해하기 어려우니 잘 들어보자. 표 생성-기본 기본적으로 표를 만드는 방법은 다음과 같다. 태그는 표 제목을 적어주는 태그이다 각 칸에 들어갈 데이터들을 태그로 감싼다. 한 행에 들어갈 태그들을 태그로 감싼다. 모든 행들을 태그로 감싼다. 표의 구조를 다루기 표에서 각 열의 내용을 설명해주는 표의 첫 행을 태그로 감싸고 table data를 의미했던 를 태그로 바꾸어주면 html은 이부분이 표의 첫 행이고 정보를 표시하는 부분이라는 것을 인식한다. th태크로 감싸진 텍스트는 굵게 표시한다. 합계 등을 표의 맨 아래에 적을때는 이라는 태그로 감싸주면 인식한다. 그 외의 내용에 해당하는 부분은 태그로 감싸주면 일반 데이터 부분이라고 인식한다. 이렇게 재목행과 결과행을 만들 수 있다. 만약 제목행이 아닌 제목.. 2022. 5. 28.
리스트와 설명 목록 태그 list 태그 목록을 표시하는 법도 알아보자. 로 감싸면 목록이 된다. 로 감싸면 그루핑이 된 효과가 일어난다. 일반적으로 ul태그로 li태그들을 감싸서 사용한다. ul대신 ol로 감싸면 숫자가 있는 리스트로 만든다. 1 2 3 4 5 6 7 8 9 10 11 12 pagename Hello, GYHEO! Colored by Color Scripter 2022. 5. 28.
텍스트 컨텐츠를 다루는 태그들 heading 태그 h1, h2... 태그는 제목(heading)을 의미한다. 큰 글자로 보여주고, 줄바꿈을 해준다. paragraph 태그 태그는 단락(paragraph)을 만드는 태그이다. 단락과 단락 사이에 줄바꿈을 넣어준다. css를 활용하여 단락 사이의 간격을 조정할 수 있다. 줄바꿈 태그 이라는 태그는 줄바꿈(break) 기능을 제공한다. 태그는 닫는 태그가 없다는 점에 주의하자. 인용문 태그 태그 대신 태그를 사용하면 안으로 들여써진 인용 단락을 만들 수 있다. 2022. 5. 28.
글자의 형태를 다루는 태그들 strong, bold 태그 태그사이의 글자를 볼드처리한다. 은 경고문 따위를 적는 두꺼운 글씨에 쓰는 것이고 그냥 내맘대로 굵은 글씨를 써서 강조하고 싶을 때에는 를 활용한다. 이텔릭체 태그 또는 태그를 활용하여 기울인 텍스트를 보여줄 수 있다. em은 emphasis의 줄임말로써, 흐름상 강조하고 싶을 때 쓰는 태그이고 i는 italic의 줄임말로써 마음속의 생각이나 용어, 관용구 등에 사용한다. 기타 태그들 (대괄호는 생략하였음) abbr : 줄임말을 표시하고 title 속성을 함께 사용할 수 있음 cite : 웹 문서나 포스트에서 참고 내용을 표시함 code : 컴퓨터 인식을 위한 소스코드 small : 부가 정보처럼 작게 표시해도 되는 텍스트 sub : 아래 첨자를 표시 sup : 위 첨자를 표.. 2022. 5. 28.
head와 body에 들어가는 태그 head 부분에 들어가는 태그 : 이 html문서가 어떤 언어팩을 쓸 지를 표시해주는 태그이다.(반응형 웹을 만들때도 사용한다고 한다) : 이 웹페이지의 탭 제목을 설정해줄 수 있는 태그이다. body 부분에 들어가는 태그 역할을 나누어주는 태그들 태그 : 헤더 영역을 의미한다. 페이지 맨 왼쪽이나 위쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다. 태그 : 내비게이션 영역을 나타내는 태그이다. 같은 웹 문서 안에서 다른 위치로 연결하는 링크를 만든다. 태그는 웹 문서의 영향을 받지 않기 때문에 헤더나 푸터, 사이드 바 안에 포함될 수 도 있고 독립해서 사용할 수도 있다. 태그 : 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듭니다. 필요한 경우에만 사용합니다. : 웹 문서에서 맨 아.. 2022. 5. 28.
JavaScript 기초 이미 C, C++, Python 등을 학습해본적 있는 내가 나 공부하려고 정리한 내용이니, 코딩 자체를 처음 접하는 사람이 학습하기엔 부적절한 콘텐츠임. 변수 세미콜론은 꼭 적어야하는 건 아니지만 적어주는게 좋다. 문자열은 따옴표로(큰따옴표 작은따옴표 상관없음) 감싸준다. HTML 삽입 미리보기할 수 없는 소스 이런식의 변수 선언도 가능하지만, 이것이 선언인지 대입인지 구분할 수 없기에 만약 협업을 하거나 코드가 길어지면 문제가 생길수도 있다. let 또는 const를 활용하여 이를 해결할 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 let으로 선언하면 재차 선언이 불가능하다. const로 변수를 선언하면 재차 선언은 물론이고 변수값 수정도 불가능하다. const 변수명은 대문자로 적어주는게.. 2022. 4. 3.
JavaScript 강좌 https://www.youtube.com/watch?v=KF6t61yuPCY https://www.youtube.com/watch?v=4_WLS9Lj6n4 2022. 4. 3.
#1 HTML의 기본 HTML문서의 기본구조 태그란? 태그는 HTML에서 가장 중요한 문법이다. markup이라는 특징과도 맞닿아있는 것이 태그이다. 파일 올리는 법 태그에서 href에 링크가 아닌 파일경로를 입력해주면 된다. Form 만들기 라고 적어주면 입력이 가능해지는 박스가 만들어지며, text를 을 수 있도록 속성이 설정된것이다. type에 "password"를 넣어주면 비밀번호를 입력할때처럼 땡땡땡...으로나온다. 입력한 내용을 제출할 때 누르는 버튼을 만들려면 type="submit"으로 속성을 부여하면 된다. 이렇게 아이디, 비밀번호, 제출버튼 등을 태그로 감싸면 하나의 폼으로 관리가 되는 것이다. 입력한 정보가 어디로 제출될 지는 form 태그에 action이라는 속성으로 action="제출 주소" 이렇게 적.. 2022. 3. 21.

티스토리툴바