"확인란" 유형으로 원하는 입력 요소를 선택하려면 선택기를 사용할 수 있습니다. ':체크박스'. 예시:
어디 매니저- 때 호출되는 핸들러 이벤트 변경
jQuery 콜백 객체 작업: 콜백 목록 사용
jQuery의 Callbacks 개체를 사용하면 목록과 같은 것을 만들 수 있습니다. 역함수, fire() 유틸리티 메서드가 호출될 때 실행됩니다. 이 경우 fire() 메서드를 호출할 때 각 콜백 함수에서 사용할 일부 인수를 전달할 수 있습니다. 작동 방식, 이제 몇 가지 예를 들어 분석하겠습니다.
우리는 초점 상실을 포착합니다. jQuery의 blur() 메서드
jQuery의 blur() 메서드를 사용하면 페이지의 특정 요소에 핸들러를 할당할 수 있습니다. 이 핸들러는 이 요소에서 포커스를 잃는 즉시 호출됩니다. 처음에는 이 이벤트가 주로 양식 요소(입력 태그)와 관련되었지만 최신 버전브라우저는 거의 모든 종류의 DOM 요소에 대해 이 이벤트를 처리할 수 있습니다.
선택한 개체의 내용 앞에 내용을 삽입합니다. jQuery의 before() 메서드
jQuery의 before() 메서드를 사용하면 지정된 각 개체 집합의 내용 앞에 특정 내용이나 개체를 삽입할 수 있습니다.
메서드 구문은 간단합니다.
| 1 | .before(내용, ) |
두 번째 변형:
| 1 | .before(함수) |
제이쿼리. attr() 메서드. 요소에 속성을 가져오거나 추가하는 방법
jQuery를 사용하면 값을 검색하거나 반대로 설정 및 수정하여 원하는 요소의 속성에 매우 쉽게 액세스할 수 있습니다. 이러한 조작을 위해 attr() 메서드가 사용됩니다.
jQuery의 .appendTo() 메서드. 요소 끝에 콘텐츠 추가
appendTo() 메서드는 기본적으로 append() 메서드와 동일한 작업을 수행합니다. 차이점은 대체로 구문에만 있습니다. append()에 대해 이 메소드를 추가하여 원하는 선택기를 지정하면 지정된 객체의 내용 끝에 정확히 추가해야 하는 것을 괄호 안에 표시하고 appendTo()에 대해 추가해야 하는 것은 다음과 같습니다. 메서드 매개 변수로 더 이상 대괄호 안에 있지 않고 appendTo()가 호출되는 개체로 메서드 자체 바로 앞에 있습니다. 차이점은 다음 예를 통해 더 잘 이해될 것입니다.
jQuery .animate() 메서드: 이미지, 텍스트 및 무엇이든 애니메이트
.animate() 메서드를 사용하면 개체 자체의 CSS 속성을 사용하여 애니메이션 효과를 만들 수 있습니다. 이 메서드에는 전달된 매개변수 수가 다른 두 가지 변형이 있습니다.
Movavi로 비디오 변환
최근에는 출퇴근 시간을 잘 활용하기 위해 미리 휴대폰에 파일을 더 많이 다운로드하려고 합니다. 유용한 비디오롤러. 휴대 전화는 Android이며 가장 최근에 스마트 폰이 어떤 이유로 AVI 형식의 비디오 재생을 거부했을 때 문제에 직면했습니다. 플레이어가 약한지, 아니면 운영 체제의 세부 사항인지 - 나는 모릅니다. 그러나 문제는 오랫동안 해결될 필요가 없었습니다. 인터넷에서 상당히 기능적인 비디오 변환기를 찾았습니다. 이 변환기는 한 형식에서 다른 형식으로 변환할 수 있을 뿐만 아니라 다음을 고려하여 파일을 준비할 수 있습니다. 장치의 특성. 여기 에 대한 간략한 설명이 멋진 프로그램을 사용하는 방법.
앞서 약속했듯이 이 튜토리얼에서는 더 이상 사용되지 않는 align 속성을 사용하지 않고 페이지의 HTML 태그 콘텐츠를 수평으로 정렬하는 방법을 배웁니다. 짐작하셨겠지만, 우리는 다시 스타일(CSS) 또는 우리가 가장 좋아하는 스타일 속성을 사용할 것입니다.
따라서 HTML 요소의 내용을 정렬하려면 style 속성에 다음 값 중 하나를 할당해야 합니다.
- 텍스트 정렬:가운데- 단락과 같은 요소의 중심에 각 줄을 정렬합니다.
- 텍스트 정렬:왼쪽- 각 줄은 요소의 왼쪽과 같은 높이입니다(기본값).
- 텍스트 정렬:오른쪽- 각 라인은 오른쪽에 대해 눌러집니다.
- 텍스트 정렬:정렬- 요소의 왼쪽과 오른쪽에 즉시 정렬합니다. 설명합니다. 일반적으로 단락과 같은 요소는 텍스트의 한 면이 항상 평평하고 다른 면은 줄 길이가 약간 다르기 때문에 "찢겨져" 있습니다. 그리고 text-align:justify 값을 사용하면 각 줄의 너비가 고르게 분포됩니다. 필요한 경우 브라우저는 단어 사이에 추가 공백을 추가하고 줄의 첫 번째 단어와 마지막 단어는 항상 해당 쪽에 눌러져 있으므로 블록이 양쪽에 균일합니다.
태그 콘텐츠 정렬 예
센터 제목입니다.
중앙 단락.
브라우저의 결과
센터 제목입니다.
단락의 텍스트가 오른쪽으로 눌러집니다.
중앙 단락.
일반적으로 수평 정렬은 블록 태그와 테이블 셀에만 적용됩니다(나중에 자세히 설명). 반면에 내장(인라인)에는 적용을 해보지 못하지만. 왜요? 인라인 요소의 너비가 내용과 같다는 것을 최근에 배웠던 것을 기억하십니까? 따라서 이 콘텐츠는 정렬할 곳이 없으며 브라우저는 단순히 "예술"을 무시합니다. :)
숙제.
- 기사의 제목, 두 개의 섹션, 첫 번째 섹션에 하나의 하위 섹션을 만듭니다. 그리고 기사 제목이 페이지 중앙에 위치하도록 합니다.
- 전체 페이지의 글꼴을 Arial로 설정하고 모든 제목을 Times로 설정하고 기울임꼴로 설정합니다.
- 기사 제목의 텍스트 색상을 #FF6600으로, 섹션을 #6600FF로 설정하고 하위 섹션을 변경하지 않은 상태로 둡니다.
- 각 제목 아래에 하나의 단락을 작성하고 각 단락의 텍스트는 브라우저에서 볼 때 최소 세 줄을 차지해야 합니다.
- 두 번째 단락을 가운데에 맞추고 세 번째 단락을 오른쪽에, 네 번째 단락을 양쪽에 맞춥니다.
안녕하세요! 계속해서 기본기를 익히고 HTML 언어. 텍스트를 중앙, 너비 또는 가장자리에 정렬하기 위해 무엇을 작성해야 하는지 알아보겠습니다.
업무에 착수하여 HTML에서 텍스트 센터를 3으로 만드는 방법을 살펴보겠습니다. 다른 방법들. 마지막 두 개는 스타일 시트와 직접 관련이 있습니다. 사이트의 페이지에 연결되어 모양을 설정하는 CSS 파일일 수 있습니다.
방법 1 - HTML로 직접 작업
사실 모든 것이 아주 간단합니다. 아래 예를 참조하십시오.
단락을 중앙에 맞춥니다.
텍스트 조각을 다른 방식으로 이동하려면 "center" 매개변수 대신 다음 값을 입력합니다.
- justify - 페이지 너비에 맞게 텍스트를 정렬합니다.
- 오른쪽 - 오른쪽 가장자리에;
- 왼쪽 - 왼쪽.
비유하자면 헤더(h1, h2), 컨테이너(div)에 있는 내용을 이동할 수 있습니다.
방법 2 및 3 - 스타일 사용
위에 제시된 디자인은 약간 변형될 수 있습니다. 효과는 동일할 것입니다. 이렇게 하려면 아래 코드를 작성해야 합니다.
텍스트 블록.
이 형식에서 코드는 정렬을 위해 HTML에 직접 작성됩니다. 텍스트 내용가운데에.
더 있나요? 대체 옵션결과를 달성하기 위해. 몇 가지 작업을 수행해야 합니다.
1단계. 기본 코드에서 다음을 작성합니다.
텍스트 자료입니다.
2단계. 포함된 CSS 파일에 다음 코드를 입력합니다.
Rovno(텍스트 정렬:중앙;)
"rovno"라는 단어는 다르게 부를 수 있는 클래스의 이름일 뿐입니다. 이것은 프로그래머의 재량에 맡깁니다.
비유하자면 HTML에서는 텍스트를 중앙에 쉽게 정렬하고 양쪽 정렬하고 페이지의 오른쪽이나 왼쪽에 정렬할 수 있습니다. 보시다시피, 목표를 달성하기 위한 하나의 옵션이 없습니다.
몇 가지 질문:
- 정보 제공을 위한 비상업적 프로젝트를 수행하고 있습니까?
- 귀하의 사이트가 검색 엔진에서 좋은 순위를 차지하기를 원하십니까?
- 온라인으로 수입을 벌고 싶습니까?
모든 대답이 긍정적이라면 웹사이트 개발에 대한 통합 접근 방식을 살펴보십시오. 이 정보는 WordPress CMS에서 작동하는 경우 특히 유용합니다.
귀하의 사이트는 인터넷에서 수동적 또는 능동적 수입을 창출하는 많은 옵션 중 하나일 뿐입니다. 내 블로그는 인터넷상의 재정적 기회에 관한 것입니다.
교통 차익 거래, 카피라이팅 및 원격 협력으로 주요 또는 추가 수입을 가져오는 기타 활동 분야에서 일한 적이 있습니까? 지금 바로 제 블로그 페이지에서 이에 대해 더 자세히 알아볼 수 있습니다.
앞으로 나는 아직 조금 현실적이지 않은 게시 할 것입니다 유용한 정보. 연락을 유지하다. 원하는 경우 이메일로 Workip 업데이트를 구독할 수 있습니다. 구독 양식은 아래에 있습니다.
많은 텍스트 요소웹 페이지에서 가운데 정렬되어야 합니다. 대부분 헤드라인. 에서 어떻게 되는지 보자 CSS 정렬센터 텍스트.
텍스트 정렬 속성
이에 대한 책임 텍스트 정렬 속성네 가지 의미가 있습니다.
- 왼쪽 - 위치한 요소의 왼쪽 가장자리에 대한 텍스트 정렬
- 오른쪽 - 오른쪽 정렬되지만 텍스트 방향은 동일하게 유지됩니다.
- 중앙 - 중앙에. 그것이 우리에게 필요한 것입니다. 없음 추가 옵션설정할 필요가 없습니다. 브라우저 자체가 다른 화면 해상도에서 텍스트를 정확히 중앙에 배치합니다.
- 양쪽 맞춤 - 각 줄의 단어가 전체 너비를 차지하도록 늘어나는 경우 양쪽 맞춤
예를 들어 제목이 있는 임의의 텍스트가 있습니다.
헤더
표제(h1)를 중앙에 정렬하려면 다음과 같이 작성해야 합니다.
H1(
텍스트 정렬: 가운데
}
이 속성은 일반 텍스트뿐만 아니라 모든 인라인 요소도 정렬합니다. 예를 들어 이미지는 기본적으로 인라인 요소이므로 이 규칙의 영향도 받습니다.
텍스트 정렬은 float 속성처럼 작동하지 않습니다. 텍스트가 있는 블록 요소에 텍스트 정렬을 적용하면 블록의 동작이 손실되지 않습니다. 블록 자체가 아니라 그 안의 텍스트가 눌러집니다. 이것은 전체 요소를 오른쪽 또는 왼쪽으로 보내는 float 속성과 다릅니다.
우리는 HTML을 계속 연구합니다. 이 자습서에서는 HTML 페이지 헤더, 헤더가 무엇인지, 올바르게 사용하는 방법 및 사용할 수 있는 경우를 살펴봅니다. 또한 페이지를 이미 텍스트로 채울 수 있도록 단락을 분석하지만 가장 중요한 것은 올바르게 수행하는 것입니다.
첫 번째 기사를 읽지 않았다면 여기에서 찾을 수 있습니다.
- 수업 1. HTML이란 무엇입니까?
이론 및 실습 - HTML 페이지의 단락 및 제목
오늘은 단락과 제목에 대해 알아보겠습니다. 간단하게 시작하겠습니다 - 단락과 적용되는 위치.
페이지당 단락
이제 단락 태그가 표시되는 코드의 예를 보여 드리겠습니다.
첫 번째 수업의 기본 구조를 이미 기억하고 있습니다. 거기에서 우리는 기본을 해체하고 HTML이 무엇인지 살펴보았습니다. 따라서 우리는 태그 사이에 무엇이 있는지에 초점을 맞출 것입니다. .
페이지에 텍스트를 작성할 때 단락이든 이미지 아래의 작은 설명 줄이든 상관없이 이 텍스트를 태그 안에 넣어야 합니다.
다음 단원에서는 이러한 단락의 서식을 지정하는 과정을 볼 수 있습니다. 이제 태그 없이 페이지에 태그를 넣을 수 없다는 것을 이해해야 합니다. 미래에는 텍스트의 이 특정 섹션에 대해 일부 개별 스타일을 적용하기 어려울 것이기 때문입니다.
몇 단락을 작성해 보십시오. 태그에 일부 단락을 넣고 태그 없이 일부 단락을 남겨둡니다. 그리고 당신은 즉시 차이점을 볼 수 있습니다. 이 태그 안에 단락을 작성하면 즉시 들여쓰기가 발생하기 때문입니다. 이제 페이지의 HTML 제목으로 이동하겠습니다.
페이지당 HTML 제목
에 HTML 문서의미론이 있습니다. 나는 HTML5 기술과 새로운 태그에 대해 말하는 것이 아닙니다. 여기서는 HTML의 기본을 빠르게 마스터할 수 있도록 가장 기본적인 것만 분석합니다. 의미론이란 제목, 단락, 표 등이 동일한 태그를 사용하여 생성되어서는 안 된다는 것을 의미합니다. 할 수 있지만 HTML 기술상황에 따라 보다 다양하고 적절한 태그가 제공됩니다. 그리고 HTML 코드로 자유롭게 작업하려면 기본 태그만 마스터하면 됩니다.
나는 단락에 대해 이미 알고 있는 태그를 사용해야 한다는 사실에 대해 이 작은 소개를 썼습니다. 그러나 제목의 경우 다음으로 시작하는 태그가 사용됩니다. 영문자"시간".
다음은 사용할 수 있는 전체 헤더 목록입니다.
이러한 태그 중 일부는 훨씬 더 자주 사용됩니다. h1, h2 또는 h3과 같은 태그입니다. 누군가가 이미 CSS에 익숙하다면 h3 페이지의 HTML 제목이 h1 또는 h2처럼 보이도록 스타일이 지정될 수 있다는 것을 이해합니다. 그러나 적어도 SEO 최적화에 있어서 의미는 근본적으로 다릅니다. 일반적으로 태그 내부의 이러한 숫자는 이 HTML 표제 또는 해당 HTML 표제의 중요성 수준으로 이해해야 합니다. 따라서 이러한 요소를 주의 깊게 연구한 다음 검색 엔진당신의 기사가 주목됩니다.
CSS에 도달할 때까지 브라우저에서 기본적으로 설정되는 제목 스타일을 볼 수 있습니다. 이러한 태그를 하나씩 삽입하고 내부에 텍스트를 작성하면 다음이 표시됩니다.
검색 로봇의 경우 페이지의 제목 사용도 중요합니다. 우리 책에서 읽을 수 있는 특정 규칙이 있습니다. 사이트 홍보에 PDF 책.
모든 것을 공부한 후에는 즉시 코드에 들어가서 모든 것을 직접 작성하려고 합니다. 이것은 모든 프로그래밍 언어를 마스터하는 가장 빠른 방법입니다. 그러나 HTML 기술은 어떤 프로그래밍 언어보다 훨씬 가볍기 때문에 누구나 알아낼 수 있습니다. 이렇게 하면 태그를 더 잘 기억할 수 있습니다.
비디오 자습서 - HTML 페이지 제목? (관행)
다음 태그로 작업하는 예에 대한 시각적 비디오:
숙제
D/W:예를 들어, 5-7개의 단락과 2-3개의 다른 제목으로 구성된 짧은 텍스트를 작성하십시오.
단락과 HTML 페이지 제목을 더 많이 연습하세요!
www.sitehere.ru
HTML로 표를 만드는 방법
모든 테이블에는 행과 열이 있습니다. 차례로 텍스트와 이미지를 포함할 수 있습니다.
페이지에 표를 추가하려면 태그를 사용하세요.
행과 열은 태그를 사용하여 정의됩니다.
테이블 행(
하나의 행과 네 개의 열로 구성된 실용적인 테이블을 만들어 보겠습니다. 테이블의 시작을 표시해야 합니다(
| ), 줄 끝( |
결과:
이제 태그를 사용해보자
결과:
표 너비를 400으로 설정했고 보시다시피 첫 번째와 세 번째 셀은 굵게 표시되고 가운데 정렬됩니다. 나머지는 왼쪽에 있습니다. 혼동되지 않도록 항상 코드 형식을 지정하는 데 충분한 시간을 할애하는 것이 좋습니다. 작은 테이블에서는 이것이 큰 역할을하지 않을 수 있지만 큰 테이블에서는 ...
너비에 대해 언급한 이후로 조금 더 이야기해 보겠습니다. 테이블의 너비는 너비 속성인 높이 - 높이에 의해 설정됩니다. 이러한 방식으로 테이블의 너비와 높이뿐만 아니라 셀의 크기도 변경할 수 있습니다(모두 테이블에 맞아야 합니다. 그렇지 않으면 브라우저가 테이블에서 원하는 것을 이해하지 못합니다).
이러한 값(너비 및 높이)은 픽셀, 백분율로 지정됩니다. 아무 것도 쓰지 않고 그대로 둘 수 있습니다. 브라우저는 "px"를 쓰기에 너무 게으르다고 생각하고 숫자를 픽셀로 간주합니다.
글쎄, 하나 이상의 표 셀의 내용을 정렬하려면 왼쪽, 가운데, 오른쪽 값과 함께 align 속성을 사용하십시오. 이것은 수평 정렬이지만 수직 정렬도 있으며 고유한 별도의 속성인 valign이 있으며 값을 사용할 수 있습니다. 기준선( 수직 정렬정확히 기준선을 따라), 하단(하단을 따라), 중간(셀 값이 가운데에서 수직으로 정렬됨), 상단(상단을 따라). 기본적으로 브라우저는 셀을 가운데(가운데)에 맞춥니다.
표의 테두리(테두리)를 늘리고 색상을 변경합니다.
나는 이미 테이블의 프레임과 너비로 작업하는 방법을 보여주었습니다. 일반적으로 기본적으로 표는 항상 브라우저에 프레임 없이 표시되며 이것이 항상 편리한 것은 아닙니다. 그 이유는 다음과 같습니다.
어떻게 든 별로 동의하지 않습니다. 그러나 이것은 내가 포스트 시작 부분의 예제에서 사용한 HTML 테두리 속성에 이미 익숙한 사람들에게는 문제가 되지 않습니다.
속성을 1개만 추가하면 더 좋아집니다.
엑셀같다! 선(그리드)에 의한 세포 분할이 없다고 상상해 보십시오. 글쎄, 공포. 그러나 경계를 10으로 설정하면 어떻게 될까요?
보다시피 테두리는 테이블의 바깥쪽 테두리와 프레임에만 영향을 미치며 바깥쪽 프레임의 너비는 변경하고 테이블 셀 사이의 테두리는 그대로 유지합니다.
this - bordercolor 속성도 있기 때문에 이 테두리의 색상을 변경해 보겠습니다. 값을 "d3d3d3"으로 설정합니다. 결과:
테이블 들여쓰기 방법
표의 들여쓰기는 "가독성"과 셀 테두리를 높이는 데도 필요합니다. 패딩을 생성하려면 "cellspacing" 속성이 필요합니다. 이 속성을 적용하여 4x4 테이블로 계속 작업하겠습니다. 코드를 업데이트하겠습니다(게시물을 어지럽히지 않도록 한 줄만 포함합니다).
결과:
이것은 세포 외부의 들여 쓰기였습니다. 그러나 셀 내부에 들여쓰기를 설정하는 것과 유사한 속성이 있습니다 - cellpadding, 이제 10과 같게 만들 것입니다. 그러면 셀의 내용에서 테두리까지의 거리가 어떻게 증가했는지 알 수 있습니다. 테이블이 과도하게 커지지 않도록 작게). 코드:
결과:
이제 "cellspacing"을 제거하고 "cellpadding"만 남깁니다. 결과:
그래서 테이블에 들여쓰기를 만들고 관리하는 방법을 알아냈습니다. 훌륭한! 줄 바꿈을 수행하는 방법에 관심이 있는 경우 여기에 작성됩니다.
표의 셀을 올바르게 병합하는 방법
테이블의 셀을 병합하기 위한 특수 속성도 있습니다. 이것은 "colspan"과 "rowspan"입니다. 첫 번째(colspan)는 열(가로)로 셀을 결합하고, 두 번째(rowspan)는 행 또는 세로로 셀을 결합합니다. 우리 테이블에 무언가를 조인합시다.
여기 조심스럽게! 셀을 병합할 때 속성 매개변수에 지정한 숫자(1 빼기)만큼 셀 수를 줄여야 합니다. HTML로 테이블을 만들고 불필요한 셀을 삭제하지 않고 셀을 병합하면 사이트가 이동합니다. 우리는 둘을 결합합니다 - 우리는 하나를 삭제합니다. 우리는 세 개를 결합합니다 - 우리는 두 개를 삭제합니다. 등등.
열 또는 열의 셀을 병합할 때 하나의 셀을 삭제해야 합니다! 병합하는 셀 수만큼 이 작업을 수행합니다. 이제 예를 보여드리겠습니다.
열 또는 열의 셀을 병합할 때 하나의 셀을 삭제해야 합니다! 병합하는 셀 수만큼 이 작업을 수행합니다.
이제 예를 보여드리겠습니다. 현재 테이블은 다음과 같습니다.
숫자 "1과 2", "5와 9", "4, 8, 12", "6과 7"이 있는 셀을 병합해 보겠습니다. 그것이 얼마나 멋진지 봐라, 나 자신도 기대하지 않았다!
연합의 원리는 이것이다.
셀 번호 1과 2를 수평으로 병합할 때 첫 번째 셀에 "colspan =" 2 ″를 작성하고 두 번째 셀의 내용을 첫 번째 셀에 배치하고(병합 중) 두 번째 셀을 삭제(또는 HTML에서 숨겨야 합니다. 한-나중에 보여줄 것입니다.)
4번, 8번, 12번 셀을 세로로 병합할 때 첫 번째 셀(4번)에 "rowspan =" 2 ″ "라고 쓰고 나머지는 병합된 셀에 넣은 후 내용을 삭제해야 합니다.
여기 내가 생각해 낸 코드가 있습니다. 이해를 돕기 위해 셀을 숨겼지만 삭제할 수도 있습니다.
내가 명확하게 설명하고 좋은 예를 들었기를 바랍니다.
테이블의 헤더를 만드는 방법
테이블에 제목을 지정하려면 - 태그를 사용하세요.
