5분 동안 응답식 웹 디자인 학습

8715 단어 cssresponsivedesigntutorialhtml
본고에서 저는 5분 안에 가능한 한 많은 호응성 디자인 기술을 가르쳐 드리겠습니다.이것은 분명히 그것을 정확하게 배우기에는 부족하지만, 이것은 당신에게 가장 중요한 개념에 대한 개술을 제공할 것입니다. 저는 개인적으로 그것을 다음과 같이 정의합니다.
  • 상대 CSS 단위
  • 미디어 쿼리
  • Flexbox
  • 응답 식자
    • 만약 당신이 이후에 이 주제를 더욱 깊이 연구하고 싶다면, 당신은 우리의 사이트를 볼 수 있으며, 이것은 당신이 전문적인 수준에서 호응성이 강한 사이트를 구축할 수 있게 할 것이다.
    그림을 클릭하여 수업에 들어가세요.
    하지만 이제 기초부터 시작하자!

    상대 CSS 단위


    응답식 웹 디자인의 핵심은 상대적인 CSS 단원이다.이것들은 다른 외부 가치에서 가치를 얻는 단위이다.이것은 브라우저의 폭을 기반으로 그림의 폭을 허용하기 때문에 매우 편리하다.
    가장 일반적인 사항:
  • %
  • em
  • 렘
  • 폭스바겐
  • 매우 높은 주파수
    • 본고에서 우리는 백분율 단위%부터 시작한 다음에 마지막 절에서 rem 단위를 볼 것이다.
    예를 들어 다음과 같은 아주 간단한 사이트를 가지고 있다고 가정해 보세요.

    HTML은 다음과 같습니다.
    <body>
    <h1>Welcome to my website</h1>
    <image src="path/to/img.png" class="myImg">
</body>
    아래 GIF에서 볼 수 있듯이 기본적으로 이미지에는 고정 너비가 있습니다.

    특별히 예민한 건 아니니까 70%로 바꾸자.다음과 같은 작업을 간단히 수행합니다.
    .myImg {
    width: 70%;
}
    이렇게 하면 이미지의 폭이 부모 이미지<body> 태그)의 70%로 설정됩니다.<body> 표시가 화면의 전체 폭을 뛰어넘기 때문에 이미지는 항상 화면 자체의 70%를 차지한다.
    결과는 다음과 같습니다.

    이것이 바로 응답성 이미지를 만드는 쉬운 정도입니다!

    미디어 쿼리를 사용하여 모바일 환경 개선


    그러나 우리의 응답식 레이아웃에 문제가 하나 있다. 그것은 아주 작은 화면에서 이상하게 보인다는 것이다.휴대전화에서 볼 때 70%의 폭이 좁아진다.네가 직접 봐라.
    ​

    ​
    이런 상황에서 그것을 더욱 잘 보이게 하는 것은 미디어 조회의 완벽한 임무이다.화면의 너비 등에 따라 다양한 스타일을 적용할 수 있습니다.우리는 기본적으로 화면 폭이 768px보다 작으면 다른 스타일을 사용하라고 말할 수 있다.
    다음은 CSS에서 미디어 질의를 작성하는 방법입니다.
    @media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}
    이 CSS 블록은 화면 폭이 768 픽셀보다 작은 경우에만 적용됩니다.
    결과는 다음과 같습니다.

    보시다시피, 페이지에 단점이 하나 있는데, 그림이 갑자기 넓어집니다.이때 브라우저의 폭은 768 픽셀이고 이미지는 70%와 100% 사이를 전환합니다.

    탐색 모음에 Flexbox 사용


    다음은 플렉스박스.Flexbox를 모르면 응답 능력을 알 수 없습니다.몇 년 전에 출시되었을 때, 그것은 응답식 디자인 게임을 바꾸었다. 왜냐하면 요소가 축을 따라 응답식 포지셔닝을 하는 것을 더욱 쉽게 하기 때문이다.
    Flexbox를 이용하기 위해서, 우리는 제목 위에 네비게이션 표시줄을 추가하여, 우리의 사이트를 더욱 복잡하게 할 것이다.다음은 연관된 HTML입니다.
    <nav>
    <a href="#">Home</a>
    <a href="#">About me</a>
    <a href="#">Contact</a>
</nav>
    기본적으로, 그것은 보기에 이렇다.
    ​

    ​
    우리의 내비게이션 항목이 모두 왼쪽으로 비집고 들어갔는데, 이것은 우리가 원하는 것이 아니다.우리는 그것들이 전체 페이지에 고르게 분포되기를 바란다.
    이를 실현하기 위해서, 우리는 nav 용기를 flexbox로 바꾸고, 신기한 justify-content 속성을 사용합니다.
    nav {
    display: flex;
    justify-content: space-around;
}
    display: flex<nav>를 부드러운 상자로 만들고 justify-content: space-around는 브라우저의 부드러운 상자 안의 항목 주위에 공간이 있어야 한다고 알려준다.따라서 브라우저는 이 세 항목 주위에 모든 남은 공간을 평균적으로 분배한다.
    다음은 그의 모습이다.보시다시피 그것은 매우 잘 확장될 수 있다.

    ​

    응답 식자:rem


    마지막 단계는 우리의 판식도 호응성을 가지게 하는 것이다.봐라, 화면의 폭이 768 픽셀보다 작을 때 (우리의 미디어 조회 인터럽트, 기억나?) 나는 내비게이션 표시줄과 제목을 좀 줄이기를 바란다.
    한 가지 방법은 다음과 같이 미디어 질의의 모든 글꼴 크기를 줄이는 것입니다.
    @media (max-width: 768px) {
    nav {
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
}
    하지만 이상적이지 않다.우리는 응용 프로그램에 몇 개의 단점이 있고 여러 개의 요소(h2, h3, 단락 등)가 있을 수 있다.따라서, 우리는 서로 다른 단점 중의 모든 요소를 추적해야 한다.엉망이 될 거야!
    그러나 각 단점에서 많든 적든 똑같은 방식으로 서로 연관될 가능성이 가장 높다.예를 들어 h1는 항상 paragraph보다 클 것이다.
    그래서 만약에 한 요소를 조정하고 나머지 글씨체의 크기를 이 요소에 비해 축소하는 방법이 있다면 어떻게 될까요?
    렘스에 입장!rem는 기본적으로 다음과 같습니다. <html> 요소에 설정한 글꼴 크기 값입니다.이렇게:
    html {
    font-size: 14px;
}
    본문에서 1rem은 14px와 같다.
    이는 다음과 같이 웹 사이트에서 모든 글꼴 크기를 rem 단위로 설정할 수 있음을 의미합니다.
    h1 {
    font-size: 2rem;
}

nav {
    font-size: 1rem;
}
    그리고 미디어 조회에서 <html> 표시된 글꼴 크기만 변경하면 됩니다.이렇게 하면 h1 및 nav 요소의 글꼴 크기도 변경됩니다.
    다음은 미디어 쿼리에서 rem 값을 변경하는 방법입니다.
    @media (max-width: 768px) {
    html {
        font-size: 14px
    }
}
    그렇듯이 우리의 모든 글씨체 크기에는 단점이 있다.페이지가 768 픽셀 태그를 넘을 때 글꼴 크기가 어떻게 변하는지 주의하십시오.

    비록 5분밖에 걸리지 않았지만, 지금은 페이지의 너비에 따라 글씨체 크기, 이미지, 네비게이션 표시줄 항목을 만드는 것을 배웠다.이것은 매우 좋다. 너는 이미 첫걸음을 내디뎠고 호응성 사이트를 구축하는 귀중한 기능을 배웠다.
    만약 네가 이 학습 과정을 계속하는 것에 흥미가 있다면, 나는 네가 우리의 사이트를 좀 볼 것을 건의한다.유튜브에서 가장 인기 있는 교사 중 한 명이 가르치는 이 과정은 당신을 호응식 웹 디자인의 전공 수준으로 끌어올릴 것이다.
    해피 코딩:)
    StackOverflowError 스택 오버플로우 오류
    Dapr 을 사용해 보았습니다. (웹 API 이미지로 로컬 저장소와 GCS를 처리해 보았습니다.)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage