안녕하세요!

FE 개발자 유진주입니다.

Web/HTML+CSS+JS 16

웹프로그래밍첫걸음 5장. 폼 활용하기

5장. 폼 활용하기 5.1 폼 이해하기 요소의 사용 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때 사용자와 애플리케이션이 상호작용 (사용자 입력⇒전송버튼⇒애플리케이션(서버 측)에 전달⇒실행결과 반환) 요소의 역할 사용자가 입력하는 정보를 하나로 묶어서 애플리케이션에 전달 다양한 입력 양식을 그룹핑하고 전송방법을 설정 요소 내 사용자의 정보 입력 방식 , , 등의 입력 요소를 이용 method 속성: 데이터 전송 방식 지정 get 방식: 전송할 데이터를 URL 주소 뒤에 포함 (엽서의 특징 ㅡ 데이터가 한정적, 보안에 취약. 적은 양 데이터 보낼 때) post 방식: 프로그램의 입출력 방식을 사용, 데이터 양에 제한 없다. (편지의 특징 ㅡ 데이터 양의 제한 X, 보안 유지 가능. 많은..

Web/HTML+CSS+JS 2023.05.01

웹프로그래밍첫걸음 4장. 링크와 멀티미디어 표현하기

4장. 링크와 멀티미디어 표현하기 4.1 링크 달기 4.1.1 하이퍼텍스트와 링크 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결하여 원하는 정보를 찾아갈 수 있도록 해주는 것 (노드와 링크로 표현) 하이퍼미디어: 텍스트 뿐아니라, 이미지, 그래픽, 오디오, 비디오 등의 멀티미디어 정보가 연결 노드: HTML 문서나 멀티미디어 정보를 표현하는 기본단위 링크: 노드를 연결하여 내비게이션이 가능하도록 하는 구성요소 앵커: HTML 문서 내에서 링크의 출발점이나 도착점을 의미 앵커 영역: 앵커가 설정되어 있는 영역 외부문서 연결 & 문서 내 다른 지점 (책갈피) 4.1.2 문서 간 이동 숙명여자대학교 title 속성: 하이퍼링크에 설명을 하고 싶을 때 사용 target 속성: 연결된 웹 문서를 여는 ..

Web/HTML+CSS+JS 2023.05.01

웹프로그래밍첫걸음 3장. 문서 구조 표현하기

3장. 문서 구조 표현하기 3.1 표 그리기 3.1.1 표의 기본 구조 ■ 테이블 ⇒ 구성 요소: , , , : 테이블 행(row) : 테이블 머리글 : 각 셀의 데이터 3.1.2 표의 구조적 표현 셀 합치기 - rowspan(위아래 병합), colspan(옆 칸 병합) 속성 내용 : 표의 제목 , , : 표의 머리줄, 몸체, 꼬리줄 표현 (몸체만 스크롤 가능) 3.2 문서 구조화 하기 3.2.1 문서 구조화 요소 머릿말 : 외부 스타일시트 () 인라인 스타일시트 (~) ... + @import 방식

Web/HTML+CSS+JS 2023.05.01

웹프로그래밍첫걸음 2장. HTML5 문서 기본 이해하기

2장. HTML5 문서 기본 이해하기 HTML (HyperText Markup Language) 웹을 위한 하이퍼텍스트 문서 작성 언어 웹 브라우저에서 보여지는 문서의 내부형식을 규정 *.htm, *.html 2.1 문서 기본구조 : HTML5 문서 규약으로 만들어진 웹 문서 표시 : 현재 파일이 html 문서라는 지시사항을 나타낸 태그 - 요소(Element) : HTML 문서 일부분의 특징을 지정하는 개별적 부분 단독태그 / 복합태그 - 속성(Attribute) : 요소에 추가 정보를 주기 위해 사용 - 특수문자 공백 > " " & & © 카피라이트 2.2 문서 꾸미기 2.2.1 단락 제목과 줄 제목(Headline) : n=1(큰)~6(작은) 단락(Paragraph) : 줄을 바꾸면서 동..

Web/HTML+CSS+JS 2023.05.01

[자바스크립트의 시작] Javascript 제어문

HTML과 Javascript는 모두 컴퓨터 언어다. 하지만, HTML은 Javascript와는 달리 컴퓨터 프로그래밍 언어는 아니다. 프로그램 : 프로그램에는 순서라는 의미가 있고, 프로그래밍은 이러한 순서를 만드는 행위를 말한다. 조건문 *토글: 하나의 버튼으로 모드를 바꿔주는 기능을 함. (사전적으로는 1과 0을 반복적으로 되풀이하는 상태의 의미) 비교 연산자 === : 왼쪽과 오른쪽이 같은지 판단. 같으면 True, 다르면 False (T/F를 합쳐 Boolean이라 한다). var value = document.getElementById(id).value; value 값 가져오는 방법 (.value) 예제: 조건문을 활용해 day-night 토글 버튼 만들기 리팩토링 : 비효율적이 코드를 효율적..

Web/HTML+CSS+JS 2023.03.29

[자바스크립트의 시작] 웹과 Javascript

JavaScipt HTML : 정적, Javascript: 동적 HTML을 이용해 웹 페이지를 만들고, Javascript를 이용해 사용자와 상호작용할 수 있도록 한다. 1. 자바스크립트는 사용자와의 상호작용 역할을 한다. 2. 웹 브라우저는 한번 화면에 출력되면 자기자신을 바꿀 수 없다. 태그 : HTML에서 Javascript 코드를 사용하기 위해서 script 태그를 사용할 수 있다. * 참고. HTML로 쓴 코드는 정적이기 때문에 문자 그대로를 출력하지만, Javascript 코드는 동적으로 이를 계산할 수도 있다. 이벤트 : 웹 브라우저에서 일어나는 유용한 사건 예) onclick 이벤트: 사용자가 어떤 것을 클릭하는 사건 onchange 이벤트: 입력창에서 사용자가 키보드를 이용해 무언가 입력..

Web/HTML+CSS+JS 2023.03.27