Web/Web Programming
[생활코딩/JavaScript] HTML과 JavaScript (기초)
[HTML] script 태그 script 태그를 사용해 HTML 코드 내부에 JavaScript 코드를 추가할 수 있다. JavaScript HTML 1+1 HTML 코드를 통해 1+1을 입력했을 때는 각각의 요소를 문자로만 인식하여 그대로 출력되는 반면, Script를 통해 document.write(1+1)을 하게 될 경우, 1+1이라는 덧셈 연산을 인식하고 연산 결과를 출력한다. [HTML] 이벤트 웹 페이지에서 특정한 이벤트에 대한 처리를 수행하기 위해 JavaScript의 코드를 사용한다. onclick 속성 버튼을 클릭했을 때의 결과를 결정한다. 이 때 onclick의 값으로는 JavaScript의 코드가 와야만 한다. 더보기 HTML 삽입 미리보기할 수 없는 소스 onclick에 대한 값으..
![[CSS] 목록과 표 장식하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjG9p4%2FbtqGd9QInj0%2FW7jJR6eoo2ehCUKTzX6C9K%2Fimg.png)
[CSS] 목록과 표 장식하기
목록의 스타일 설정 목록의 글머리 기호 설정 ▶ list-style-type 속성 - 순서 없는 목록(unordered list) : disc (●), circle(○), square(■) - 순서 있는 목록(ordered list) : decimal(10진수; 1, 2, 3, ...) lower-roman( i, ii, ...) upper-roman( Ⅰ, Ⅱ, ...) lower-alpha(a, b, c, ...) upper-alpha(A, B, C,...) 목록의 글머리 기호에 이미지 사용 ▶list-style-image:url("이미지 파일주소") 글머리 기호 위치 지정 ▶list-style-position [inside / outside(기본값)] *목록 스타일 설정 예시 과목별 추천도서 목록 ..
![[CSS] 문자와 색상 지정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrVR58%2FbtqGdDRGsJm%2F0pGqSCoHHuABpw171NkQI0%2Fimg.png)
[CSS] 문자와 색상 지정
폰트의 지정 HTML의 출력스타일 지정 태그보다 CSS 속성을 이용 폰트 관련 CSS 속성 font-family = 글꼴 종류 ; 쉼표(,)로 여러 글꼴 등록 → 첫 글꼴부터 차례로 적용시키며 해당 글꼴이 없는 경우 다음 글꼴 사용 font-size = 글자의 크기 [pt / px / % / small / big 등] font-wieght = 글꼴의 두께 [100~900 / lighter(100) / normal(400) / bold(700) / bolder(900)] font-style = 글꼴의 스타일 [normal: 기본 / italic: 이탤릭체] font-variant = 소대문자 변경 [small-caps(소문자를 작은 대문자로 변경) / normal] CSS 폰트 속성 font-size:x-..
![[CSS] CSS 속성 설정 / 스타일시트 선언 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctYrE0%2FbtqF7L3iXDd%2FyR2T7ba3XvplfqK2PlHWVK%2Fimg.png)
[CSS] CSS 속성 설정 / 스타일시트 선언 방법
CSS 속성 선언 문서 일부분에 CSS 속성 설정 - 요소 및 요소 문서의 일부분 혹은 문장의 일부분을 구분해서 그룹핑 태그: 블록 단위 (block-level element) 태그: 인라인 (inline element) → style 속성을 이용해 특정 스타일을 지정할 수 있다. 스타일시트 이해하기 이 예제는 CSS의 개념을 설명합니다. 다음 예제로 이어집니다. div태그와 span태그의 차이점을 확인할 수 있다 - div 태그는 화면 전체에 맞춰 바뀌지만 span 태그는 span 태그 영역에 쌓여있는 부분에 한정하여 박스가 생성된다. - id 속성 및 class 속성 #아이디 이름 .클래스 이름 스타일시트 이해하기 이 예제는
![[CSS] WEB2.1 - WEB2.9](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdN33p%2FbtqF01e5BMv%2F7mpVJtyMfJG0zbC7yVlx60%2Fimg.png)
[CSS] WEB2.1 - WEB2.9
https://www.youtube.com/watch?v=Ok0bBJPtgJI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=2&t=0s CSS HTML이 채워주지 못하는 디자인에 대한 새로운 태그 문법그 이전: HTML 태그 사용; 정보외의 디자인 코드가 섞이면서 웹페이지의 정보로써의 가치 떨어짐 중복된 코드를 제거할 수 없음 HTML을 웹페이지의 정보에 전념하게 하기 위함 웹페이지 유지 보수 쉬워짐 가독성 ↑ (웹 페이지 해석 쉬워짐) 안에 a { color:red; }라고 지정해줌으로써 이하 본문에 적용된 모든 a태그에 대해 빨간색으로 표시 CSS 기본 문법 style 속성을 이용해 해당 속성의 값을 css 문법에 따라 해석 - 선택자 (selector) - 효과..
WEB 02.1.1 유튜브 영상 공유
태그로 유튜브 영상 넣기 MY HOBBY 제 취미는 영화보기 입니다. 다양한 장르의 영화를 보는 것을 좋아합니다. MOVIE GENRES COMEDY FILM NOIR MYSTERY MY HOBBY 제 취미는 영화보기입니다. 다양한 장르의 영화를 보는 것을 좋아합니다. MOVIE GENRE COMEDY FILM FILM NOIR MYSTERY COMEDY FILM 유머에 중점을 둔 영화 장르로, 관객들로부터 웃음을 끌어내려고 제작된다. 참고 유튜브 영상의 공유하기 버튼을 클릭하면 퍼가기 버튼을 클릭해 URL을 얻을 수 있다. 이 때 태그로 되어있는데 이를 embed로 바꿔사용해도 가능하다.
WEB 02.2.4 예약하기
레스토랑 예약하기 레스토랑 예약하기 예약자 정보 예약자 : 연락처 : 예약인원 : 1> 2명 3명 4명 5명 이상 예약 시간 선택 메뉴 선택 코스 A 코스 B 코스 C 코스 D 요청사항: * required 속성을 붙여 꼭 입력되어 하는 부분임을 표시한다. >> 마우스를 입력란에 두면 "이 입력란을 작성하세요."라는 메시지가 표시된다. * placeholder로 지정한 부분의 내용이 바탕에 표시된다. 패턴속성으로 지정한 형식에 어긋나게 입력했을 경우 "요청한 형식과 일치시키세요" 라는 메시지가 표시된다.
WEB 02.2.3 설문조사 폼 양식
다양한 폼을 활용해 설문조사 양식 작성하기 설문조사 기본정보 이름: 나이: 성별: 남성 여성 관심분야(1개이상) 디지털 콘텐츠 웹프로그래밍 데이터베이스 기계학습 다음 문항에 대해 5점 척도로 답하세요 본 세미나의 주제는 만족스러운가? 1 5 본 세미나의 초청강사는 만족스러운가? 1 5 본 세미나의 강의시간은 적절한가? 1 5 기타 의견 사항 의견을 입력하세요. * 나이를 입력하는 입력폼에서 input태그의 type을 "number"로 지정해 숫자만 입력받을 수 있도록 한다. 이 때 숫자외의 문자를 입력하면 입력한 내용이 보이긴 하지만 엔터를 누르면 사라진다. chrome의 경우 마우스를 나이 입력창 위에 둘 때 스크롤바가 나타난다. 나이의 값을 입력받기 때문에 min값을 0으로 설정했다. 아무것도 입력되..
WEB 02.2.1 ~ WEB 02.2.2
입력폼 작성 이메일 입력 폼과 비밀번호 입력폼, 확인, 취소 버튼 작성 회원가입 이메일: 비밀번호: 아직 화면에 입력하는 틀만 작성해놓은 상태라 값이 저장되거나 취소를 눌렀을 때 값이 사라지지는 않는다. 비밀번호 입력 시, ●으로 표시된다. 선택항목 추가 수강과목 조사 이름: 학과: 학년: 1> 1학년 2학년 3학년 4학년 학년을 선택하는 항목을 태그를 사용했다. 태그의 속성 중 size>1을 지정해서 스크롤박스 형식으로 나타나도록 했다. 의 하위 태그로 태그들을 작성해 선택 항목들을 지정했다.
WEB02.1.4 이미지 삽입 및 이동
이미지 삽입 및 이미지 선택 시, 아래 프레임에 나타남 강아지의 모습 멍멍 귀여운 강아지의 모습을 보여주어요. 태그의 name 속성에서 지정한 프레임의 name을 태그의 target 속성의 값으로 지정해 연결되도록 한다. 3개의 강아지 사진들을 동일한 크기로 맞춰 넣었고, 그 아래에 빈 프레임 화면이 나타난다. (+)