웹프로그래밍
[javascript] 1~4
1. 자바스크립트 개요와 개발환경 설정 키워드: 특별한 의미가 있는 단어 식별자: 이름을 붙일 때 사용하는 단어. 변수명이나 함수명 등으로 사용. 키워드 사용 안됨, 숫자 시작 불가, 특수문자(_, $ 제외) 사용 불가, 공백 불가 클래스는 대문자로, 그 외는 소문자로 시작. 여러 단어로 이뤄진 건 각 단어의 첫 글자를 대문자로 주석: // 혹은 /**/ 사용 [확인 문제 1-1] 결과 확인하기 [확인 문제 1-2] 결과 확인하기 [확인 문제 1-3] 식별자로 사용할 수 있는 것: a, hello, _, $ 없는 것: 10times [확인 문제 1-4] conole.log() 에서 console은? 연산자, log는? 메소드 [확인 문제 1-5] 여러 단어로 이루어진 식별자 만들기 WeAreTheWold..
[javascript] 생활코딩 3~7
1. html과 javascript 차이 html의 경우 1+1을 그대로 출력하지만, javascript의 경우 계산 결과인 2를 출력한다 => 동적이다 javasvript html 1+1 2. event 2-1. onclick: click하는 경우 실행 2-2. onchange: 변화가 있는 경우 실행 2-3. onkeydown: 키보드를 누르는 경우 실행
[CSS] 다양한 레이아웃의 구성과 기능
[응용 예제 7-1] 수평 정렬 레이아웃 1. overflow: hidden 수평정렬 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 수평정렬 2. overflow 속성 제거 수평정렬 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 수평정렬 [응용 예제 7-2] 중앙 정렬 레이아웃 margin: 0 auto; 제목 부제목 내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용 내용내용내용 [응용 예제 7-3] One True 레이아웃 top middle-left middle-right bottom [응용 예제 7-4] 절대 위치를 사용해 요소 배치 부모 - position: relative; 자식 - position: absolute; 제목 제목 [응용 예제 7-5..
[CSS] css 속성
[기본 예제 6-1] 박스 크기와 패딩 조정 1. width와 height 속성 적용하기 ▪ 2. margin과 padding 속성 적용하기 [기본 예제 6-2] 박스 여백 부분 조정 1.네방향속성지정하기:순서대로크기단위띄어쓰기 2.두방향씩속성지정하기:네방향을2개씩묶어지정 [기본예제6-3]박스여백부분조정 1. 기본 테두리 만들기 박스 2. 둥근 테두리 만들기 박스 3. 모서리마다 둥글기를 다르게 적용하기 박스 [기본 예제 6-4] display 속성 1. none 키워드 적용하기 더미 객체 대상 객체 더미 객체 2. block 키워드 적용하기 더미 객체 대상 객체 더미 객체 3. inline과 inline-block 키워드 비교하기 의미 없는 더미 객체 더미 객체 대상 객체 더미 객체 의미 없는 더미 객..
[CSS] 기초 선택자와 단위
[기본 예제 5-1] 전체 선택자와 태그 선택자 1. 전체 선택자 적용 *{} 제목 글자 태그 ㄴㅁ어라ㅣㄴ어랑ㄴ렁나ㅣㅁ헝나ㅣㅓ항니ㅓ하니ㅓ나ㅣㄹ 2. 태그 선택자 h1{} p{} 제목 글자 태그 ㄴㅁ어라ㅣㄴ어랑ㄴ렁나ㅣㅁ헝나ㅣㅓ항니ㅓ하니ㅓ나ㅣㄹ [기본 예제 5-2] 아이디 선택자 #header{} #header 태그 #aside 태그 #content 태그 [기본 예제 5-3] 클래스 선택자 1. 클래스 선택자를 1개 사용하기 .select{} 사과 바나나 오렌지 감 2. 클래스 선택자를 여러 개 사용하기 .item{} .header{} 동해물과 백두산이 [기본 예제 5-4] 속성 선택자 [기본 예제 5-5] 후손 선택자 dlfjs Nabigation lfdsofs ldsoaghrjgirjgrw [기본 예제 ..
[HTML] 입력 양식 태그와 구조화 태그
[기본예제 4-1] 기본 입력 양식 태그 [기본 예제 4-2] 간단한 입력 양식 생성 이름 성별 남자 여자 [기본 예제 4-3] 선택 가능한 입력 양식 1. 한 항목만 선택하기: select 태그 김밥 떡볶이 순대 어묵 2. 여러 항목 선택하기: multiple 김밥 떡볶이 순대 어묵 3. 선택 옵션 묶기: 김밥 떡볶이 햄버거 감자튀김 [기본 예제 4-4] 연관있는 입력 양식 그룹으로 묶기 입력 양식 이름 이메일 [기본 예제 4-5] 공간 분할 방법 div태그 - block 형식 div태그 - block 형식 div태그 - block 형식 div태그 - block 형식 span 태크 - inline 형식 span 태크 - inline 형식 span 태크 - inline 형식 span 태크 - inline..
[HTML] 기본 태그
[기본예제 2-1] 내부 스타일 style 태그를 이용해 html 코드에 직접 입력 Hello World..! [기본 예제 2-2] 외부 스타일시트 css파일에 별도 작성하고 link 태그로 불러옴 h1{ color:white; background:black; } Style.css Hello World..! html [기본 예제 2-3] 내부/외부 자바스크립트 작성 1. html 내부에 태그로 작성 2. 태그로 외부 js 파일 불러옴 alert('outer java'); [기본예제 3-1] 제목 제목 글자 태그 1 제목 글자 태그 2 제목 글자 태그 3 제목 글자 태그 4 제목 글자 태그 5 제목 글자 태그 6 [기본 예제 3-2] 제목 본문 제목 아너무하기싫다,,,.. 자꾸한글이깨짐.... 이유가머임?..
