Cara Membuat Template Responsive Dengan CSS Murni – Bagian 1

Bismillahirrohmanirrohim assalamu'alaikum warahmatullahi wabarakatuh 안녕하세요, 친구들, 내 이름을 중보기도에 소개합니다 cv

eaSYstem 채널에서 가져 오기 여기 튜토리얼을 공유하고 싶습니다 간단한 반응 형 웹 사이트 템플릿을 만드는 방법 HTML과 CSS를 사용하여 잘 여기에 나중에 웹 사이트 디자인을 준비했습니다 우리는 우리는 보려고 노력한다 우물 여기있다,이 모양이다 컴퓨터의 바탕 화면 모드에서 우리는 여기서 볼 수있다

맨 위에는 아래의 헤더 메뉴 두 개의 기둥이있다 왼쪽에있는 내용은 오른쪽에있는 것은 사이드 바입니다 다음 밑에는 바닥 글 예 확인 이것은 유행에있는 전시이다 모바일 또는 스마트 폰 이 모드에서는 나중에 숨기다 헤더 메뉴가 옳았다 나중에 우리는 버튼을 만들 것입니다 ~을 위해 전시하다 메뉴 그것을 보이고 숨기기 클릭하면 나중에 나타납니다

우리는 다시 클릭하여 숨 깁니다 그 다음은 이것이 내용이다 이 내용을 훨씬 밑도는 ~이다 그 사이드 바는 이 하나 계속 가다 사이드 바 아래에 바닥 글이있다

아래쪽이 바닥 글입니다 좋아, 시작하자 반응 형 웹 템플릿 만들기 오, 그래 안에 제조하다 이 웹 사이트는 조금 길다 예, 나중에 이 튜토리얼을 일부 파트와 공유 할 것입니다 이 비디오에서 우리는 머리말이나 메뉴 만 우리 친구들이 곧바로 열어 주네

텍스트 편집기 여기 나는 숭고한 텍스트 편집기를 사용한다 세 다음 편집자의 텍스트를 연 후에 우리는 html 파일을 만든다 indexhtml이라는 이름으로 이름이있는 CSS 파일 stylecss 우리는 새 파일 만 우리는 먼저 저장한다

저장하다 다음 우리는 그것을 같은 폴더에 저장한다 한 폴더에 친구가 폴더를 만들어주세요 저장 위치는 친구에게 달려있다 폴더 이름은 무료입니다 친구까지 예를 들면 나는 여기있다

이름이있는 폴더 만들기 desain_web desain_web 다음 html 파일을 위해 우리는 이름을 준다 나는 이전에 언급했다 예 나는 그것을 인덱스라고 부른다html 우물 그리고 친구들은 그 이름까지 달려있다

뭐든간에 친구까지 예 : exercisehtml 또는 tryhtml 및 기타 좋습니다 저는 indexhtml입니다

저장하다 그 후에 잘 그런 다음 CSS 파일을 만듭니다 새 파일 다시 우리는 다시 구한다 이름을 지어 라 스타일 css 이것은 또한 친구와 동일합니다

너는 알지 이 확장은 CSS 여야합니다 확인 우리는 구한다 우리는 indexhtml에 간다

처음 우리는 기본 구조로 시작할 것입니다 HTML 확인 우리는 코딩 중이다 먼저 doctype을 먼저 만든다 doctype HTML 그때 지금 이 함수는 말하다 브라우저에 무엇이 열려 있는지 html 파일 그렇게 나중에 다음은 html 태그입니다 들어가다 그런 다음 우리가 만든 html 태그에서 태그 헤드 우리가 머리 꼬리표를 만든 후에 본문 태그 늘 그렇듯이 ~처럼 이것은 기본 태그입니다

그 다음 body 태그에서 우리는 태그를 만든다 큰 소리로 말하다 제목 또는 직함 html 파일 우리는 단지 그것을 준다 반응 형 웹 다음 우리는 안으로 만든다 머리 태그, 우리는 연결을 만든다 ~까지 CSS 파일, 예 이 CSS 파일 태그 링크를 사용하여 가로장 이 철도 속성에 잘 맞는다

값은 반드시 나중에 틀린 경우 스타일 시트를 수정해야합니다 연결되지 않고 나중에 연결됩니다 href 속성을 만든다 여기있다 우리는 파일 주소를 채 웁니다

CSS 때문에 그래, 나 때문에 여기있어 내부 같은 폴더에있는 하나의 폴더 이름을 써주세요 stylecss 다음 여기에 이렇게 확인 오, 그래, 잊어 버렸어 왜냐하면 우리는 ~을 만들다 반응 형 웹 사이트가 하나 있습니다

그 태그 꽤 의무적 인 즉 메타 태그 메타 이름 속성을 가진 뷰포트 또한 content 속성 너비 이게 맘에 든다 다음 쉼표 오케이 1과 같다 우리는 다시 추가 최대 이걸 좋아해 그 후 우리는 몸 꼬리표에 간다 디자인을 살펴 보겠습니다

나는 그것을 만들었다 웹 사이트를 잘 만드십시오 우리는이 하얀 것을 볼 수있다 이것은 클래스 컨테이너 그래서 나는 한천 용기를 사용한다 기존 요소를 감싸는 데 사용됩니다

여기 예 먼저 div를 만듭니다 ~와 함께 계급 다시 본다 지금 여기서 볼 수 있습니다 이것은 여기는 메인 클래스로 구성되어있다

즉 헤더 이 중간에 ~와 함께 전화를 걸 수있다 연주하다 그 아래에 꼬리말이 있습니다 우리가 먼저 만든다 우리는 먼저 그것을 안으로 만든다 우리의 div 컨테이너는 div입니다

계급 우리는 단지 그것을 복사한다 이것은 재생 중이다 이 바닥 글 우리는 코멘트를 준다 div 헤더 맞다 그 다음 우리는 그렇게하지 말라

잊다 어지럽다 이렇게 다시 해봅시다 div 클래스에서 잘 이것을해라 두 개의 열 또는 두 개의 div가 있습니다 왼쪽은 내용이다 오른쪽은 사이드 바이다

우리는 클래스 이름을 부여한다 너무 쉬워요 다른 div 그것을 만든다 div 계급 왼쪽 수업 다시 복사 다른 것은 맞다 권리 다음 이것은 구조이다

기본 구조 우리는 보려고 노력한다 웹 브라우저 그럼 아직 아직 여기 없네 여전히 비어있는 우리가하지 않았기 때문에 그것을 줘라 내용과 아직 스타일을 주다 확인 다음 우리는 ~ 때문에 나는 이전에 언급했다

이번에는 비디오가 부분 만 만들 것입니다 헤더 우리는 헤더를 만들 것입니다 메뉴 헤더 우리가 사용하는 메뉴 만들기 ul 태그 좋아, ul 다음 ul 리 li 태그에는 태그가 있습니다 또는 하이퍼 링크 다음 href 우리가 만든다 담장 만 이런 집에 우리는 단지 그것을 바꾼다

예를 들어 다운로드 다른 하나 문맥이란? 이렇게 우리는 보려고 노력한다 이것은 목록, 목록 순차적이지 않다 우리는 나중에 메뉴가되다 이렇게 우리 스타일로 간다 잘 우리가 만드는 첫 번째 컨테이너 스타일 컨테이너 우리는 폭을 준다

나는 여기에 가득 차 있지 않기 때문에 여기에 잘있다 그래서 나는 너에게 거리를 줄 것이다 우리는 너비를 960 픽셀로 줄뿐입니다 화소 다음 중간에 우리는 여백을 준다 여백 이렇게 우리가 시도 봐

지금 새로 고침 네, 중간에 있습니다 실제로 그것은 컨테이너입니다 이만큼 큰 물결 무늬가있는 그 후 학급 헤더로 가라 너비를 100 % 다음 높이 그냥 50px 다음 우리는 눈에 보이는 색을주었습니다 색 예를 들면 등불 또는 toska 색상 재 장전하다 이렇게 잘하지만 왜 이것은 고집하지 않고있다

그 이유는 이 ul 태그 ul 태그 스타일을 가지고있다 거기에서 그것은 기본 스타일입니다 그래서 우리는 그것을 재설정하려고합니다 헤더 ul 우리는 리셋 할 것이다 여백 여백 0px 그 다음 패딩 0px 이렇게 재 장전하다 그래도 어떻게 아직 안와? 그것도 ~ 때문에 본문 태그에 기본 설정도있다 기본 CSS 스타일 우리가 시도 body 태그를 다시 설정하십시오

여백에 의한 0px 또한 패딩 우리는 다시로드하려고합니다 hadeuh 전 우리는 메뉴를 만들 것입니다 이 메뉴 우리는 어떻게 우리는 헤더를 만든다 uli li 헤더 주어진 플로트가 남아있다 우리가 보려고하는 것처럼 재 장전하다 이미 및 우리는 그것을 제거하십시오 이 검은 점 내부 리 태그 목록 스타일 스타일을 사용하여 없음 우리는 다시로드하려고합니다

잘 됐어 다음 언제 태그를 붙일 지 ~을 위해 우리는 시도 할 것이다 색깔을 바꾸다 결론을 없애라 확인 헤더 a 우리는 색을 바꾼다 백인이된다 다음 우리는 최종선을 제거하십시오 텍스트 장식 없음 저장 한 다음 다시로드 해 봅니다

이미 최종선을 잃었다 흰색이되면 우리는 거리를 주다 우리는 단지 그것을 준다 너비 100px 또한 우리는 선 높이를 준다 50 개 픽셀 어떻게 아직도 거기에 없지? 너비가 변하지 않기 때문에 디폴트 스타일은 태그 a이다

전시 라인 우물 그래서 우리는 변화해야한다 디스플레이가 블록이된다 우리는 구하기 위해 노력한다 우리는 글쎄, 지금도 우리가있을거야 그것을 내다 ~와 함께 CSS 텍스트 정렬하다 중심 나중에 저장 이미 이게 디스플레이 야

메뉴 그러면 우리는 그렇게하지 말라 우리는 그냥 날 가져 가라 예를 들면 우리는 이 커서 위 경우 바뀔 것이다 글꼴 색 우리는 사용한다 마우스를 가져 가면 : 마우스 오버 색깔을 바꾸다

색깔이 검게된다 좋아, 우리는 다시로드한다 그걸 좋아해 확인 ~을 위해 메뉴 헤더 이미 완성 된 어쩌면 그게 내게 충분 해 다음 비디오를 기다리다

관심을 가져 주셔서 감사합니다 좋아하고 구독하는 것을 잊지 마세요 Wassalamu'alaikum warahmatullahi wabarakatuh