HTML 및 CSS Flexbox:Pt를 사용하여 응답 탐색 모음을 작성합니다.이.

이 글은 처음에 debugacademy.com에 발표되었다.
응답식 디자인은 현재의 핫이슈이다.트위터든 업무 공고든 글이든 우리는 이런 소리를 들을 수 있다.그러나 응답식 디자인은 도대체 무엇입니까?왜 그것이 이렇게 중요합니까?나는 이 문장에서 이 문제들에 대답할 것이다.우리는 또한 나의 이전 문장의 도움으로 만든 네비게이션 표시줄에서 배운 내용을 사용할 것이다.만약 네가 아직 없다면 반드시 검사를 해야 한다.

응답성 디자인: 뭐라고요? 왜요??

Wikipedia에 따르면 응답식 디자인은 "일종의 웹 디자인 방법으로 각종 설비와 창이나 화면 크기에서 웹 페이지를 잘 나타낼 수 있다."기본적으로 응답식 디자인은 웹 개발자와 디자이너가 실현하여 그들의 웹 사이트를 모든 설비에서 보기 좋게 한다. 태블릿PC, 휴대전화, 노트북과 데스크톱PC.
호응성 디자인은 유행어가 아니다.이것은 사실상 매우 중요하다.이렇게 많은 사람들이 주로 휴대전화를 통해 인터넷에 접속하기 때문에 이 점은 더욱 중요해졌다.웹 개발자로서 당신은 응답식 디자인의 기본 원리와 코드에서 어떻게 그것을 실현하는지 절대 이해할 필요가 있습니다.토론 중단점부터 시작합시다.

인터럽트

단점은 도대체 무엇입니까?응, 그것들이 바로 그것들이 듣고 있는 모습이다. 당신의 사이트 요소가 파손되어 보이기 시작할 때, 당신의 디자인의 요점.화면의 크기를 바꾸고 디자인에서 비뚤어지기 시작한 부분을 주의해서 찾을 수 있다.실제 중단점은 픽셀 단위의 값입니다.Chrome의 개발자 도구를 사용하여 값을 결정할 수 있습니다.유일한 인터럽트 값을 찾을 시간이나 인내심이 없다면, 일반적인 화면 크기 값을 사용할 수도 있습니다.아니면, 직접 보셔도 됩니다.모든 방법에는 장점이 있다.너는 결국 이 세 가지 조합을 사용할 가능성이 높다.다음은 내가 앞에서 언급한 일반적인 화면 사이즈들을 빠르게 훑어본다.

아래 Code Pen을 보시면 중단점의 뚜렷한 예시를 보실 수 있습니다.
보시다시피 우리의 제목인'네비게이션 표시줄 강좌'는 우리가 원하는 것이 아닙니다.우리의 디자인은 더 이상 깨끗하고 통일되지 않은 것처럼 보인다.우리는 이 점을 바꿔야 한다.나는 이미 우리의 단점이 대략 450px라고 확정했다.그러나 우리는 실제로 이 단점을 어떻게 처리합니까?이것이 바로 언론이 질문하는 이유다.

미디어 쿼리

미디어 조회 속성은 매우 유용하다.너는 아마 그것을 자주 사용할 것이다.솔직히 말하자면, 내가 Debug Academy의 웹 개발 과정에서 미디어 조회를 토론한 후에야 비로소 나는 그것을 어떻게 사용해야 하는지 진정으로 이해하기 시작했다.만약 어떤 조건을 만족시키면, 미디어 조회는 웹 페이지의 일부 속성이나 부분에 대해 스타일을 설정할 수 있습니다.그들은 많은 응용 프로그램을 가지고 있는데, 너는 크리스토퍼 카드의 이 위대한 문장에서 더 많은 것을 이해할 수 있다.

깊이 연구@ 미디어 조회

크리스토퍼 카드・ 2019년 7월 2일・ 3분 읽기

#css #webdev #tutorial #beginners

오늘 우리는 인터럽트가 있는 미디어 조회를 사용하는 것을 중점적으로 소개할 것이다.문법은 다음과 같다.

@media (max-width: 450px) {

} 

우리는 @media 요소를 사용하여 미디어 조회를 시작합니다.우리는 단점을 괄호 안에 놓을 것이다.max-width 키워드도 볼 수 있습니다.이것은 화면의 폭을 450px 또는 더 작게 합니다.만약 이러한 조건을 만족시키면 다음과 같은 코드를 실현할 것이다.
일반적으로 CSS에는 여러 개의 미디어 질의가 필요합니다.우리는 간단한 네비게이션 표시줄만 사용하기 때문에, 우리는 하나밖에 없다.만약 장래에 여러 개의 미디어 조회를 포함해야 한다면, 이 과정은 우리가 지금까지 토론한 과정과 유사할 것이다.이제 CSS로 이동하여 탐색 모음의 응답성을 유지해야 합니다.

1단계: ul CSS

우리는 네비게이션 표시줄의 응답 능력을 향상시키기 위해 뭔가를 추가해야 한다.먼저 flex-wrap 속성을 추가합니다.즉, 이것은 특수한 Flexbox 속성입니다.만약 flex 용기가 너무 작아서 한 줄에 모든 내용을 수용할 수 없다면, flex 용기의 내용을 줄로 바꿀 수 있습니다.이 예에서 ul은 우리의 flex 용기로 각 li은 그 중의 한 항목이다.이것이 바로 우리가 탭 요소가 새 줄로 이동하는 것을 본 이유이다.
CSS에서 정의한 justify-content을 추가해야 합니다.이번에는 center으로 설정합니다.그러면 탐색 모음 메뉴 항목이 가운데에 배치됩니다.어떤 이유로, 우리의 내비게이션 표시줄에는 기본적인 충전이 있다.이 문제를 없애고 모든 항목이 중간에 있는지 확인하기 위해 padding을 0으로 설정할 수 있습니다.우리는 또한 background-color을 리셋해야 한다. 왜냐하면 우리의 배경색은 우리가 지난번에 제시한 header의 70px 높이에 제한되어 있기 때문이다.

2단계: # 제목 CSS

우리의 내비게이션 표시줄은 기술적으로 신속하게 응답한다.그것은 화면의 크기에 따라 변화한다.그러나 그것은 시각적으로 결코 사람을 끌어당기지 않는다.우리는 CSS를 조금만 더 하면 우리가 원하는 방식대로 그것을 실현할 수 있다.우리는 #title을 전문적으로 겨냥하여 네비게이션 표시줄 강좌라고 부른다.이것은 우리의 제목이기 때문에, 우리는 그것이 뛰어나고, 한 라인에서 독립하기를 바란다.우리는 flex-basis이라는 또 다른 Flexbox 속성을 사용하여 이 점을 실현할 수 있다.이 속성은 하위 요소나 용기 항목이 용기에 얼마나 많은 공간을 차지하는지 확인할 수 있도록 합니다.우리는 flex-basis을 100%로 설정할 것이다.이제 네비게이션 표시줄 튜토리얼이 자동으로 완성됩니다.
우리는 여전히 #title이 다른 메뉴 항목처럼 중간에 있기를 바란다.우리는 간단하게 text-align을 중심으로 정의할 수 있다.만약 네가 자세히 관찰한다면, 네비게이션 표시줄 강좌가 여전히 제목 중심에 완전히 있지 않다는 것을 발견할 수 있을 것이다.이것은 우리가 이전에 margin-right: auto을 추가하여 #title을 왼쪽으로 이동했기 때문이다.이를 상쇄하기 위해서 우리는 margin-left: 0을 추가할 것이다.지금 네비게이션 표시줄 튜토리얼은 우리가 원하는 방식으로 가운데에 있습니다!

결론

축하응답 네비게이션 표시줄을 완성했습니다!이런 개념들은 매우 중요하기 때문에 그것들을 여기에 두지 마라.새 웹 페이지를 만들고 지금까지 배운 개념을 사용해서 완전히 응답해 보십시오.Flexbox 및 응답 설계에 대한 자세한 내용은 추가 리소스를 제공합니다.
예전과 같이 언제든지 저에게 건설적인 피드백을 주십시오.나는 줄곧 진보를 찾고 있다.만약 당신이 나에게 포괄하고 싶은 주제가 있다면, 나에게 알려주세요!읽어주셔서 감사합니다!

기타 리소스

Google Mobile-Friendly Test

The Most Popular Navigation Bars Created with Flexbox