상위 선택자의 반복을 피할 수 있다.

중첩 내 &를 사용해 상위(부모) 선택자를 참조할 수 있다.

// CSS
.fs-small { ... }
.fs-medium { ... }
.fs-large { ... }

// SCSS
.fs {
    &-small { ... }
    &-medium { ... }
    &-large { ... }
}

중첩 내 @at-root를 사용해 중첩을 벗어날 수 있다.

  • 중첩 안에서 생성하되 중첩 밖에서 사용할 경우 유용. => 중첩 내 변수를 중첩 밖에서 사용하고 싶을 때 사용

동일한 네임 스페이스를 가진 속성을 다음과 같이 사용할 수 있다.

// CSS
.fs {
    font-weight: bold;
    font-size: 10px;
}

// SCSS
.fs {
    font: {
        weight: bold;
        size: 10px;
    }
}

'HTML,CSS' 카테고리의 다른 글

ViewPort  (0) 2022.07.22

개념

배경 및 정의

  • 뷰포트 : 웹 브라우저에서 실제 내용이 표시되는 영역
  • PC와 모바일은 viewport의 크기가 다르다.
    • ex) 모바일 화면의 너비가 640px인 경우 980px의 가상 뷰포트로 페이지를 렌더링 한 다음 640px공간에 맞게 축소하도록 동작
    • 보통 웹페이지가 모바일에 최적화 되어있지 않아 작은 뷰포트 너비로 렌더링 될 때 깨지거나 나쁘게 보인다.
      • 따라서 가상 뷰포트는 일반적으로 모바일에 최적화되지 않은 사이트를 좁은 화면에서 더 잘 보이게(넓게) 하는 방법

기본 사용법 : <meta> 태그를 사용

<meta name="viewport" content="width=device-width, initial-scale=1">
  • width : 가로
  • height : 세로
  • user-scalable : 사용자 확대/축소 가능 여부
  • initial-scale : 초기 화면 비율
  • maxium-scale : 최대 화면 비율
  • minium-scalee : 최소 화면비율

 

테스트

meta viewport 테스트

  • viewport 지정 X
<html>
    <head>
    </head>
    <body>
        <h1>hello</h1>
        <p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

            On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:</p>
        <div style="width: 180px; height: 100px; background-color: aqua;"></div>
    </body>
</html>
  • viewport width=device-width, initial-scale=1.0
<html>
    <head>
        <meta name="viewport" content="width= device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>hello</h1>
        <p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

            On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:</p>
        <div style="width: 180px; height: 100px; background-color: aqua;"></div>
    </body>
</html>
  • viewport width=device-width, initial-scale=1.0, use-scalable=no
<html>
    <head>
        <meta name="viewport" content="width= device-width, initial-scale=1.0, user-scalable=no">
    </head>
    <body>
        <h1>hello</h1>
        <p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

            On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:</p>
        <div style="width: 180px; height: 100px; background-color: aqua;"></div>
    </body>
</html>
  • viewport width=device-width, initial-scale=0.5
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=0.5">
    </head>
    <body>
        <h1>hello</h1>
        <p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

            On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:</p>
        <div style="width: 180px; height: 100px; background-color: aqua;"></div>
    </body>
</html>

viewport를 지정하지 않으면 document 너비에 맞게 자동으로 스케일링된다. 동작 확인 결과 최초 기본 값이 있고, 문서 너비가 커지면 그에 맞게 커진다.

  • 500px
<html>
    <head>
    </head>
    <body>
        <h1>hello</h1>
        <div style="width: 500px; height: 100px; background-color: aqua;"></div>
    </body>
</html>

  

  • 500px, 1000px
<html>
    <head>
    </head>
    <body>
        <h1>hello</h1>
        <div style="width: 500px; height: 100px; background-color: aqua;"></div>
        <div style="width: 1000px; height: 100px; background-color: yellow;"></div>
    </body>
</html>
  • 500px, 1000px, 1500px
<html>
    <head>
    </head>
    <body>
        <h1>hello</h1>
        <div style="width: 500px; height: 100px; background-color: aqua;"></div>
        <div style="width: 1000px; height: 100px; background-color: yellow;"></div>
        <div style="width: 1500px; height: 100px; background-color: green;"></div>
    </body>
</html>
  • 500px, 1000px, 1500px + viewport width=device-width
<html>
    <head>
        <meta name="viewport" content="width= device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>hello</h1>
        <div style="width: 500px; height: 100px; background-color: aqua;"></div>
        <div style="width: 1000px; height: 100px; background-color: yellow;"></div>
        <div style="width: 1500px; height: 100px; background-color: green;"></div>
    </body>
</html>

 

'HTML,CSS' 카테고리의 다른 글

SCSS - Nesting  (0) 2022.07.22

+ Recent posts

티스토리툴바