다연이네

1. CSS ㄱ. [C]ascading [S]tyle [S]heets ㄴ. html 요소가 화면, 종이, 기타 미디어에 표시되는 방법을 설명(정의) ㄷ. 여러 웹 페이지의 스타일을 일괄적으로 관리할 수 있다. (많은 시간 절약, 유지) ㄹ. 외부 스타일 시트 (???.css) 2. CSS 구문(형식) 스타일을 적용할 대상 선택자(Selector) { 속성(Property):속성값(Value); 속성(Property):속성값(Value) } 선택자로 올 수 있는 것들 1) 태그명 2) #아이디명 (숫자로 시작할 수 없다) 3) .클래스명 4) * 범용선택자 : 모든 html요소를 선택자로 사용 5) , 그룹화 선택자: 동일한 스타일 정의할때 html 요소 선택 p, div, span {동일한 스타일 설정}..

모든 입력과 관련된 태그(요소)는 form 태그 안에 있어야 수집되고 서버로 전송되는 작업을 한다. (form 태그 안에 없으면 수집도 안되고 전송도 안됨) html 양식(form) - 사용자 입력값을 수집 -> 서버로 전송하는데 사용 name: first name: last name: 비밀번호: 소유한 자동차: 선택하세요 Volvo BMW KIA Audi 좋아하는 색: Red Green Blue Black 메시지: message 여러 라인의 텍스트 입력 행개수, 열개수 성별: 남자 여자 color: birthday : birthday : email : qty: volum : 우편번호: form의 method 중 get: 보안 취약, url 길이 제한(2048자), post: 크기제한 없음(많은 양의 데..

1. 항상 문서 유형 선언 2. 요소(태그)는 소문자 사용 (권장) head body ... 3. 모든 요소가 닫기 태그가 필요한 것은 아니다. 하지만 닫기 태그가 필요한 것은 꼭 닫기 하자 4. 속성명도 소문자 사용 (권장) id 5. 속성값을 설정할 때 "" 사용 (권장) (홑따옴표 사용이나 생략도 가능하지만 권장은 쌍따옴표) 속성값에 공백이 포함된 경우에는 *반드시 따옴표*로 묶어야 한다. 6. 이미지 태그는 항상 alt, 너비, 높이는 지정해서 사용하자 + 기본적으로 alt(이미지가 보여지지 않을 때 대체할 텍스트), style속성으로 width, height 지정해주자 7. 등호 주위에 공백 사용하지 않는다. alt="" 처럼 붙혀써버리기 8. 불필요한 가독성을 위해 빈줄 및 들여쓰기 x 9. ..

1. 반응형 웹 ? 모든 장치에서 잘(올바르게) 보이도록 만들어진 웹사이트 2. 반응형 웹 디자인 ? html, css를 사용하여 웹사이트의 크기를 자동으로 조정, 축소 또는 확대하여 모든 장치에서 보기 좋게 만드는 것 3. 뷰포트 설정 => 공식처럼 있어야 함 4. 반응형 이미지 너비(width) 속성 사용 : 100% 백분율 / 자동으로 너비에 맞춰 높이도 조정된다 5. 반응형 텍스트 6. 미디어 쿼리 1) 이미지 2) 텍스트 위의 1)2)를 제외한 애들은 일반적으로 미디어 쿼리를 사용해서 처리한다. Hello World vw : 뷰포트 너비로 1%가 1vw인 것 기억 화면 크기에 맞춰 박스의 위치가 변한다. Media Queries Left Menu Main content Right Menu . ...

title 문서의 제목을 정의, 브라우저 또는 페이지 탭의 제목 표시줄에 표시, 제목을 정확하고 의미있게 적어야한다. 12/02/ex06 style 단일 html 페이지에 대한 스타일 정보를 정의하는데 사용되는 태그(요소) link 현재 문서와 외부 자원과 관계를 정의한다. 대부분 외부 스타일 시트와 연결하는데 사용한다. meta 문자셋(charset), 페이지 설명-Description, 키워드 지정-KeyWords, 문서 작성자 설정-author, 뷰포트 설정할 때 사용 메타데이터는 페이지에 표시되지는 않지만 브라우저, 검색 엔진 및 기타 웹서비스에서 사용되는 정보를 설정하는 태그 (요소) meta name=viewport 뷰포트: 웹페이지에서 사용자가 볼 수 있는 영역 장치에 따라 다르며 컴퓨터 화..

iframe - 인라인 프레임의 줄임말 (프레임 안의 프레임) - 웹페이지 내에 또다른 웹페이지를 표시하는 데 사용 - 다른 웹페이지를 넣다 보니까 src는 필수적이고 나머지(width, height 등)은 스타일로 줄수 있고 + board를 줄지말지도 스타일로 주고 - 계약조건.html 다른 페이지 [계약조건.html] iframe sist naver daum 1을 클릭하면 해당 페이지에서 쌍용교육센터 페이지로 이동한다. 2를 클릭하면 새로운 페이지가 열려 네이버로 이동한다. 3을 클릭하면 밑의 프레임에서 웹페이지가 열린다. 맨 밑의 시계도 새로운 프레임에 열린 것이다.

토글 버튼을 누르면 해당 내용이 출력되도록 한다. 토글버튼-1 제목 내용 토글버튼-2 제목 내용 토글버튼-3 제목 내용 버튼을 누르면 내용이 부드럽게 내려오고, 한번 더 누르면 부드럽게 올라간다.

버튼을 클릭하면 경고창을 띄우도록 만든다. 1. HTML로 작성 버튼1 html의 id 속성 버튼1 글자를 쓰면 그게 경고창에 떠지도록 2-1. 2-2. 3. JQuery를 이용해 수정 자바스크립트보다 제이쿼리쓰는게 쉽고편하고빠르다. (더 많은 기능 구현 가능) ex04.html을 jquery 사용해서 수정 버튼 클릭