13: How to Create a Menu in HTML | Learn HTML and CSS | HTML Tutorial | CSS Tutorial

이 레슨에서는 탐색하는 방법을 배웁니다 웹 사이트 내부에서 기본적으로 메뉴를 만들 겠다는 의미입니다

이제 우리는 이전 에피소드에서 링크를 만들고 그 이전의 에피소드에서 우리는 서브 페이지를 만드는 방법을 배웠습니다 따라서 실제로 탐색하려면 웹 사이트에 들어가서 서브 페이지에 들어가려면 메뉴가 있어야합니다 너희들이 여기서 내 앞에서 볼 수 있듯이, 나는 매우 기본적인 색인 페이지

ВСЁ, что нужно знать о CSS свойствах начинающему верстальщику. Основные свойства css

안녕! 과거 비디오는 HTML 태그에 관한 것이 었습니다 여기에 대한 링크가 있습니다

이 비디오에서는 주요 CSS 속성을 살펴 봅니다 CSS 스타일에는 특정 기능이 있습니다 일부 브라우저는 특정 브라우저에서 작동하지 않습니다 따라서 어떤 스타일을 작성하고 하나의 브라우저에서 작동하면 다른 스타일에서는이 스타일을 지원하지 않습니다 이것은 caniuse

com 웹 사이트에서 할 수 있습니다 설명에 링크를 남깁니다 CSS 속성은 상당히 많아서 각기 다른 문제를 해결하기 때문에, 그것과이 비디오에서 정확히 똑같아서 서로 다른 범주로 나누어집니다 실제적으로 모든 CSS 속성에 대해이 비디오에서 생생한 예제를 볼 수 있습니다 그들 중 일부는 우리가 꽤 큰이기 때문에 무시합니다

별도의 비디오가 필요합니다 그것은 모든 물인 것처럼 보인다 대구로 갑시다! 보시다시피, 여기에 속성이 범주화되어 있습니다 : 애니메이션, 배경, 프레임, 등등 이 카테고리에는 몇 가지가 있습니다 그들 중 일부는 지나갈 것입니다

애니메이션, 플렉스 및 멀티 컬럼입니다 애니메이션은 거의 사용되지 않습니다 주로 다운로드 용 어떤 종류의 로더를 볼 때,이 애니메이션은 다음과 같이 사용됩니다 또는 로고에 애니메이션 효과를 적용 할 수도 있습니다

극히 드물게 사용되기 때문에 이러한 모든 속성을 염두에 두는 것은 의미가 없습니다 Google로 쉽게 따라서 문제를 훨씬 빨리 해결할 수 있습니다 Flex는 매우 유용한 속성이지만 매우 크고 별도의 비디오를 찍습니다 그 동안 나는 두 개의 기사에 대한 링크를 남겨 두겠다

설명에 나와있을 것이다 다중 열 레이아웃은 단일 텍스트 블록 내에 여러 열이있는 경우입니다 이것은 실제로 매우 드뭅니다 다른 모든 것 – 고려하십시오 배경부터 시작해 봅시다

그는 배경이다 나는 모든 코드를 여기에 쓸 것이다 여기서 우리가 출구에서 이미 볼 수 있다는 것이 즉시 분명합니다 그래서, 배경 background-color 같은 색깔

따라서 변경 사항을 저장하십시오 여기 빨간색으로 그려져 있습니다 여기에 하나의 준비된 그림이 있습니다 background-image -이 속성은 이미지를 설정합니다 우리는 그것에 대한 링크를 씁니다

어떤 종류의 것은 이해할 수없는 파란색입니다 height 속성을 추가합시다 – 이것이 높이입니다 여기에 그림이 그 자체로 나타납니다 조금 더 그리고 다시 파란색으로

또 봐 그녀는 반복합니다 여기서 우리는 다음 background-repeat 속성으로갑니다 예를 들어 우리는 그것이 반복되는 것을 원하지 않습니다 모든 것은 그림이 하나 남아 있습니다

동시에 색상을 추가 할 수도 있습니다 즉, 그림과 녹색 배경이있는 블록이 있습니다 우리가이 이미지를 중앙에 놓기를 원한다고 가정 해보자 이것은 background-position 속성에 의해 설정되며 보통 두 개의 매개 변수를 취합니다 이 위치는 X와 Y에 있습니다

여기서 당신은 말로 쓸 수 있습니다 이것은 위쪽, 왼쪽, 오른쪽, 아래쪽 및 다양한 숫자 값입니다 % 또는 px 중 하나입니다 예를 들어 픽셀을 10px 10px로 쓰면 10px가 왼쪽과 위로 이동합니다 센터 센터를 작성하면 중심에 배치됩니다

우리가 50 % 센터를 쓰면 아무것도 변하지 않을 것입니다 50 % 50 % 다시, 아무것도 바뀔 것이다, 왜냐하면 센터와 50 %는 동의어이기 때문입니다 또한 우리는 아직 배경 크기의 배경으로 고려하지 않았습니다 자주 사용되는 속성 예를 들어, 표지

이 속성은 너비 또는 높이 중 하나의 매개 변수 중 하나를 사용하여 그림을 그립니다 그것이 맞는 방법에 따라, 즉 너비가 늘어나지 만 중심에 위치합니다 예를 들어 속성 ​​50과 0을 설정하면 상단 부분이 표시되고 100 %를 입력하면 그림의 하단 부분이 표시됩니다 표지가 아닌 속성을 적용했지만 포함하는 경우 그림이 높이에 꼭 맞습니다 백그라운드 속성이 무엇인지 살펴 보겠습니다

여기서 우리는 몇 가지 매개 변수를 언급했다 : 반복, 색상 및 다양한 속성의 위치 배경 속성을 사용하면이 모든 것을 작성하지 않아도됩니다 우리는 다음과 같이 작성할 수 있습니다 : background : green url no-repeat 50 % 50 % 그리고 우리는 여기있는 모든 것을 제거합니다 보시다시피 결과는 같습니다 영어로 이것을 짧게 기재합니다

이것들은 백그라운드의 기본 속성이었습니다 어서 테두리 테두리는 프레임입니다 여기서 많은 수의 스타일을 볼 수 있지만 두려워하지 마십시오

사실, 그들은 꽤 간단합니다 배경을 제거하십시오 여기에는 높이가 200 픽셀 인 블록이 있지만 표시되지 않습니다 결국 배경을 돌려 보겠습니다 그렇게 정상입니다

테두리는 프레임입니다 경계 테두리를 1px와 같이 설정하면 아무 일도 일어나지 않습니다 국경을 1px로 설정하면됩니다 또 봐 얇은 검은 색 프레임이 여기 나타났습니다

예를 들어 세 번째 매개 변수 인 녹색을 추가하면이 프레임은 초록색이되지만보기가 매우 어렵습니다 예를 들어, 10을 하나씩 변경합시다 곧바로 모든 것이 명확 해졌습니다 따라서 경계 속성 (배경과 동일 함)은 여러 속성을 짧게 기록한 것입니다 첫 번째 매개 변수는 선 두께를, 두 번째 매개 변수는 유형을 나타냅니다

견고 할 수 있습니다 예를 들어 점선으로 표시되거나 점선으로 표시됩니다 이 두 가지 스타일이 가장 일반적입니다 나머지는 극히 드문 경우입니다 세 번째는 당신이 추측 한 것처럼 색이 있습니다

그래서 모든 것이 한 줄로 쓰여 있다면, 왜 그렇게 많이 쓰여 집니까? 사실은 당신이 자세히 보면, 당신은 스타일이 그들이 다른면에 속한다는 것을 알 수 있습니다, 예 : border-bottom, border-left, border-right, border-top 즉, 위, 아래, 왼쪽의 위치가 다릅니다

예를 들어, border-left라고 쓰면이 프레임에 오른쪽의 border-right 만 왼쪽에있게됩니다 주변에 프레임이 필요하지 않으면 별도로 할당 할 수 있습니다 또는 일부 스타일을 재정의 할 수 있습니다 예를 들어, 이와 같은 프레임을 작성한 다음 맨 아래 하나가 모두 동일한 솔리드 여야한다고 결정한 경우, border-bottom-style을 작성합니다 : 솔리드는 솔리드가되는 하단 프레임입니다 또한 하단에 대해 별도로 너비를 무시할 수 있으며 더 두꺼워졌습니다

내가 지금 쓴 것처럼, 이렇게 쓰지 않는 것이 낫다 즉, 처음에 하나의 속성을 작성한 다음 우선 속성을 무시하기 시작합니다 한 블록 내에 다른 스타일이 있다면, 별도로 설명하는 것이 좋습니다 즉, border-top, border-right, border-left는이 경우, border-bottom의 경우는 별도이므로 구분됩니다 재정의 라기보다는 별도로 작성하는 것이 좋습니다

그래서 특정 발목과 문제를 피하십시오 그럼, 우리가 다룰 수 없었던 것은 무엇입니까? 국경 이미지 border-image는 프레임의 그림을 설정합니다 드물게 사용되는 즉, 당신은 단단하고 파선이 아니라 경계 이미지입니다 대체되고 반복되는 어떤 종류의 그림

border-radius border-radius는 매우 자주 사용됩니다 이것은 단지 반올림입니다 예를 들어 border-radius : 50px는이 라운드와 같습니다 어느 쪽이든 10

반경은 픽셀 또는 퍼센트로 지정됩니다 그래서 여기에 우리가 말합니다 이것이 우리가이 재미있는 형태를 얻는 방법입니다 꽤 빨리 우리는 프레임을 통과했습니다 그리고 그것은 그렇게 많이 보였습니다

더 가자 색상 색상은 색상입니다 예를 들어, color : pink라고 쓰면, 다음과 같이 보입니다 텍스트가 분홍색이되었다고

빨간색 꽤 간단합니다 불투명도는 투명성입니다

예를 들어 불투명도는 0에서 1로 설정됩니다 예를 들어 5 또는 05는 50 %입니다 90 – 0

9 1 – 이는 완전히 볼 수 있음을 의미합니다 0은 보이지 않으며이 블록에 배경이 할당되어 있어도 어쨌든 표시되지 않습니다 자, 만약 당신이 적어도 어떤 종류의 가시성을 주면, 그는 창백하지만 이미 눈에 보인다 다음 차원 – 차원 치수는 거의 모든 블록에서 사용되는 특성입니다 우리는 이미 그 중 일부를 적용했습니다 첫 번째 예에서는 높이가되었습니다

이제 나머지 부분을 다루겠습니다 예를 들어 width를 쓰지 만 블록 자체가 투명하기 때문에 아무것도 볼 수 없습니다 모든 곳에서 필요하기 때문에 배경을 삭제할 수 없다고 생각합니다 블록 폭이 작습니까? 500을 쓰면 더 넓어집니다 우리가 이미 분석 한 height 속성입니다

따라서 우리는 500 x 500의 제곱을 얻습니다 이제 우리가 아직 가지고 있지 않은 것을 고려해 봅시다 : 최대 높이와 ​​최소 높이, 너비 최소 높이 란 무엇입니까? 이것은 가능한 최소 블록 높이입니다 그리고 나서 그는 뻗어 야 할 것입니다 예를 들어 높이가 100 픽셀 인 콘텐츠와 블록이 거의없는 것처럼 보입니다

하지만이 콘텐츠가 많으면 이제 복사 해 드리겠습니다 또 봐

블록은 콘텐츠의 양에 따라 높이가 확장됩니다 너비도 마찬가지입니다 이제 최대 높이 최대 높이 : 100 픽셀로 콘텐츠를 추가하십시오 또 봐

블록 높이가 100px 이상입니다 빼낼 수 없습니다 하지만 많은 콘텐츠가 있기 때문에 그는 시작합니다 이러한 문제를 피하기 위해 오버 플로우 특성이 더 중요합니다 우리는 그것을 도달 할 것이다 – 거기 나는 유사한 문제를 피하는 방법을 말할 것이다

max-width 속성에서도 마찬가지입니다 즉, 스트레칭하지 않는 블록의 최대 크기를 설정합니다 생성 된 콘텐츠 여기서 우리는 4 개의 속성을 봅니다 : 내용, 따옴표 및 한 쌍 더 따옴표는 거의 사용되지 않습니다

나는 그것을 전혀 사용하지 않았다 하지만 따옴표 스타일을 지정하는 데 사용된다는 것을 알고 있습니다 다른 따옴표는 다른 언어로 사용됩니다 여기서 물어볼 수 있습니다 내용은 의사 요소에 적용되는 속성입니다

의사 요소 란 무엇입니까? 가짜 요소는 예를 들어 물리적으로 페이지에 존재하지 않는 어떤 종류의 블록입니다 즉, 그들은 당신의 스타일에만 있습니다 여기에 처음에 숫자 1 2 3이 추가 되었습니까? 그러나 나는 그들과 아무 것도 할 수 없다 이후에 글을 쓰면이 내용이 끝에 추가됩니다 이전과 이후를 서로 다른 값으로 사용할 수 있습니다

123과 다른 숫자들 일반적으로 리터럴 또는 숫자 값은 내용에 추가되지 않습니다 일반적으로 이러한 요소는 일부 추가 배경 또는 예를 들어 일종의 그라디언트로 사용됩니다 어떤 종류의 블록이 있고 그 위에 그라디언트를 적용해야합니다 따라서 의사 요소가 사용됩니다

나는 그들에 관해서도 별도의 비디오를 찍을 것이라고 생각하는데, 여기서 내가 더 자세히 이야기 할 것이다 카운터 재설정 및 카운터 증가 특성을 사용하여 목록에 번호 매기기를 추가 할 수 있습니다 즉 그것은 일종의 카운터입니다 어서 글꼴

그는 같은 글꼴입니다 국경뿐만 아니라 배경도 단축 된 기록입니다 폰트 – 패밀리와 크기 및 두 가지 속성을 모두 포함합니다 글꼴 – 가족 font-family는 폰트 패밀리를 설정합니다

시스템에는 일부 글꼴이 있으며 일부 글꼴은 별도로 연결할 수 있습니다 (예 : Google 글꼴) 여기에서는 시스템 글꼴을 사용합니다 예를 들어, Tahoma 여기서 우리는이 텍스트를 변경했습니다 하지만, 텍스트가 아니라 글꼴

예 : Arial 그는 조금 달라 보이기 시작했습니다 Times New Roman은 serif 서체입니다 글꼴 크기 font-size는 크기를 설정합니다

12px 크기가 작습니다 예를 들어, 50 – 글꼴 크기가 분명히 증가했습니다 글꼴 스타일 font-style은 이탤릭체로 만듭니다 font-weight, 예를 들어, bold는 폰트 가중치를 담당합니다

예를 들어 굵게 또는 보통과 같이 기본값이 사용됩니다 이는 표준입니다 글꼴을 연결했다면 조금 더 다양해질 것입니다 많은 글꼴이 울트라 굵게 또는 매우 얇기 때문에 거기에는 100, 200 등의 값이 있습니다 주요 글꼴은 사라졌습니다

어서 목록 목록 list-style-image, -position 및 -type 속성은 매우 드물게 사용되며 목록 스타일은 종종 목록을 재설정하는 데 정확하게 사용됩니다 여기 있습니다 그리고 ul이 속성 목록 스타일을 설정하면 : none -이 총알을 제거합니다

이 글 머리표의 다른 값은 변경할 수 있습니다 그들은 정사각형으로 만들 수 있습니다 여백과 안쪽 여백은 블록의 안쪽 여백을 설정하는 두 가지 주요 요소입니다 앞서 작성한 div를 예제로 작성해 봅시다 예를 들어 블록이 있고 프레임이 있습니다

그래서 블록을 얻었습니다 내부에 어떤 종류의 프레임이 있습니다 그러나 텍스트를 프레임에 가깝게 배치하지 않으려면 내부 들여 쓰기를 설정해야합니다 들여 쓰기는 패딩입니다 그리고 여기에 들여 쓰기가 추가되었습니다

마진은 해외에서만 같은 일을합니다 여기에 들여 쓰기가 추가 되었습니까? 또한 모든면에서 둘레를 둘러싸고 있습니다 이것은별로 눈에 띄지 않지만 예제를 좀 더 시각적으로 만들어 보겠습니다 이 블록에 배경을 추가하고이 블록 뒤에 다른 배경을 추가하십시오 클래스를 div에 추가

div 태그 용 스타일을 작성하면 두 div에 동시에 동시에 사용됩니다 그러므로 우리는 이제 그것들을 조금씩 구분할 것입니다 다음으로 오버 플로우 추가 속성을 외부 블록에 설정합니다

내부 블록이 마진을 올바르게 처리하는지 확인하는 데 사용됩니다 우리는 마진 속성을 가지고 있다는 것을 알아 채 셨을 것입니다 마진 속성은 왼쪽 및 오른쪽으로 들여 쓰기를했습니다 그러나 우리는 위와 아래에서 그들을 관찰하지 않았습니다 이것은 CSS의 특정 결함입니다

[결함이 아니라 기능입니다 그것은 "붕괴 된 외부 들여 쓰기"라고 불린다 그리고 이것을 지금 제거하면, 들여 쓰기가 가장자리에서만 보입니까? 이 결함은 여러 가지 방법으로 해결됩니다 그 중 하나는 오버플로를 통과하는 것입니다 다시 한번 살펴 보겠습니다

이제 자세히 살펴 보겠습니다 우리는 녹색 배경, 내용, 즉 내용이있는 블록을 가지고 있습니다 들여 쓰기 된 10px 들여 쓰기입니다 그리고이 블록은 또한 10px 외부 들여 쓰기를가집니다 외부 들여 쓰기를 30px로, 내부 텍스트를 20px로 명확하게 만듭니다

기억 나니? 패딩 – 내부 패딩, 마진 – 외부 패딩 여백과 패딩 모두 경계를 따라 별도의 속성 (하단, 왼쪽, 오른쪽, 위쪽)을 갖습니다 그리고 여기 : 아래, 왼쪽, 오른쪽, 위쪽 하숙인과 같습니다 즉, 각면에 개별 크기를 설정할 수 있습니다

예를 들어 상단에 20px, 하단에 20p, 왼쪽에 40p가 있어야합니다 이것은 당신이 주위에 다른 들여 쓰기를 얻는 방법입니다 또한 margin 속성은 다른 값, 다른 값 집합을 취할 수 있습니다 예를 들어 하나의 값만 작성하면 주변에 적용됩니다 두 값을 쓰면 첫 번째 값은 위쪽과 아래쪽에 들여 쓰기를 설정하고 두 번째 값은 왼쪽과 오른쪽에 들여 쓰기를 설정합니다

세 개의 매개 변수를 쓰면 첫 번째 매개 변수가 상위를 담당하고 두 번째 매개 변수는 왼쪽 – 오른쪽 매개 변수, 세 번째 매개 변수는 하위 매개 변수입니다 네 개의 매개 변수를 쓰면 같은 둘레가됩니다 이것이 우리가 마진 탑, ─ 왼쪽, ─ 아래로 쓴 것입니다이 기록에서이 값을 줄일 수 있습니다 : 10 20 30 40 우리는 똑같은 것을 얻습니다

그 짧은 기록입니다 그리고 패딩에 대해서도 마찬가지입니다 : 10 20 30 40 그것이 둘레로 바뀌는 방법입니다 개요 윤곽선은 본질적으로 동일한 테두리이며, 바깥 쪽 프레임 만 설정합니다

border는 내부 프레임, outline은 외부 프레임입니다 개요가 거의 사용되지 않습니다 솔직히 내가 마지막으로 사용한 것을 기억하지 못합니다 보통 국경을 사용하는 것으로 충분합니다 더 가자

별로 남아 있지 않습니다 인쇄 Print'a 속성은 인쇄 중에 페이지 나누기를 담당합니다 즉, 필요한 경우, 그러면 인쇄 버전의 페이지가 새 페이지로 전송 된 다음 다른 등록 정보가 적용됩니다 page-break-before 태그 앞에 break를 추가하기 전에 -after-after, -inside-inside

프린트 버전이 필요하다면, 거의 사용하지 않는다면, 이러한 속성은 기억하기가 어렵습니다 표 – 표에 적용되는 속성 국경 붕괴, 보지? 각 셀에는 자체 테두리가 있습니다 조금 두껍게 만들어 봅시다 그레이트 우리의 재산으로 돌아 가자 테이블 국경 붕괴 : 붕괴 이 속성을 사용하면 셀 내의 프레임 워크를 축소 할 수 있습니다

또 봐 여기 왼쪽, 오른쪽, 끝에, 어디서나 10px, 즉 그는 왼쪽에서 10px, 오른쪽에서 10px를 쳤습니다 다음 border-spacing border-spacing은 셀 사이의 거리입니다

그것이 어떻게 증가했는지 보아라 border-collapse 속성을 지정한 경우이 속성은 작동하지 않습니다 : collapse, 즉, 세포가 붕괴되면 당연히 이러한 세포들 사이에 거리가 없어야합니다 테이블 레이아웃은 브라우저에 셀 폭을 계산하는 방법을 알려주며, 따라서 기본적으로 셀은 내용에 따라 늘어납니다 table-layout : fixed 속성을 설정하면 셀은 항상 지정한 크기로 유지됩니다 더 가자

텍스트 – 다른 모든 것만큼이나 중요합니다 필요한 것을 살펴 봅시다 방향 우리가 설정하는 방향은 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 텍스트의 방향을 결정합니다 여기 모든 것이 분명하다고 생각합니다

텍스트 정렬 text-align은 텍스트 정렬입니다 기본적으로 텍스트 정렬은 왼쪽으로 이동합니다 text-align : right을 쓰면 텍스트가 오른쪽 중앙에 정렬됩니다 text-align-last는 마지막 행의 정렬입니다

나는 그것을 사용한 적이 없지만, 이것은이 블록에있는 마지막 줄의 정렬이다 왼쪽과 오른쪽 또는 중앙에서 동일합니다 텍스트 장식 텍스트 장식은 밑줄을 설정합니다 텍스트는 여기에 밑줄이 그어져 있습니다

또는 이상 또는 텍스트를 건너 뛸 수 있습니다 이 모든 것이 text-decoration 속성을 만듭니다 다음 text-indent는 첫 줄에 들여 쓰기를 설정합니다

여기에서 그는 우리에게서 물러났다 text-overflow 속성은 텍스트를 잘리는 방법을 알려줍니다 즉, 너비가 이미 끝나고 많은 텍스트가 있으면이 텍스트가 잘립니다 기본값은 클립입니다 즉, 단어는 단순히 블록 너비에 맞게 잘립니다

text-overflow 줄임표 속성을 적용하면 텍스트가 줄임표로 바뀝니다 텍스트 그림자 텍스트 그림자는 그림자입니다 이름에서 알 수 있듯이 실제로 대부분의 스타일은 직관적입니다

예 : 1px 1px 빨강 더 잘 보일 수 있도록 글꼴 크기를 늘리십시오 아마 지방도 아니, 좋지 않아 여기 빨간 그림자가 나타났습니다

이 속성은 텍스트 그림자입니다 1px와 1px는 축의 들여 쓰기입니다 10을 쓰면 X만큼 이동합니다 두 번째 매개 변수는 10입니다 Y로 10을 이동합니다

색상은 문자와 같은 방식으로 설정할 수 있습니다 반투명으로 설정할 수도 있습니다 0 0 0 05 – 여기가 희미합니다 그리고 내가 전에 썼던 그 어떤 색깔이라도 절대적으로 설정할 수 있다는 것이 중요합니다

즉, 문자 나 16 진수 또는 RGBA로 쓸 수 있습니다 세 번째 매개 변수 세 번째 매개 변수는 흐림, 즉 흐림의 정도를 말합니다 1 – 조금 흐린 경우 5 – 이미 조금 더 10 – 이미 거기에 쓰여진 것이 분명하지 않은 경우, 거리를 줄이기 위해서도, 예를 들어, 2로, 그리고 여기 에선 좋을 것 같습니다 아마추어로서

색상을 변경하고 이제는 이미 빨간색으로 변했습니다 일반적으로 텍스트 그림자 text-shadow는 텍스트의 그림자입니다 line-height는 이해해야 할 속성입니다 많은 텍스트를 쓰는 경우, 웹의 텍스트가 중앙에오고 상단 경계선에서 하단 경계선까지 줄을 세는 것을 이해하는 것이 중요합니다

디자이너는 일반적으로 텍스트의 맨 아래에서부터 텍스트의 맨 아래로 셀 수 있으며 이는 종종 불일치로 이어집니다 왜냐하면 기본적으로 선 높이 때문에, 즉 선의 높이 때문에 들여 쓰기가 이미 있기 때문입니다 여기서 line-height 50px로 작성하면이 거리가 줄어 듭니다 줄 사이의 들여 쓰기가 작아졌습니다 내가 10 점을 쓰면, 끔찍한 그림이 보입니다

즉, 서로 겹쳐지기 시작합니다 일반적으로 줄 높이가 글꼴 크기의 x15 여야하며, 예를 들어 font-size가 50이면 75가 좋을 것입니다 즉, 텍스트는 오히려 침착하게 느껴지지만 텍스트의 이러한 치수는 매우 드뭅니다 현실과 가까워 지도록합시다

예를 들어, 16 픽셀이며, 그 다음에는 매우 무서운 것처럼 보입니다 그러나 16을 쓰지 말고, line-height 24를 설정해 보겠습니다 다시 x15 당신은 텍스트가 아주 쉽게 감지된다는 것을 알고 있습니다

vertical-align은 셀 내의 텍스트 정렬이며, 즉, 테이블에있는 경우, 예를 들어 vertical-align : bottom 속성을 작성하면 텍스트가 아래쪽으로 채워집니다 letter-spacing은 글자 사이의 거리입니다 글자 사이의 거리가 증가했습니다 단어 간격은 단어 사이의 거리입니다 더욱

공백 공백은 텍스트를 전송하는 것입니다 즉이 속성을 사용하면 텍스트를 새 줄로 전송하도록 브라우저에 지시합니다 아니면 항상 한 줄로 당신과 함께하고 싶습니다 이것은 white-space : nowrap 속성에 의해 설정됩니다 예제를 보자

보아라, 그것은 옮겨지지 않고, 저기에 가로로 간다 그래서 본문은 모두 주요한 것으로 간주됩니다 계속 나아갈 수 있습니다 Transform 속성을 사용하면 블록을 수정하고 크기를 조절할 수 있습니다 예를 들어, transform : rotate를 예로 들면 45도 회전하고 블록을 45도 돌렸다

어떻게 든 보이지 않습니다 폭, 높이를 더해 보겠습니다 그래서 여기서 벌어지고있는 일이 이미 분명합니다 10을 변경하면 10도 회전합니다 이 블록을 여러 픽셀 (예 : 픽셀) 단위로 이동할 수도 있습니다

이것은 정확히 오프셋입니다 translateX – 오프셋 10px Y 축을 따라 Y -라고 쓰면 10px 씩 이동합니다 블록을 애니메이트해야하고 축 -X 및 Y로 재생해야하는 경우, 렌더링을 할 때 비디오 카드가 참여하고 브라우저가 아닌 번역을 통해 변환을 통해 변환하는 것이 더 좋습니다 즉, 애니메이션 최적화를 달성 할 수 있습니다

변형 속성을 사용하여 많은 작업을 수행 할 수 있습니다 블록을 왜곡하여 다이아몬드 모양으로 만들 수도 있습니다 또는 다른 형태로 만들 수 있습니다 전환 러시아어로 전환하는 방법? 이것은 전환입니다

매끄러운 애니메이션을 위해 매끄럽게하기 위해 가장 자주 사용됩니다 매우 자주 그것은 보통 버튼에서 발생합니다 예 : 배경 : 빨간색 여기 우리는 그것을 빨간색으로 가지고 있습니다 hover 속성, 즉 마우스를 가져 가면이 블록을 마우스로 가리킬 때이 블록이 어떻게 동작해야 하는지를 나타냅니다

예를 들어, 배경도 설정하지만 초록색으로 설정하십시오 또 봐 마우스를 움직이면 날카로운 녹색이됩니다 다른 높이를 추가하면 더 잘 볼 수 있습니다 자, 보지? 그는 단지 깜박 거린다 이제 전환 속성을 추가하십시오 그리고 애니메이션의 시간 애니메이션 시간은 밀리 초 단위로 지정됩니다 (예 : 0

2 ~ 02 초) 또 봐 애니메이션이 이제 부드럽게되었습니다 즉, 0

2 초입니다 예를 들어 09로 설정하면 더욱 부드럽게됩니다 전환은 이전에 언급 한 다른 속성과 마찬가지로 짧은 속임수입니다 배경, 국경 및 기타 몇 가지

또한 여러 가지 속성이 포함되어 있습니다 그래서 우리는 비주얼 포맷팅, 즉 비주얼 포맷팅의 마지막 열을 얻었습니다 열이 마지막이라는 사실에도 불구하고 그 안에있는 속성은 매우 중요합니다 순서대로 가자 보자

표시 display는 아이템의 blockiness 표시입니다 몇 가지 값이 필요합니다 그래서, 예를 들어, div 속성을 반환합시다 div는 블록 태그입니다 이전 비디오에서 알다시피 그러나 그는 특정 속성을 부여받을 수 있으며, 그는 이미 인라인 상태가됩니다

예를 들어, display : inline은 보통의 소문자가됩니다 스팬과 동일합니다 인라인 블록 속성은 매우 자주 사용됩니다 즉 소문자처럼 보이지만 블록에 속성을 할당 할 수 있습니다 일반적으로 블록 요소에 할당됩니다

예를 들면 마진과 패딩입니다 위치 위치를 설명하기 위해 두 개의 블록이 필요합니다 a1은 너비가 우리가 가지고있는 블록입니다 아니, 100은 너무 작습니다 500, 높이도 500입니다

그리고 배경 이제 두 번째 블록의 속성을 설정합니다 배경을 알려 드리겠습니다 그가 어떻게 행동하는지 보자 오, 배경은 아니지만

작은 크기 (100,100 녹색)로 모든 속성을 설정해 보겠습니다 그레이트 보시다시피,이 블록은 맨 처음에, 즉 위 왼쪽에 있습니다 녹색 블록을 오른쪽 하단에 표시하려고한다고 가정합니다 이를 위해 우리는 position 속성에 의존해야합니다 즉 위치 : 절대

position : 블록이이 스트림 외부에 있도록하려는 방식으로 절대적으로 말합니다 그러나 이러한 속성을 설정하면 알 수 있듯이 아무것도 변경되지 않았습니다 우리는 그것을 바로 잡아야합니다 그런 다음 오른쪽에 속성을 추가합니다 (오른쪽에 0px) 우리가 기대했던 것만 큼은 아니 었습니다

사실은 위치입니다 절대 위치는 상대 위치 지정이있는 첫 번째 상위 요소를 기준으로 배치됩니다 그것은이 같은 것입니다 그리고 모든 것이 즉시 제자리에 떨어집니다 position : relative가 여기에 없기 때문에 블록은 몸체를 기준으로 배치되고, 즉 최상위 항목입니다

또는 가장 가까운 부모 요소에 상대적으로 배치됩니다 그것은 상대적이거나 고정 된 위치에서 다시있을 것입니다 고정에 관해서는 별도로 이야기 할 것입니다 그래서, 우리는 일하는 결과를 얻을 것입니다 그레이트 우리는 그것이 오른쪽에 있다는 사실을 알았지 만 아래에 있기를 원합니다

그래서 우리는 부동산 바닥을 추가합니다 값을 0px로 설정하고 볼 수 있습니까? 그것은 가깝지만 동시에 10px를 쓸 수 있으며 그 다음 블록은 10px만큼 들여 쓰기됩니다 여기를 보시겠습니까? 또는 바닥에 상대적으로 20 – 20px만큼 이동합니다 국경과 여백 및 패딩과 같은 단어를 사용합니다 즉, 위쪽, 오른쪽, 아래쪽 및 왼쪽입니다

예를 들어, 오른쪽이 아니라면 왼쪽에 우리는 왼쪽에있을 것입니다 밑바닥이 아니라면, 맨 위 또한이 값은 백분율로 설정할 수 있습니다 예 : 5 % 또는 50 % 또 봐

상위 단위의 중간에 정확하게 위치합니다 속성을 100으로 설정하면 값은 100이고 경계를 넘어 곧바로 진행됩니다 즉,이 값은 100 % 너비이며 경계를 넘습니다 일반적으로이 방법은 도구 설명, 즉 몇 가지 팁에 사용됩니다 블록을 가리킬 때이 힌트가이 블록 경계 바로 아래에 표시되도록하려는 것입니다

B를 쓰면 다음과 같은 스타일을 씁니다 left : 100 %와 top에서 100 % 여기에 표시됩니다 즉,이 블록에 지적되었습니다 여기에 힌트가 나타납니다 또는 위 오른쪽에 있습니다

그런 다음 100과 100의 바닥에 남습니다 여기 우리는 동시에 이것이 우리의 입장이라는 것을 검토하고 있습니다 또한, 직위를 가지고 일할 때 z- 인덱스를 고려하는 것도 중요합니다 Z- 색인은 오버레이 레벨입니다 예를 들어 절대적으로 배치 된 두 개의 블록이있는 경우 top : 0, left : 0을 설정합시다

여기에 우리 블록이 표시되고, 옆에 다른 블록이 표시됩니다 동일한 속성을 갖게됩니다 : 배경이 검은 색으로 설정되어 우리와 다른 것입니다 또 봐 그는 첫번째를 막았습니다 그가 스택을 따라하기 때문에

그리고 우리는 그 크기를 바꿀 것입니다 예 : 200에서 200 그래서 그는 첫 번째 블록을 완전히 막았습니다 이제 예를 들어 20px 및 20px로 조금 더 이동해 보겠습니다 예, 나코 야칠은 조금 있습니다 – 수업 이름을 바꾸는 걸 잊었습니다

또 봐 우리는 그것을 이동 시켰고 첫 번째 블록 위에 위치합니다 첫 번째 블록에서이 값을 낮추려면 z- 인덱스의 값을 변경해야합니다 예를 들어, 블록 a2에 대해 z-index 값을 설정합니다 10은 소수입니다

그리고 a3 – 5의 가치 그리고 그는 자신이 더 낮은 수준에 있다는 것을 알게되었습니다 그리고 z-index 속성을 적어두면 이미 이러한 요소를 더욱 편리하게 제어 할 수 있습니다 예를 들어 어떤 시점에서 a3가 여전히 첫 번째 블록보다 위에 있었지만, 이 값을 올리면됩니다 그리고 그게 바로 그것입니다

resize 속성은 textarea 태그에 사용됩니다 봐, 여기에 그런 아이콘이 있니? 그걸 가져 가면이 장치의 크기를 조정할 수 있습니다 보통 이것은 필수는 아니며 아이콘을 숨겨야합니다 따라서 다음과 같이 작성합니다 textarea resize : none

그게 전부입니다 이 블록을 차단할 수 없습니다 커서는이 커서의 모양입니다 예를 들어 포인터

또 봐 이 블록 위에 마우스를 올리면 기본 커서가 아니라 다른 커서가 있습니다 box-shadow는 블록의 그림자입니다 이전에는 텍스트의 그림자를 생각했습니다 이것은 블록의 그림자입니다

그것은 같은 방식으로 작동합니다 배경을 추가하십시오 상자 그림자 : 10px 10px 10px 빨간색 블록의 그림자가 있습니다이 그림자는 X와 Y가 10 픽셀 오프셋이고 10 픽셀이 흐림입니다

이 그림자의 색은 빨간색입니다 흐림을 100으로 높이면 흐리게 보입니다 너는 아마조차 알지 않을 것이다 예를 들어 50으로 줄 이도록하겠습니다 그녀는 여기가 너무 창백하기 때문에

들여 쓰기를 제거하면,이 프레임 이제 이 그림자, 미안 해요 그것은이 블록의 둘레에있는 것과 같습니다

상자 크기 란 예제를 통해 설명하기가 쉽습니다 보세요, 우리는 두 개의 블록을 가지고 있습니다 : parent – red와 a2 – nested 그리고 봤어? 우리가 나가는 둘러싸인 블록, 즉 너비와 높이가있는 부모는 간단합니다 안쪽 너비가 100 % 들여 쓰기됩니다 그리고 우리는이 그림을 얻습니다

그리고이 동작은 매우 바람직하지 않습니다 즉,이 블록의 너비가 100 %이고 패딩의 너비가 50px입니다 이것은 일반적으로 필요하지 않으며 box-sizing 속성을 추가하여 피할 수 있습니다 즉,이 속성은 블록의 너비를 계산하기위한 알고리즘을 변경합니다 일반적으로 상자 크기 조정 속성은 특정 클래스에 적용되지 않으며, 전체 프로젝트 내에서 그리고 다음과 같이 설정됩니다

그것은 작성되었습니다 : 별표 별표는 모든 요소에 대해이 속성을 적용한다는 의미입니다 그리고 우리 모두는 더 정확하게 계산됩니다 부유물은 러시아어로 번역되면 블록을 못 박는 것입니다 여기서 조금 조정 해보고 구조는 그대로 둡니다

우린 블록 a1을 가지고 있습니다 우리는 이것을 필요로하지 않습니다 폭이 100px, 높이가 100px 인 블록 a2가 있습니다 글쎄, 들여 쓰기, 우리는 그렇게하도록합시다 그리고 우리는이 블록을 오른쪽에 놓기를 원합니다

이렇게하려면 float : right라고 씁니다 이 유닛은 오른쪽으로 못 박혔다 그러나 보시다시피 부모 단위가 어떻게 든 사라졌습니다 float 속성을 사용하면, 이 요소는 일반 스트림에서 빠져 나옵니다 그리고 이것은 보통 그런 클래스에 의해 해결됩니다

이것은 clearfix라고 불립니다 즉, 흐름을 재설정합니다 여기에 몇 가지 단순화 된 버전을 작성하겠습니다

clearfix는 일반적으로 프로젝트의 맨 처음에 핵심 클래스 중 하나로 설정되고 개별 요소에 추가 될 수 있습니다 즉, 스트림이 있고 다시 설정하려는 경우 -이 클래스를 throw합니다 전처리기를 사용하면이 요소는 이미 요소 내부에 추가 될 수 있습니다 즉, 대략 이렇게 할 것입니다 즉, 당신은 HTML에 클래스를 추가하지 않지만 CSS 내에서이 모든 스타일을 수행합니다

그래서 우리는 우리가 올바른쪽으로 못 박혔다는 것을 깨달았습니다 다른 블록을 추가하고 싶다면, 왼쪽에 못 박히겠습니까? 우리는 블록을 썼지 만, 바로 위에있는 우리와 함께 있고 그것은 전폭입니다 이제 우리는 그것을 왼쪽에 있도록 만들 필요가 있습니다 우리는 플로트 : 왼쪽 그러나 우리는 그가 무엇인지 알지 못하기 때문에 폭을 더할 것이지만 여전히 보지 못합니다

배경을 추가하십시오 – 이제 보게됩니다 그는 왼쪽으로 못 박혔다 이 하나는 오른쪽에 박혀 있습니다 예를 들어 패딩과 같은 권리를 제거하면 다음과 같이됩니다 우리가 그에게서 높이를 선택하면 둘 다 선 높이에있게됩니다

그것이 줄 높이가있는 것입니다 예를 들어 상위 단위 인 경우 선 높이를 50 픽셀로 설정하면이 두 선이 모두 증가합니다 그건 그렇고, 우리는 동시에 플로트와 클리어를 동시에 고려했습니다 즉, 스트림의 제로화가 분명합니다 그것은 모든 것으로 보인다

이것은 기본 스타일 정보였습니다 다음 비디오에서는 태그를 스타일과 연결하는 방법을 보여 주거나 CSS 사전 처리기에 대한 비디오를 먼저 살펴 보겠습니다 그리고 나서이 친구들을 만드는 법을 보여 드리겠습니다 질문이 있으시면 코멘트에 남기고 채널에 가입하십시오 새로운 비디오에서 만나요

안녕히 계십시오