N스크린하이브리드앱과정/HTML&CSS 39

[3주][4일][1~2th] HTML: 요소의 크기 지정 및 여백 처리하기. 외 2종

☆ 요소의 크기 지정 및 여백 처리하기 헤드 body{ margin-top:30px; font:1.2em "맑은 고딕", "Times New Roman", sans-serif; } h1{ padding-bottom:20px; text-align:center; } div{ margin:0px auto; width:70%; } p{ padding: 10px 0px; } 바디 알버트 아인슈타인 어록 It's not that I'm so smart, it's just that I stay with problems longer. 나는 똑똑한 것이 아니라 단지 문제를 더 오래 연구할 뿐이다. I never came upon any of my discoveries through the process of ration..

[3주][3일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제(2)

어제 배운 ul,li태그를 이어서 실습을 하겠다. 전체 이미지 전체 소스 1. table2를 바꿔보기 (1) table2에 스타일 적용 .left ul li a{ background: #999; display:block; width: 200px; height: 38px; } (2) display:block;을 없애줌 ==> 셀 안의 공간이 다 없어짐! .left ul li a{ background: #999; width: 200px; height: 38px; } (3) border-bottom : 표의 밑부분만 밑줄을 그어줌 .left ul li a{ background: #999; display:block; width: 200px; height: 38px; border-bottom: 1px solid ..

[3주][2일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제.

**태그 활용** 1. li태그 사용하기 (1) 본래의 태그 (2) 스타일을 적용했을 때 2. 배경 적용 ul{ list-style-type: none; background:#ff0; width:250px; height:250px; } 3. 행 간격 주고 li에 배경주기 li{ background:#0f0; margin: 10px; //행 간격 padding:10px; } 4. 셀 간격 넓히기 li{ background:#0f0; margin: 10px; //행 간격 padding:10px 10px 10px 20px; } 5. 배경이미지 적용하기 li{ background-image:url("bg_check.jpg"); margin: 10px; padding:10px 10px 10px 20px; } 6...

[3주][1일][5~7th] 자바스크립트(JAVA SCRIPT)

☆ 내장함수 1. confirm : 확인/취소창 만들기 - 확인을 눌렀을 때: 아래 그림 - 취소를 눌렀을 때: "다음기회에" 출력. ☆ 함수정의 & 호출 1. function: 함수를 정의하는 것. 2. prn() 함수 호출. body에서 수행, java와 쓰임새가 똑같음. (1) prn() 함수값 (2) max() 함수값 ☆ 배열의 출력(1차원 배열) * 전체 소스 1. 배열의 선언(설정) : 9~13번 (1) arr1=new Array(5); arr1[0]=1; arr1[1]=2; (2) fruit = new Array("apple","banana","lemon","orange"); -> (1) 또는 (2)의 방법을 사용할 수 있다. 2. 배열의 개수 출력 : 16번 alert(fruit.lengt..

[3주][1일][1~2th] HTML5 : 표 이쁘게 꾸미기(이클립스)

1. 테이블 만들고, CSS 적용해서 표 스타일 완성하기 * 테이블 내용 소스(body태그) 프랑스 와인 프랑스 와인 매니아는 프랑스에 많다. 차종 24시간 48시간 72시간 추가요금 SM3 45,000 90,000 135,000 6,000 모닝 42,000 84,000 126,000 6,000 소울 61,000 122,000 183,000 9,000 윈스톰 94,000 188,000 282,000 13,000 제주 5월 기준이며 추가요금은 시간당입니다. 차종 24시간 48시간 72시간 추가요금 SM3 45,000 90,000 135,000 6,000 모닝 42,000 84,000 126,000 6,000 소울 61,000 122,000 183,000 윈스톰 94,000 188,000 282,000 제주..

[2주][5일][5~7th] 자바스크립트 실습. alert = 경고창.

★ 자바스크립트 실습(1) 1. 새로운 HTML파일을 생성한다.(test1.html) 2. 다음의 코딩을 작성한다. 3. 컴파일 후 실행하면 뜨는 메시지들 (1) alert 메시지 ☞ , 둘 다 가능! 경고 메시지가 출력된다. (2) js파일을 만들어서 출력하기 //js파일의 내용을 불러옴 (3) 하이퍼링크 만들기 하이퍼링크 하이퍼링크를 누르면, 자바스크립트 메시지가 뜬다. (4) 버튼 만들기 하이퍼링크 버튼을 누르면, "버튼클릭" 경고창이 표시된다. ★ 자바스크립트 실습(2) (1) 계산결과 경고창에 표시하기 ☞ 11번줄 (2) 계산결과 일반 창에 표시하기 ☞ 8~10번 ★ 자바스크립트 실습(3) (1) 이름과 나이 출력하기 ☞ 20번부터... var name="홍길동"; var age=25; docu..

[2주][4일][1~2교시] CSS: 레이아웃 만들기, 영역 나누기.

레이아웃 만들고, 영역 나누기 - #left{}, ※ 스타일 적용이므로 태그 안에 들어간다. css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라진다. css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라진다. css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라진다. #left를 right로 적용했을때 #left{ float:right; width:150px; background-color:#ff0; //노랑 margin:0px 0px 0px 50px; //위쪽부터 시계방향순: 위,오른,아래,왼쪽 padding-bottom:50px; }

[2주][4일][1~2교시] CSS: 가상선택자. 롤오버효과, 하이퍼링크 등

**가상선택자**(선택자 끝에: 가상선택 내용붙임) ※ 스타일 css 적용은 123 456 789 123 456 789 ☆ 롤오버효과 - 표 배경 ☆ 롤오버효과 - 셀 안의 글자 두번째 행의 셀 안의 글자가 파란색이 되었다. ☆ 하이퍼링크 밑줄 없애기 ☆ 하이퍼링크에 롤오버 적용 전체소스 ☆ 하이퍼링크가 색 바뀌면서 롤오버효과 주기 마우스를 갖다 대었을 때 ☆ 표에 밑줄효과 주기 (1) 표에 클래스 이름을 지정해준다. 123 456 7 8 9 (2) 스타일을 적용한다.

[2주][3일] 웹표준: market.html에 css 스타일 적용하기

*market.html을 css스타일로 적용해보기 --> style은 3-TOP System[유리, 창호, 실란트]창틀에서 유 리, 실란트까지 KCC의 첨단기술을 적용하여 에너지를 빈틈없이 관리... 3-TOP System[유리, 창호, 실란트]창틀에서 유 리, 실란트까지 KCC의 첨단기술을 적용하여 에너지를 빈틈없이 관리... 3-TOP System[유리, 창호, 실란트]창틀에서 유 리, 실란트까지 KCC의 첨단기술을 적용하여 에너지를 빈틈없이 관리... (1) table 스타일 적용 결과 (2) h3에 스타일 적용 결과 (3) img에 스타일 적용 결과 *layout.html 만들기 전체 소스 css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라 진다. css에 따라 같은 html 구조라도..