이 문서에서는 다음을 사용하여 HTML 및 CSS에서 반응형 웹 사이트 디자인을 만드는 단계를 보여줍니다.
HTML과 CSS로 반응형 웹사이트 디자인을 만드는 방법은 무엇입니까?
HTML 및 CSS를 사용하여 반응형 웹 사이트 디자인을 만들려면 다양한 화면 크기와 해상도에 적응하는 레이아웃을 구축해야 합니다. 다음은 반응형 웹 사이트 디자인을 만들기 위해 따를 수 있는 단계입니다.
1단계: 뷰포트 메타 태그
“ 뷰포트 ” 메타 태그는 반응형 웹 디자인을 만드는 데 중요한 역할을 합니다. ' 안에 삽입됩니다. <헤드> 다음 속성을 포함하는 HTML 파일의 ” 태그:
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비,초기 크기=1' / >
위의 메타 태그에는 두 가지 속성이 있습니다.
- “ 이름 ” 속성은 이 태그가 생성/사용되는 기능의 이름을 알려줍니다. 예를 들어 ' 뷰포트 ' 로 ' 이름 ” 속성은 다른 장치의 뷰포트를 처리합니다.
- “ 콘텐츠 ” 속성은 이전 속성 값을 정의합니다. 모든 장치의 너비를 설정하고 문서/웹 페이지를 100%로 확장합니다.
2단계: 반응형 이미지
이미지 크기가 서로 다르기 때문에 동일한 ' 키 ' 또는 ' 너비 ” 모든 이미지에 대한 속성입니다. 이미지의 크기가 고정되면 사용자는 화면으로 웹 페이지 이미지의 크기를 조정하지 않습니다. 그러나 사용자는 다음 코드를 통해 반응형 이미지를 설정할 수 있습니다.
이미지 {
최대 너비 : 100 %;
}
“ 최대 너비 ” CSS 속성은 이미지가 할당된 공간 내에 표시되지 않도록 제한합니다. 값을 '%'로 설정하면 상위 요소의 크기 조정에 따라 이미지 크기가 조정됩니다. 이렇게 하면 이미지에 반응하는 효과가 생성됩니다.
3단계: 플렉스박스 레이아웃
반응형 웹 사이트 디자인을 만들려면 Flexbox 레이아웃을 적극 권장합니다. 이를 통해 HTML 요소가 특정 위치에 표시되고 상위 div에서 사용 가능한 크기에 따라 각 하위에 사용 가능한 공간의 크기를 조정할 수 있습니다. Flexbox 레이아웃에는 아래 코드와 같이 개발자에게 많은 자유를 제공하는 여러 속성이 포함되어 있습니다.
< 스타일 >
.부모의 {
디스플레이: 플렉스;
}
.어린이 {
몸을 풀다: 1 ;
텍스트- 맞추다 : 센터;
}
< / 스타일 >
< 몸 >
< 사업부 수업 = '부모의' >
< 사업부 수업 = '어린이' 스타일 = '테두리: 3px 단색 청자색;' >환영합니다< / 사업부 >
< 사업부 수업 = '어린이' 스타일 = '테두리: 3px 단색 짙은 녹색;' >에< / 사업부 >
< 사업부 수업 = '어린이' 스타일 = '테두리: 3px 솔리드 레드;' >리눅신트< / 사업부 >
< / 사업부 >
< / 몸 >
위의 코드 조각에서:
- 먼저 id가 '인 상위 div 요소를 만듭니다. 부모의 ” 안에 <몸> ” 태그.
- 다음으로 여러 자식 div 요소를 만들고 ' 어린이 '.
- 그런 다음 ' 부모의 ” 클래스를 제공하고 “ 몸을 풀다 ” CSS의 경우 “ 표시하다 ' 재산.
- 그런 다음 ' 1 ' 로 ' 몸을 풀다 '각각에 대한 속성' 어린이 ” 하위 요소를 플렉스로 표시하는 클래스입니다.
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
위의 출력은 브라우저의 크기가 조정될 때 하위 요소의 너비가 같아지는 것을 표시합니다.
4단계: 그리드 레이아웃
그리드 레이아웃은 그리드를 생성하고 그리드 부분 내부에 HTML 요소를 할당합니다. 그리드 요소는 웹 페이지의 화면 크기에 따라 변경됩니다. 장치 화면에 따라 HTML 요소 크기가 변경되어 반응형 디자인을 생성합니다.
< 스타일 >.컨테이너 {
디스플레이: 그리드;
그리드 템플릿 열: 1fr 1fr 1fr;
}
< / 스타일 >
< 몸 >
< 사업부 수업 = '요소' >
< 사업부 스타일 = '테두리: 3px 솔리드 포레스트그린;' >리눅신트< / 사업부 >
< 사업부 스타일 = '테두리: 3px 단색 짙은 녹색;' >리눅신트< / 사업부 >
< 사업부 스타일 = '테두리: 3px 솔리드 레드;' >리눅신트< / 사업부 >
< / 사업부 >
< / 몸 >
위의 코드에서:
- 먼저 상위 div를 만들고 ' 요소 ” 안에 <몸> ” 태그. 그런 다음 그 안에 세 개의 자식 div 요소를 만듭니다.
- 그런 다음 CSS 파일에서 ' 그리드 ” 값을 “ 표시하다 ”에 대한 속성 컨테이너 ” 디비.
- 그런 다음 '를 사용하여 웹 페이지에 동일한 크기의 세 부분을 만듭니다 그리드 템플릿 열 ” 속성을 설정하고 “ 1fr 1fr 1fr ” 여기서 fr은 “ 분수 '.
위의 코드를 컴파일한 후 출력은 다음과 같습니다.
출력은 div가 동일한 비율로 화면 크기에 따라 자체적으로 크기를 조정하고 있음을 표시합니다.
5단계: 미디어 쿼리
반응형 디자인을 만들기 위해 미디어 쿼리를 사용하는 것은 구식이지만 여전히 대부분의 웹사이트는 미디어 쿼리를 사용합니다. 미디어 쿼리는 선택한 HTML 요소에 대한 기본 스타일을 추가한 후 CSS 파일에 직접 추가할 수 있습니다. 미디어 쿼리는 코드를 조금 더 길고 지저분하게 만듭니다. 개발자가 화면 크기별로 코드를 별도로 삽입해야 하기 때문입니다.
예를 들어 아래 코드 스니펫을 참조하세요.
@ 미디어 스크린과 ( 최소 너비 : 640픽셀 ) {.요소 {
배경- 색상 : 포레스트그린;
}
}
위의 코드 조각에서:
- 먼저 선택한 요소 클래스에 CSS 속성을 적용하는 미디어 쿼리를 설정합니다. 요소 ” 화면 크기 너비가 “ 640픽셀 '.
- 다음으로 '컴포넌트 클래스'를 선택하고 '의 값을 설정합니다. 포레스트그린 ”에 대한 배경색 ' 재산.
.요소 {
배경- 색상 : 다저블루;
}
}
그런 다음 위 코드 스니펫의 경우:
- 너비 크기가 '보다 작을 때 스타일을 적용하도록 미디어 쿼리를 설정합니다. 1000픽셀 '.
- 이제 ' 요소 ” 클래스를 만들고 “ 다저 블루 ”에 대한 배경색 ' 재산:
위의 코드 스니펫을 실행한 후 출력은 다음과 같습니다.
출력에는 미디어 쿼리가 화면 크기에 따라 배경을 변경하고 있음이 표시됩니다. 글꼴 크기, 너비, 높이 및 기타 CSS 속성도 동일한 패턴을 따라 적용할 수 있습니다.
미디어 쿼리를 사용하는 동안 고려해야 할 가능한 중단점 화면 크기는 다음과 같습니다.
- 을 위한 ' 작은 ” 화면 크기의 경우 너비를 “보다 작게 설정하십시오. 640픽셀 '.
- 을 위한 ' 중간 ” 뷰포트 화면 크기, 너비 범위는 “ 641픽셀 ' 그리고 ' 1007픽셀 '.
- 을 위한 ' 크기가 큰 ” 화면 크기, 너비를 “ 1008픽셀 ” 이상.
결론
반응형 웹사이트 디자인을 만들려면 개발자가 ' 뷰포트 <메타> ” 태그는 “ <헤드> ” 태그 섹션. 다음으로 ' 플렉스박스 ' 그리고 ' 그리드 ” 레이아웃. 이러한 레이아웃 모듈은 반응형 디자인을 만드는 데 도움이 됩니다. 결국 “ 미디어 쿼리 ” 개발자가 다른 화면 크기에 대해 동일한 웹 사이트의 다른 버전 스타일을 지정할 수 있도록 도와줍니다. 이 기사에서는 반응형 웹사이트 디자인을 만들 수 있는 단계를 보여주었습니다.