본문 바로가기

컴퓨터/HTML,CSS,JS,JQUERY

(21)
[내가 보려고 만든] html 요소 정리 html을 계속 사용하지 않으면 자꾸 잊어버리거나 다른 요소들과 헷갈리기 때문에, 이제까지 공부한 요소들을 정리해 보려고 한다. ​ - 요소(element) : 내용(content) + 태그(tag) = 문서의 특징을 지정하는 마크업 >시작 태그 : >종료 태그 : >단독 태그 : *태그의 이름 : 공백 구분 x, 대소문자 구분 x, 중첩 x ​ - 속성(Attribute) : 요소의 추가정보 (스타일, URL 등), 요소의 시작 태그에서 지정 OR ​ *하나의 요소에 여러 개의 속성 지정이 가능하며 빈칸으로 구분한다. ​ ​ - : 문서 형식 선언 - : 문서의 title과 문서 속성 지정, 문서 관리를 위한 meta data기록 ex) 문서 정보, 키워드, 저자, 언어, 인코딩 등 ex) : 한글 사..
html을 이용한 예약 페이지 만들기-<form> 이번에는 html의 태그를 이용하여 간단한 식당 예약 페이지를 만들어보는 실습을 다뤄보려고 한다. 은 사용자와 애플리케이션 사이의 상호작용 역할을 하는데, 다양한 입력 양식을 그룹 필하고 방법을 설정해 사용자의 입력 값들을 한 번에 애플리케이션으로 전달해 준다. 자세한 것은 실습을 해 보면서 하나하나 설명할 것이다. ​ 이번 실습에서 만족시켜야 할 조건은 다음과 같다. 1. 예약자 정보와 일자, 시간 선택을 구분하여 입력받는다. 2. 예약자 정보 부분은 을, 일자, 시간 선택 부분에는 을 포함한다. 3. 휴대폰 번호는 01로 시작해야 하며 국번은 3자리 or 4자리로 제한한다. 4. 예약인원은 2명에서 8명까지만 선택 가능하다. 5. 예약 시간은 오전 9시부터 오후 8시까지로 제한한다. ​ ※ head ..
html, css를 이용한 플라워 제작 이번 포스팅에서는 html과 css를 이용하여 '플라워 모형'을 제작해보려고 한다. css의 다양한 속성을 적용시키기 위한 연습을 위해 과제용으로 작성했던 것이다. ​ 이번에도 역시 조건을 설정한 후 이를 만족시키는 페이지를 제작할 예정이다. 조건은 다음과 같다. ​ 1. 색이 다른 4개의 꽃잎 모양으로 이루어진 플라워 만들기 2. 마우스 포인터를 꽃잎 위로 이동했을 시 꽃잎이 1초 동안 빠르게 회전하도록 하기 3. 창의 크기가 변해도 꽃잎의 모양은 변하지 않도록 하기 4. 꽃잎의 각 중앙에 'WWW', 'HTML', 'CSS', 'JS' 글자를 입력하기 5. 꽃잎의 테두리에 변화 주기 6. 꽃잎에 그림자 설정하기 ​ 이번에 만족시키고자 하는 조건들이 꽤 많으므로 주의해서 살펴보아야 한다. 이번 실습에서..
html, css로 시간표 만들기 이번 포스트에서는 html과 css로 시간표 만드는 법을 소개하려고 한다. html 태그로는 웹 페이지의 세세한 부분까지 케어하는 데 한계가 있으므로, css로 웹 문서의 세밀한 디자인적 요소를 다루는 법을 익히는 것이 중요하다. ​ 코드를 설명하기에 앞서 css의 기본 문법에 대해 설명하자면 다음과 같다. 우선 css 선언 방법은 ​ -내부 스타일 시트 선언 -외부 스타일 시트 선언 ​ 두 가지로 나눌 수 있는데, 내부 스타일 시트 선언의 경우 의 태그에서 선언해 주면 된다. (자세한 코드는 밑에서 확인 바란다.) ​ 외부 스타일 시트 선언의 경우 에서 태그를 이용하여 연결한다. 보통 하나의 css 파일을 여러 개의 html 파일에서 공통으로 사용할 때 이 방법을 이용한다. ​ 이외에도 인라인 스타일 ..
html로 간단한 자기소개페이지 만들기 본문에서는 html을 이용하여 간단한 자기소개페이지 만드는 법을 소개하려고 한다. 우선 html이란 웹 문서를 만들기 위해 사용하는 웹 언어로 상당히 직관적인 언어이며, 진입 장벽도 다른 언어에 비해 매우 낮은 편이라고 볼 수 있다. ​ 이번에 만들 자기소개페이지에는 몇가지 요구사항을 정하고 이를 준수하는 페이지를 작성해 볼 건데 요구사항은 아래와 같다. ​ 1. 목차에서 클릭하면 그 내용으로 페이지 간 이동하기 2. 이미지 삽입 3. 유튜브 동영상 삽입 4. 각 내용을 테이블 안에 넣기 ​ 4가지 조건을 고려하여 자기 소개를 하는 웹 문서를 만들어볼 것이다. ​ 코드에 대한 전체 이미지는 다음과 같다. 이제 각 코드에 대해 중요한 부분에 대해 설명을 해보려고 한다. ​ ​ ​ ​ 문서의 시작 부분이다...

728x90