|
HTML&CSS요약 1. html기본 형식 <html> <head> <title> </title> </head> <body> </body> </html> 2. html태그에 대한 문법 규칙 <태그 이름 속성1=부동산 가치1" 속성2=부동산 가치2”>태그</태그 이름> 3. 하이퍼링크 태그 <a href="어디로 뛰어갈까" ></a> 기능: 페이지 건너뛰기. 질문: 만약 이미지를 하이퍼커넥티드(picture1.jpg)로 만들고 싶다면, 어떻게 작성해야 하나요? <a href=""><img src="picture1.jpg" /></a> 4. 표의 문법 <table> <tr> <td> 소형 형태 </td> <td>내용</td> </tr> </table> 참고: 양식의 내용은 다음과 같이 작성되어야 합니다.TD안으로 5. 표의 공통 속성 a) 표:경계=숫자(베젤) bordercolor=테두리 색상bgcolor=배경색cellspacing=숫자 (셀 간 거리) cellpadding=숫자 (내용과 테이블 경계 사이의 거리)키="고정된 숫자|퍼센트%"키가폭="고정된 숫자|퍼센트%"폭 b) Tr: bgcolor=배경색키="고정된 숫자|퍼센트%"키가폭="고정된 숫자|퍼센트%"폭국경색 c) Td: bgcolor=배경색키="고정된 숫자|퍼센트%"키가폭="고정된 숫자|퍼센트%"폭콜스팬=숫자 (열을 병합)행 길이=숫자 (행 병합)국경색 질문: 사진이 중앙에 있을 때 테두리의 두께와 색상을 어떻게 설정하나요? 테두리 폭 테두리 색상 6. 형태 a) 기능: 서버에 데이터를 제출하기 b) 문법:<폼 ></form> c) 형태 요소 1. 입력태그 i. 본문<입력 타입=텍스트 /> ii. 비밀번호<입력 유형=비밀번호 /> iii. 단일선택식<입력 유형=라디오 이름="같은 이름" /> iv. 객관식<입력 유형=체크박스 /> V. 버튼<입력 유형=버튼 /> 전송<입력 유형=제출 /> 리셋<입력 유형=reset> 속성: 텍스트:크기=텍스트 길이최대 길이=최대 문자 입력 가능 선택:확인 완료기본적으로 선택됨 버튼:가치=버튼 위에 표시된 텍스트 2드롭다운 라벨: 구문, 속성 <다중 선택(여러 선택이 가능)크기=선택지의 수를 확인할 수 있습니다> <옵션 선택됨(기본적으로 선택됨)>내용</option> </select> 7. CSS계단 스타일 시트 기능: 콘텐츠 풍부화 및 코드 볼륨 감소 글쓰기: 장소 (3종) 1. 인로우:태그에 직접 속성을 추가하세요스타일="재산:속성 값;…” 2. 임베딩:에수장라벨 작성:<스타일 유형="텍스트/CSS"> 셀렉터{특성:속성 값;…} </style> 점수3기본 셀렉터:HTML셀렉터,클래스클래스 셀렉터 (.클래스명),아이디셀렉터 (#id이름)은 유일한 것입니다 3. 외부:별도의 개를 만드세요.css파일을 작성한 후 사용할 페이지에 참조 코드를 추가하세요2일종의 글쓰기 기억하세요: 에수장안에 태그를 추가하세요<link rel="stylesheet" type="text/css" href="stylesheet 파일 이름.css”> 참고: 스타일시트에 충돌이 있을 경우, 인라인을 사용하기 전에 인라인을 우선순위로 지정하고 마지막으로 아웃사이드를 사용하세요 질문: 사용DIV+CSS배치 및표레이아웃의 장단점은 무엇인가요? 8. 의사클래스 (선택기) a:link {color: #FF0000} /* 방문하지 않은 링크 */ a:방문 {색상: #00FF00} /*방문한 링크들*/ a:호버 {color: #FF00FF} /* 마우스 이동 → 링크 */ a:active {color: #0000FF} /*선택된 링크*/ 9. 사단(박스 모델) 기능: 대체표표 글쓰기:<div>내용(중첩 가능)디비전)</div> 사용법: 너비와 높이를 설정, 결합 가능위치속성 일반적인 특성: 1. 국경: 상자 두께 2. 마진: 상자 간 거리 3. 패딩: 상자 안의 내용물과 상자 사이의 거리입니다. 4. 높이、너비: 높이, 너비 5. 배경: 박스 색상, 패턴 6. 플로팅: 박스석왼쪽、오른쪽 10. 합격드림위버템플릿을 만드세요 기능: 동일한 웹사이트 스타일을 유지하고, 코드 양을 줄이며, 웹사이트 개발 효율성을 향상시킵니다 템플릿 생성 및 사용 방법 1. Create: file à new à regular à HTML템플렛à Create 2. 저장: 자신의 웹사이트에 저장하세요. 참고: 올바른 경로는 웹사이트 하단에 템플릿 폴더가 나타나며, 이 폴더에 템플릿 파일을 저장합니다 (.dwt) 3. 글쓰기: 일반 페이지를 쓰는 것과 마찬가지로 조판하고 같은 스타일의 콘텐츠를 웹사이트에 작성하세요. 다른 콘텐츠의 경우, 편집 가능한 영역을 생성해야 합니다(만들고 싶은 편집 영역 위에 마우스를 올리고 우클릭 후 '템플릿 à 새 편집 가능 영역'을 선택하세요). 4. 템플릿을 기반으로 페이지 만들기: 새 파일 à 템플릿 à 사용할 템플릿 선택 11. 드림위버관련 지식 포인트 답변. 합격드림위버웹사이트 만들기: 사이트à New site à advanced à local information 사이트 이름을 지정하고 사이트로 가는 경로를 설정하세요 참고: 사이트 경로는 중국어로 되어 있지 않아야 합니다 B친숙함드림위버우리는 이전에 배운 기본 태그를 어떻게 출력할지 알아야 합니다 초점은 표를 통한 페이지 타이포그래피에 맞춰져 있습니다 C에서드림위버하이퍼링크 사용 (상대 주소와 절대 주소) 12. CSS공통 특성 border:1px solid #000000; /*국경에 대해3공통 특성*/ 너비; 키; /*너비와 높이를 설정하세요*/ 텍스트 정렬 /*콘텐츠를 중앙 좌우로 설정하세요*/ 줄 높이 /*조정 내용이 위아래로 중심에 위치해 있습니다*/ 플로트 /*플로트(플로팅은 수평 하이퍼링크를 만들기 위해 반드시 사용해야 합니다)*/ 여진 /*박스 바깥 거리를 설정하세요*/ 패딩 /*상자 안의 거리를 정하세요*/ 위치 /*포지셔닝, 나중에 다룰 거야왼쪽 상단함께 사용해*/ color:#000000; /*텍스트 색상 설정하세요*/ background-color:#000000; /*배경색 설정*/ font-size:14px; /*글꼴 크기 설정*/ 텍스트 장식 /*하이퍼링크가 밑줄을 긋는지 설정하세요, 일반적으로 사용됩니다밑줄또는전혀 없음*/ list-style-type:none; /*하이퍼링크 스타일 지정(점 없음)*/
|