Jassy world Jassy world

https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog 1. display: flex 컨테이너는 화면 크기의 변화에 ​​반응하는 웹 사이트를 만드는 데 유용한 도구입니다. 플렉스 컨테이너의 자식 요소는 부모 컨테이너의 크기와 위치에 따라 크기와 위치가 변경됩니다. div.container { display: flex; } 위의 예에서 클래스 container가 ..

한눈에 정리하기!!! @media (max-width: 700px) { div{ display: none; } } @media (min-width: 700px) { div{ display: none;} } screen size maximum 700 px minimum 700 px width > 700px no changing x div {display: none;} width < 700px div {display: none; } no changing x standard Computer monitor (big screen) phone (smaller screen) 화면이 클때를 기준으로 CSS를 작성한 다음, 화면이 작아질 때, @media 값을 실행해라. 화면이 작을때를 기준으로 CSS를 작성한 다음, ..

1. em 픽셀 이외의 단위를 사용하여 상대적 크기 조정을 시작합니다. 당신이 상대적으로 크기의 콘텐츠를 만들 수있는 CSS에서 사용할 수있는 측정 한 단위는 em입니다 현재 em은 사용중인 기본 글꼴의 크기를 나타냅니다. 예를 들어, 브라우저의 기본 글꼴이 16 픽셀 (일반적으로 브라우저에서 텍스트의 기본 크기) 인 경우 1em은 16 픽셀입니다. 2 ems는 32 픽셀과 같습니다. CSS에서 em을 사용하는 방법을 보여주는 두 가지 예를 살펴 보겠습니다. .heading { font-size : 2em ; } 위의 예에서 기본 글꼴이 지정되지 않았으므로 heading요소의 글꼴 크기는 브라우저의 기본 글꼴 크기를 기준으로 설정됩니다. 기본 글꼴 크기가 16 픽셀이라고 가정하면 heading요소 의 글..

1이미지 원형으로 나타내기 (border-radius) 0(사각형)~50%(원형) img { border-radius: 100%; }

세리프와 산세 리프 Serif (세리프) — 각 문자 끝에 추가 세부 사항이있는 글꼴입니다. 예를 들어 Times New Roman 또는 Georgia와 같은 글꼴이 있습니다. Sans-Serif — 각 문자 끝에 추가 세부 정보가없는 글꼴입니다. 대신 글자는 Arial 또는 Helvetica와 같이 똑 바르고 평평한 가장자리를 갖습니다. 1. Fallback Fonts (대체 글꼴) 타일 시트에 사용자 컴퓨터에 설치되지 않은 글꼴이 필요한 경우 어떻게됩니까? 대부분의 컴퓨터에는 작은 서체 세트가 사전 설치되어 있습니다. 이 작은 세트에는 Times New Roman과 같은 serif 글꼴과 Arial과 같은 sans-serif 글꼴이 포함됩니다. 이러한 사전 설치된 글꼴 은 스타일 시트가 사용자 컴퓨터..

1. font-family (글꼴) 형식화 된 워드 프로세서를 사용한 적이 있다면 입력 한 "글꼴 유형"을 변경할 수있는 기능을 사용했을 가능성이 큽니다. "글꼴 유형"이라는 문구는 기술 용어인 글꼴 모음 . 웹 페이지에서 텍스트의 서체를 변경하려면이 font-family속성을 사용할 수 있습니다 . h1 { font-family : Garamond; } 위의 예에서 모든 주요 제목 요소의 글꼴 모음이로 설정되었습니다 Garamond. 웹 페이지에서 서체를 설정할 때 다음 사항에 유의하십시오. 사용자가 웹 페이지를 방문 할 때 해당 글꼴이 표시되도록하려면 스타일 시트에 지정된 글꼴이 사용자의 컴퓨터에 설치되어 있어야합니다. 나중에이 문제를 해결하는 방법을 배웁니다. 이 과정의 이전 연습에서 서체를 지정하..

1. Foreground vs Background 색상의 특성을 논의하기 전에 색상에 대해 두 가지 구별을하는 것이 중요합니다. 색상은 다음 디자인 측면에 영향을 줄 수 있습니다. 전경색 (foreground color) 배경색 (background color) 전경색은 요소가 나타나는 색상입니다. = 텍스트 색상 예를 들어 제목이 녹색으로 표시되도록 스타일을 지정하면 제목의 전경색 이 스타일 지정됩니다. 반대로 제목의 배경이 노란색으로 표시되도록 스타일을 지정 하면 제목의 배경색 이 스타일 지정됩니다. CSS에서이 두 가지 디자인 측면은 다음 두 가지 속성으로 스타일을 지정할 수 있습니다. color -이 속성은 요소의 전경색 스타일을 지정합니다. background-color -이 속성은 요소의 배경..

1. Float 페이지에서 요소를 최대한 왼쪽이나 오른쪽으로 이동하려는 경우 float속성을 사용할 수 있습니다 . 이 float특성은 다음 두 값 중 하나로 설정 될 수 있습니다. left - 이 값은 요소를 가능한 한 왼쪽으로 이동하거나 플로팅합니다. right - 이 값은 요소를 최대한 오른쪽으로 이동합니다. .boxes { width: 120px; height: 70px; } .box-bottom { background-color: DeepSkyBlue; float: right; } 위의 예에서 .box-bottom요소를 right로 플로팅 합니다 . 이것은 정적 및 상대적 위치 요소에 적용됩니다. 아래 코드의 결과를 참조하십시오. 플로팅 된 요소에는 위의 예와 같이 너비가 지정되어 있어야합니다...