How to Create Responsive HTML Email Template Using Bootstrap

안녕하세요, 모두가 매일 수업료를 다시받을 수 있습니다 이 자습서에서는 부트 스트랩을 사용하여 간단한 HTML 전자 메일 템플릿 디자인을 만듭니다

이 비디오에서는 최신 부트 스트랩 프레임 워크를 사용하고 CSS를 사용합니다 이 템플릿은 모바일 및 테이블에도 반응합니다 이 튜토리얼을 시작하기 전에 우리를 구독하고 벨 아이콘을 눌러 내 모든 새로운 비디오를 알리고 아무것도 찾으면 버튼을 누르십시오 이 비디오에서 유용합니다 그래서 항상 늦게 시작하기 전에 let 's가 시작됩니다

먼저 폴더 응답 전자 메일을 만들어 코드 편집기에서 엽니 다 이 폴더에서 이미 스톡 폴더를 만들고 이미지를 주식 내부에 넣습니다 폴더 이 자습서에서는이 이미지를 사용하고 있습니다 그래서 우리가 할 일은 index

html과 stylecss라는 새로운 파일을 만드는 것입니다 indexhtml 파일에서 간단히 html5 코드 조각을 만들고 페이지 제목을 변경합니다 그런 다음 getbootstrap 웹 사이트에서 bootstrap

css 파일 cdn을 복사하고 여기에 붙여 넣으세요 그런 다음 글꼴 굉장 아이콘 cdn을 복사하여 여기에 붙여 넣어 계획 마지막으로 custom style을위한 stylecss 파일을 링크 할 것입니다 이제 우리는 페이지를 디자인 할 것입니다

본문에서는 부트 스트랩 컨테이너 클래스를 만듭니다 이 클래스에서는 외부 패널 텍스트 센터와 둥근 클래스를 배치합니다 외부 패널은 맞춤 클래스입니다 텍스트 센터는 테두리를 추가하기 위해 텍스트 중심에 둥근 클래스를 사용하는 부트 스트랩 클래스입니다 반지름

따라서이 클래스에서는 아이콘을 삽입하고 패딩 2를 추가합니다 그런 다음 라이브 서버를 사용하여이 프로젝트를 실행하십시오 라이브 서버는 비주얼 코드 편집기에 설치해야하는 확장 프로그램입니다 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 라이브 서버 열기를 선택하십시오 그래서 이것은 아이콘입니다

외부 패널에서는 반올림 된 부트 스트랩 클래스를 사용하여 내부 패널 클래스를 만듭니다 이 클래스에서는 col-md-12를 사용하여 행을 만들고 열을 만듭니다 이 칼럼에서는 여백 위쪽에 h6 제목 태그를 만들고 여기에 텍스트를 삽입합니다 그런 다음 단락을 만들고 여기에 텍스트를 추가하십시오 그런 다음 새 열을 만들고 이미지 태그를 넣고 소스 속성 이미지 태그의 이미지 이미지 경로를 지정합니다

그런 다음 alt 텍스트를 지정하고 스타일을 추가하고 너비와 높이를 지정합니다 그래서 이것은 이렇게 보일 것입니다 그 후에 stylecss 파일에서 body 태그를 만들고 여백과 패딩을 제거합니다 html 요소

그런 다음 외부 패널 클래스를 만들고 폭을 60 %로 지정하고 패딩을 지정합니다 및 배경색 rgb 알파 색상을 사용하여 배경색을 지정합니다 이제 우리는 컨테이너 클래스를 생성하고 디스플레이를 지정하기 위해 이러한 요소를 중심에 배치하려고했습니다 콘텐츠 속성 센터를 수정하고 정당화합니다

그런 다음 내부 패널 클래스를 만들고 배경색과 상자 그림자를 지정합니다 재산 그런 다음 단락에 대해 글꼴 크기를 지정합니다 그 후 indexhtml 파일에서 다른 컬럼을 만들고 몇 개의 데모와 함께 단락을 삽입합니다

본문 데모 텍스트를 지정하려면 lorem 웹 사이트를 사용하고이 텍스트를 복사하십시오 여기에 붙여 넣으세요 그런 다음 버튼을 만들고 클래스 btn btn-warning을 지정합니다 여기에 다운로드 템플릿 텍스트를 삽입하십시오

그러면이 단추가 여기에 표시됩니다 그런 다음 닫는 행 div 다음에 가로 행을 만듭니다 그 후 우리는 또 다른 행을 만듭니다 이 행에서는 부트 스트랩 그리드 시스템의 두 열을 만듭니다 먼저 col-md-2 클래스를 만듭니다

이 클래스의 내부에는 패딩 4를 추가하고 아이콘을 삽입합니다 글꼴 멋진 웹 사이트에서 자신의 아이콘을 선택할 수 있습니다 먼저 아이콘의 이름을 지정하고 fa-2x 클래스를 사용하여 크기를 지정한 다음 패딩 y와 패딩 x를 지정하십시오 그런 다음이 아이콘의 스타일을 만들고 배경색을 지정하십시오 그래서이 아이콘은 이렇게 보입니다

그런 다음 col-md-10을 사용하여 두 번째 열을 만들고 여기에 여백 4를 지정합니다 이 열에는 h6 제목 태그를 삽입하고 텍스트를 삽입합니다 그리고 단락을 추가하고 데모 텍스트를 여기에 삽입하십시오 이제이 디자인을 보게 될 것입니다 그런 다음 col-md-2를 사용하여 새 열을 만들고이 열에 대해 패딩 x 4를 지정합니다

기둥 그런 다음 여기에 배경색으로 아이콘을 삽입하십시오 그런 다음 col-md-10의 두 번째 열을 만들고 그것에 패딩 x를 지정하십시오 이 열에 h6 제목 태그에 텍스트를 삽입하고 단락을 데모 텍스트 그런 다음이 유형의 디자인을 보게됩니다

그런 다음 col-md-12를 사용하여 새 열을 만들고 패딩 4를 지정하십시오 이 열에 h6 제목 태그를 삽입하고 텍스트를 지정하십시오 그런 다음 앵커 태그를 만들고 여기에 이메일을 지정하십시오 그런 다음이 단락의 스타일을 작성하여 글꼴 크기와 텍스트 장식 특성을 지정합니다 완벽 해

inner div를 닫으면 새로운 행을 만들고이 행 안에 열을 삽입합니다 이 열에서 꼬리말 탭을 만들고이 꼬리말 태그에 패딩을 지정합니다 이 바닥 글 태그에서 우리는 d 플렉스 플렉스 행과 패딩 x 클래스를 만듭니다 flex 행 클래스를 사용하여 단일 행에 html 요소를 만듭니다 여기에 삽입 한 내용은 단일 행으로 정렬됩니다

여기에서 우리는 사교적 인 아이콘을 삽입 할 것입니다 먼저 서클 클래스로 facebook 아이콘을 삽입합니다 이 아이콘에 스타일을 지정하기 위해 여기에서 circle 클래스를 만듭니다 여기에 아이콘을 몇 개 만듭니다 아이콘을 만든 후에는 다음과 같이 보입니다

그런 다음 데모 텍스트가있는 단락을 삽입합니다 그거야 그 후 stylecss 파일에서 버튼을 만들고 글꼴 크기를 지정합니다 그런 다음 원 클래스를 만들고 폭 40px 높이 40px 테두리 지정 반경 100px 및 여백 2 % 다음 테두리 1px 단색을 지정하고 색상, 텍스트 맞춤 중심 지정 패딩 상단 12 픽셀

그 후에 당신은이 결과를 볼 수 있습니다 이제 우리의 디자인이 준비되었습니다 그러나 이제 우리는 그것이 반응하는지 아닌지 확인해야합니다 그래서 우리는 그것을 점검 할 것입니다 이 프로젝트가 완전히 반응하지는 않습니다

이제 우리는이 프로젝트를 반응 적으로 만들 수있는 몇 가지 코드를 만들 것입니다 따라서 stylecss 파일에서 미디어 쿼리를 추가하고 장치 너비를 425px로 지정합니다 여기서 우리는이 화면 크기에 도달 할 때 몇 가지 클래스를 변경하려고합니다 여기서는 외부 패널 클래스를 만들고 너비를 100 %로 지정합니다

패딩 3 % 그런 다음 제목 텍스트 클래스를 만들고이 클래스를 두 번째 제목으로 지정합니다 이리 미디어 쿼리에이 클래스를 만듭니다 그래서 여기에 패딩 탑 속성을 지정하여 이렇게 보입니다

그 후 우리는 원 클래스에서 경계선을 제거합니다 그거야 이제 템플릿이 준비되었습니다 이 템플릿은 이제 모바일 장치에 완벽하게 반응합니다 따라서이 단원에서 유용한 것을 찾으면 같은 버튼을 눌러야합니다

이 채널에서 새 소식을 듣고 구독 버튼을 누릅니다 일단 그게 전부 야 우리는 다음 강연에서 당신을 보게 될 때까지 행복하게 지켜보고 있습니다