Code Walkthrough: CSS Part 2

돌아 오신 것을 환영합니다 이제 몇 가지 예를 살펴 보겠습니다

우리는 가지 않을 것입니다, 우리가 보지 않을 것 중 하나는 정확히 어떻게 이 탐색 바는 최소한 조금 후에 작동합니다 그래서 우리가 살펴볼 다음 것은 글꼴이 작동하는 방법입니다 글꼴을 파일에 넣을 수있는 몇 가지 방법이 있습니다 Serif와 같이 모든 브라우저에서 제작해야하는 기본 글꼴이 있습니다 산 세리프, 모노 스페이스, 필기체, 환타지

그래서 그들은, 당신은 정확히 무슨 일이 일어나는지 알지 못합니다 종종 대체 글꼴로 사용됩니다 그래서 당신은 그것들을 가질 수 있습니다 Ariel이나 Helvetica와 같은 시스템에있는 글꼴이 있습니다 Ariel을 사용하려고합니다

대부분 요즘에는 Ariel이 있지만 모든 시스템에 Ariel이있는 것은 아닙니다 그리고 하나 이상의 글꼴을 가져야합니다 요즘 정말 일반적으로 사용되는 또 다른 사항은 어떻게 든 글꼴을 포함시키는 것입니다 너는 글꼴에 관하여 알아 내고 여기에서 lotto 글꼴 및 당신은 웹에서 그것을 찾아 가서 당신은 이것을 포함 찾으십시오 그래서이 멋진 글꼴 로또를 발견했기 때문에이 링크를 포함 시켰습니다

이것은 브라우저를 확장합니다 그런 다음 브라우저는이 글꼴에 대해 배우고 글꼴을 다운로드하고 캐시하고 브라우저에서 그들을 유지하고 나는 로또의 글꼴을 만들 수 있습니다 하지만 나는 인터넷에서 벗어난 경우를 대비하여이 물건을 다운로드 할 수 없다 나는 Sans-serif를 Latto의 대체품으로 사용하기 때문에 Latto는 화려한 글꼴 등입니다 그래서 아리엘과 내장 글꼴, 등등이 있습니다

글꼴의 작동 방식도 마찬가지입니다 색상, 색상에 대한 멋진 것들이 많이 있습니다 몇 가지 다른 것들이 있습니다 우리는 잠시 Nav를 무시할 것이다 여기에서 span 태그를 사용하고 있습니다

가장 초기 브라우저에는 기본 색상이 있습니다 요즈음 우리는이 모든 멋진 것들을 가지고 있으며 당신은 이것들을 볼 수 있습니다 HTML 색상 만 있으면 Google뿐입니다 그리고 수많은 이름이 있으며 브라우저간에 일관성이 있습니다 하지만 12 살 정도입니다

시간의 시작부터 모든 브라우저에있는 정말 견고한 이름 하지만 최신 브라우저는 색상이 더 좋습니다 그래도 정말 훌륭한 그래픽 아티스트는 색상을 훨씬 잘 제어하고 싶어합니다 그리고 # 기호는 이것이 16 진수라고 말합니다 2 자리 숫자가있어

Hex는 그들이 f까지 모든 방법을 의미합니다 그래서 a f는 숫자입니다 8B는 적색 레벨, 45는 녹색 레벨, 13은 청색 레벨입니다 그리고 이것은 갈색의 색깔입니다 그리고 방금 가지고있는 곳에 웹 안전 색상이 있습니다

이것은 88, 44, 11이됩니다 그러나 서버를 믹싱하는 경우 잠재적 인 색상 수가 줄어 듭니다 다양한 소스의 색상 HTML5에서는 양식이있을 때이 색상 선택기를 볼 수 있습니다 우리는 조금 이야기 할 것입니다

최신 브라우저를위한 색상 형식입니다 그런 다음이 버튼으로 색상 선택기를 팝업 할 수 있습니다 그리고 나는 색이 무엇이 될지 조금 인쇄 해 봤습니다 그리고 그것은 단지 녹색을 선택할 때 기본적으로 00FF, 빨강, 초록, 파랑입니다 이걸로 들어갑니다

그런 다음 프로그램에서 사용할 수 있거나 읽을 수 있습니다 자바 스크립트가 그것을 읽을 수도 있고 서버 코드가 읽을 수도 있습니다 하지만 지금 당장은 피커를 가지고 놀고 있습니다 색상, 그리고 마젠타는 모두 빨간색, 녹색, 파란색 중 하나가 아닙니다 그리고 주황색은 모두 빨간색이고, 일부는 녹색이고, 파란색은 없습니다

그래서 그것들은 모두 정말로 강한 색들입니다 그래서, 이것이 바로 HTML 색상 선택기입니다 옛날 앵커 태그, 앵커 태그는 일종의 펑키했습니다 네가 아직 안왔다면 그들은 푸른 색이었다 방문했을 때 보라색이었습니다

그래서 저는 분명히 이것을 클릭했습니다 그래서 우리는 우리가 가질 수있는 일련의 스타일 매커니즘을 가지고 있습니다 우리가 이것들을 살펴 본다면, 차가운 ID 태그 안쪽에이 모든 것들을 넣었습니다 그래서 이것은 근본적으로 멋지다 그런 다음 앵커 태그를 글꼴 두께가 굵게 표시되도록 스타일을 지정합니다

여기서 살펴 보도록하겠습니다 여기에이 단락이있는 단락이 하나 있습니다 차가운 ID 태그가있는 단락이 있습니다 기본적으로 스타일을 지정할 필요가 없습니다 보통 당신은 내가 단지 스타일 만하고 있다고 말하지 않을 것입니다

ID가 멋진 태그 안에 앵커 태그가 있지만 그런 식으로 나는 이것에 디폴트를 가질 수있다 이것이 디폴트를 유지하는 나의 방법이었습니다 그래서 평소에 그냥 말할 것입니다 그래서 A, 길이가 빨간색입니다 방문하면 오렌지색이됩니다

이 사람이 방문 했으므로 빨간색이 보이지 않습니다 방문하지 않았다는 것을 의미합니다 커서를 올리면 변경할 수 있으므로 마우스를 가져 가면 텍스트 장식이 표시됩니다 멀리, 밑줄은 사라지고, 나는 흰색의 텍스트 글꼴 색의 색을가집니다 해군의 배경색과 마지막 순간이 있습니다

이 버튼을 클릭하면 클릭합니다 마지막 순간에 잡기가 정말 어렵습니다 즉, 웹이 느리고 사용자가 클릭 한 경우 활성화 된 순간입니다 사용자에게 예전에는 이것이 더 합리적이라고 말했을 것입니다 그것이 빨간색으로 바뀌고 깜박 거리게됩니다

우리가 그것을 볼 지 모르겠다 너는 그것을 보았다 그래서 당신이 그것을 클릭하는 동안 색깔이 있습니다, 예, 그것이있었습니다 화면에 표시되지 않을 수도 있습니다 그러나 그것은 당신이 클릭 한 적이 있다는 것을 의미합니다

아직 검색되지 않았습니다 그리고 잠시 후 전체 페이지가 사라집니다 우리가 할 수있는 또 다른 일은 이미지로 놀 수 있다는 것입니다 그리고 여기 이미지가 있습니다 이미지로하는 것이 정말 재미있는 일 중 하나는 오른쪽으로 이동시키는 것입니다

그들을 왼쪽으로 띄운다 그리고 나서 일어나는 일은 이미지 텍스트 이미지 주위에 그려 지므로 이미지 주위를 둘러 쌉니다 당신은 내가 떠난 곳을 알게 될 것입니다 나는 모든 것을 없애 버렸다 나는 h1 이전에 왼쪽으로 띄웠다

그래서 h1과 h1의 맨 위와 이미지의 윗부분이 줄 지어 있습니다 이후에 모든 텍스트가 그 주위를 둘러 쌉니다 그러면 이미지를 먼저 얻은 다음 h1을 얻은 것을 알 수 있습니다 그리고 플로트 정렬은 이미지를 정상적인 흐름 선과 분리합니다 그것을 넘기고, 다음으로 다음 단락을 취합니다

그리고 이미지를위한 공간을 절약하고 모든 것을 밀고, 여백이 넘어서 여기 오게됩니다 자, 이미지를 떠 다니기 시작하면,이 맑은 = 모든 것을 배워야합니다 왜냐하면 우리가이 단락과 같은 다음 단락을 원한다면, 우리는이 단락이 어떤 이유로 든 이미지에 있기를 원하지 않습니다 자, 그것이 충분히 멀리 간다면,이 단락을 볼 수 있습니다 여기 왼쪽 마진으로 돌아 가면 다음이 시작됩니다

하지만 브라우저가 더 넓고 그렇지 않은 경우 많은 텍스트, 우리는 이것이 여기에 있기를 원하지 않습니다 그래서 여러분은 <br clear="names">이 단락과 이 단락은 우리가 <br clear="all"all"> 수행합니다 또한 문자 중간에 이미지를 넣을 수 있습니다 당신은 그들 자신을 가질 필요가 없습니다 또한 클릭 가능한 링크 인 이미지를 만들 수도 있고 그래서 당신은 그 이미지를 클릭 할 수 있습니다

이제 CSS의 C는 계단식 스타일 시트를 나타냅니다 그래서 아이디어는 가장 가까운 태그가 당신이 중요하다고하지 않는 한 멀리있는 태그보다 우선 순위가 더 큽니다 여기 스타일이 있습니다 여기에 우리는 body 태그, 점선 빨강 및 빨강 테두리 스타일, 빨간색과 중요 테두리 색상, 테두리 폭은 5 픽셀입니다 일종의 칙칙한 배경색

회색과 여분의 패딩입니다 그래서 우리는 여분의 여백을 늘리고 추가 여백을 두었습니다 그래서, 그래서 이 부분을 살펴보면이 단락을 여기서보실 수 있습니다 우리는 몇 가지 것을보고, 우리가 가진 것을 살펴 봅니다 그래서 우리는 이것을 계승했습니다

우리는 국경 스타일, 색깔을 가지고 있습니다 국경 색깔이 녹색이 ​​되길 원하지만, 그렇지 않습니다 왜냐하면 국경 스타일은 단단하다고 말하기 때문입니다 두 번째 스타일 태그에서 솔리드의 경계 스타일이 여기 아래에 있습니다 두 번째 스타일 태그는 단락에 더 가깝기 때문에 우선 순위를 갖습니다

그래서 경계 색을 녹색으로 저장하려고했습니다 하지만 그 중 하나가 무시되었습니다 그래서, 그렇지 않으면 단색의 녹색 테두리가 생길 것입니다 이 중요한 것이 중요합니다 그래서 중요한 빨간색이 승리하고 이것이 여기에서 매우 쉽게 볼 수 있습니다

이것은 하나, 경계 색, 이전 하나가 우선합니다 괜찮아 그리고 이것은 두 번째 것입니다 일반적으로이 항목보다 우선 순위가 높습니다 이 중요한 것은 더 가까운 것보다 우선합니다

더 가까이있는 또 다른 예는 스타일 태그입니다 좋아 그래서 여기에 우리가 간다 우리는이 스타일 속성을 넣을 것입니다 우리는 경계 스타일이 돌진과 같고 경계 색이 파란색과 같다고 말하고 있습니다

그래서 국경 스타일은 돌진과 동일하지만, 우리의 시도는 국경 색상 인 파란색은 다시 빨간색으로 무시됩니다 그렇게 중요합니다 그리고이 돌진은 이기고이 파란색은 승리하지 못합니다 그 위에 중요한 빨간색이 중요하기 때문입니다 중요한 태그를 덮어 쓰고 싶다면, 우리는 여기서 중요한 태그를 무시합니다

우리는 기본적으로 경계 스타일을 파선으로 만들고 싶습니다 여기로와 테두리 스타일이 파선입니다 그리고 국경 색이 파란색이되기를 바랍니다 이것은 중요합니다

이제는 더 가깝고 중요합니다 그리고 모든 중요한 것들 중에서 가장 중요한 것이 승리합니다 그리고 이제 우리는 경계 색이 실제로 여기에 걸리는 것을 봅니다 그리고 우리는 먼 곳을 무시하고 있습니다, 여기 멀리있는 곳에서, 이 때문에 무시되었습니다 그래서 그렇게 할 수 있습니다

이제는 일반적으로 내가 얼마나 중요한 일을 보여 주 었는가? 일반적으로 CSS를 사용하고 있기 때문에 너무 중요하지 않아야합니다 다른 곳에서 가져 와서 패치하고 있습니다 그리고 당신은 정말 일관성없는 외모로 끝낼 수 있습니다 중요한 것으로 느낀다 보통 중요한 것을 보았을 때 뭔가 잘못되었다는 것을 의미합니다

당신은 프레임 워크 또는 다른 것과 싸우고 있습니다 이제 블록을 살펴 보겠습니다 그리고 배경색을 보자 왜 각 색깔이 푸른 색인지 그리고 여백에 약간의 덧칠을 할 것입니다

그래서 div와 H1은 상자에 살고 있습니다 당신은 실제와 비슷한 것을 가지고 있습니다 이 단락을 여기에 말하면 아마도 할일 일 것입니다 그냥 평범한 오래된 단락 특별하지 않은가? 우리는 거기에 갈

바로 그 단락이야 그래서 패딩과 마진에 대해 이야기 해 봅시다 맞아요, 내부에서부터 작업하는 것은 실제 텍스트입니다 그것의 포장

그리고 만약이 전체 블록의 너비를 변경한다면, 맞습니까? 키가 커지고 좁아집니다 그러나, 어느 시점에서,이 안쪽 부분, 바로 여기, 그러나 그것이 크고,이 경우 318×38 픽셀입니다 맞습니까? 그리고 나서 우리는 안쪽에서부터 밖으로 일하는 것입니다 그래서 나는 여기에 가서 상자 모델을 볼 것입니다 따라서이 텍스트의 실제 텍스트는 619 x 19 픽셀입니다

그런 다음 10 픽셀의 패딩을 추가하도록 요청했습니다 그것은이 종류의 텍스트와 경계 사이에 있습니다 그리고 나서 경계 자체가 너비를 가지며, 그 경계 너비를 지정했습니다 5 픽셀 테두리 너비가 필요하다고 말했어 테두리 폭은 5 픽셀을 차지합니다

그리고 그 밖에는 마진이 있습니다 그리고 마진은 공간입니다 패딩과 텍스트 자체는 블록의 배경을 가지고 있고, 테두리는 자체 색상을 가지고 있으며, 그런 다음 배경 문서의 색상으로 여백을 지정합니다 좋아요, 여긴 여백입니다 배경 문서의 색깔이 맞습니까? 콘텐츠, 패딩, 경계, 마진

그런 다음 배경에서 상자 안의 텍스트에서 패딩이 상속하는 부분과 마진은 배경 문서에서 상속됩니다 그리고 당신은 다른 배경색, etcetera etcetera 등을 가질 수 있습니다 그건 그렇고, 이것은 우리가 바로 여기에있는 주문 목록입니다, 알았죠? CSS 상자입니다 우리는이 상자의 크기를 변경할 수 있습니다 조금 까다 롭고 너무 여기에 우리는 높이에 대해 언급하지 않은 곳에서 자동 크기 조정 div를 사용합니다

여기서 상자 모델을 살펴보면이 모델이 간단하다는 것을 알 수 있습니다 텍스트의 크기, 패딩, 테두리, 플러스 마진 그리고 그것은 상자의 크기를 결정하는 것과 같습니다 상자의 크기를 설정한다고 말할 수 있습니다 그래서 저는 그걸 3m 이도록 할 것입니다

3m은 3 자입니다 하지만 네가 보면 내가 너무 많이 여기있다 그리고이 상자가 3 글자이지만 그것은 네 줄이고 그래서 세 개는 맞을 것이지만 네 개는 맞지 않을 것입니다 그래서 오버플로가됩니다 너도 3m이야, 크기를 m으로 설정하는 것이 좋다

누군가가 화면을 크게 만들면 할 수 있습니다 그 뜻이 아니 었어 이것은 또한 이것을 더 크게 만들거나 더 작게 만듭니다 이제 문제는 그것이 문제라고 부를 수 있다면 나는 그것에 관해서하지 않는다는 것입니다 그러나 예전에는 높이와 픽셀을 설정하고 당신은 화면을 줌하고, 높이와 m을 설정하는 박스는 줌과 픽셀 단위로 설정 한 것은 아닙니다

그러나 그들은 달리 확대 / 축소 작업을하기로 결정했습니다 많은 사람들이 픽셀로 상자를 만들어서 확대 / 축소를 픽셀이 실제로 m 인 척하고, 그래서 픽셀의 종류를 m으로 바꿉니다 그러나 실제로, 기술적으로, 실제로 문자를 의미 할 때 픽셀을 사용하지 않아야합니다 세 줄을 원한다면, 다섯 줄을 보지 마라 이렇게하려면 40 픽셀을 만들겠다고 말합니다

다시이 상자에 여전히 텍스트가 꽉 차 있습니다 따라서 오버플로를 변경하려는 경우 할 수있는 몇 가지 작업이 있습니다 오버플로가 작은 스크롤 막대를 만들기를 원한다는 것을 상자에 알릴 수 있습니다 여기 같은 것들이 있습니다 그리고 당신은 그가 작은 아기 스크롤바를 얻는 것을 볼 수 있습니다

그리고 그것은 상자 밖에서 일종의 비웃음을하지 않았습니다 그리고 스크롤이 맞을지라도 작은 스크롤 막대는 보이지만 거기에 단 한 줄만 있기 때문에 스크롤 할 수없고 상자에 맞습니다 그리고 나서 당신이 할 수있는 또 다른 일은 당신이 그걸 잘라 버릴 수 있다는 것입니다, 알았죠? 그걸 잘라 버려 자, 자바 스크립트가있는 것, 여기에 좀 더 넣을 수 있습니다 상자를 확장 시키거나 빌 로그에 나타납니다

우리는 지금 그것에 대해 걱정하지 않을 것입니다 당분간, 우리는 단지 오버플로 숨겨진 의미가 당신이 필요로하는만큼 그것을 밖으로 누워 의미, 이 텍스트를 버리면 더 이상 존재하지 않습니다 모든 사람들이 다 어디에서 이런 모든 텍스트가 나왔습니까? 그러나 그것을 보여주지는 않습니다 왜냐하면 우리가 그것을 잘라 내기 위해 말했기 때문입니다 좋아, 그럼 다음 차례에

이러한 것들을 움직일 수 있습니다 우리가 간다 조금 다른 것으로 만들어 보자 좋아요 기본적으로 HTML을 잠시 후에 보여 드리겠습니다

이것, 아니면 그냥 소스보기 소스를 보자 그래, div div라고 말하면, 그들은 단지 서로를 따라 간다 그리고 나는 그들에게 국경을 주었다 왜냐하면 작은 그림을 그리기 위해서, 그들에게 약간의 경계, 약간의 패딩, 그리고 약간의 마진을 주어야한다

그들은 너무 많이 만지지 않습니다 그래서, 기본적으로 블록으로, 그래서, 나는 양쪽에 약간의 국경을 가지고있어 그들 사이에 약간의 공간이 있습니다 좋은 일이지만, 그렇게 크지 만,이 것이 커지고, 나는 그 (것)들에 폭을, 다만 주변에 이동하지 않을 것이다 그래야 두었다 바로 거기 너비가 있습니다, 10 Ms, 너비는 10 자입니다

그래서, 그들은 단지 서로 따라 간다 그리고 나서 여러분은 이렇게 말할 수 있습니다이 블록은 바로 여기입니다이 숫자 3은 지금 당장 나와야 겠지만, 나는 3 번 블록에서 내가 원하는 곳에 상대하기를 원한다고 말했다 정상적으로는 왼쪽에서 20 픽셀, 맨 위에서 아래쪽에서 20 픽셀입니다

그리고이 블록은 그것이 바로 여기에 속한 것처럼 정확하게 둡니다 그리고 나서 우리는 그것을 뒤집어 쓰러 뜨렸다 그리고 그것은 4 번 블록을 넘어 섰습니다 그래서, 거기에 당신이 간다 그리고 그 다음 텍스트,이 숫자 4 블록은 다음에옵니다

기본적으로 이것은 마치이 위치 관계가없는 것처럼 펼쳐집니다 그리고 나서 이것은 나중에 왔지만, 우리는 단지 그것을 옮겼습니다 그리고 그것이 왜이 중첩이이 코너를 만들었는지에 대한 것입니다 정상적인 레이아웃으로 끝났다 그래서 친척을 조심해야 해

내 말은, 너 보통 하지마, 당신은 대개 서로를 깔끔하게 정리하기 위해 그것을 만들고 싶어합니다 좋아요 그래서 지금, 우리는 4 명이고, 그러면 우리는 5 명과 6 명을 볼 것입니다 그리고 다섯 가지가 고정 된 텍스트입니다 그리고 5 명이 여기에 온다는 것을 알 수 있습니다

나는 고정 된 위치로 이것을 가지고 있는데, 이것은 창에 상대적으로 고정되어있다 따라서 하단에서 20 픽셀, 왼쪽 여백에서 30 픽셀 위쪽입니다 그래서, 이것이 왼쪽 여백에서 30 % 나되는 것을 볼 수 있습니다 그리고 그것의 밑바닥은 아래쪽에서 20 픽셀 위쪽입니다 그리고 그 녹색 상자가 움직이지 않는 것을 볼 수 있습니다

이는 고정 테스트가 창에 상대적이기 때문입니다 이것이 우리가 결코 사라지지 않는 링크에서 실제로 이것을 얻는 방법입니다 그래서 절대로 없어지지 않는 링크가 있습니다 절대적인 텍스트, 그것은 그들이 절대적으로 고정 된 것이라고 부른 이유를 모르지만 절대 텍스트는 조금 다릅니다 부모 요소와 관련이 있으므로이 바로 여기 다이빙에서 부모 요소는 본문 탭입니다

그래서 말하면, 나는 이것을 위쪽에서 40 픽셀, 왼쪽에서 30 퍼센트로하고 싶습니다 즉 body 태그와 관련이 있음을 의미합니다 그래서 body 태그가 여기에서 시작됩니다 그래서, 이것은 40 픽셀 아래로 30 % 크기입니다 그리고 그 사람이 스크롤과 함께 간다는 것을 알아 차려야합니까? 그래서, 그 사람은 스크롤과 함께 간다

그리고 네, 다섯, 여섯 사이에 주목할 것입니다 마치 여기에 아무것도없는 것처럼 보입니다 하지만이 문서를 보면 5,6 명이 거기에 앉아 있습니다 이는 정상적인 렌더링 스트림에서 뽑히기 때문입니다 그래서 그들은 4에서 7 사이의 공간을 차지하지 않습니다

그래서 페이지가 배치 될 때 일종의 레이아웃으로 간주되지 않습니다 그리고 예를 들어 숫자 7입니다 글쎄, 사실 8 번이야 여기 번호 8이 있습니다 따라서이 값은 음수 1,000 픽셀의 왼쪽에 상대적으로 배치됩니다

그래서 어떤 의미에서, 이 물건들이 여기 왼쪽에있는 화면에서 밀려났다 그래서 우리는 텍스트를 아무도 보지 않을 것입니다 그것을 왼쪽으로 옮기십시오 그러나 그것은 어쨌든 수직 공간을 차지합니다 단지 상대적인 것이 었습니다

그것은 보통 여기에 놓여 있었을 것입니다, 그러나 왼쪽이 그것을 저기에 밀어 넣었습니다 그래서 기본적으로 레이아웃입니다 이제는 z- 인덱스에 대해 이야기 할 것입니다 여기에서 소스 코드를 살펴 보겠습니다 그래서 z- 색인은 물건이 겹칠 때 일어날 수있는 능력입니다

그리고 이것은 div입니다 1 위는 100의 Z- 인덱스입니다 두 번째 숫자는 az 인덱스가 음수 인 100입니다 0은 백그라운드 문서의 일종입니다 그리고 그것은 매우 간단합니다

그리고 저는 이것들을 움직이고 있습니다, 그래서 그들은 서로 위에 놓여 야합니다 그래서 여러분은 여기에있는 것이 음수 100임을 알 수 있습니다 그래서 그것은 모든 것의 뒤에 있습니다 이 것은 긍정적 인 100이므로 모든 것 앞에 있습니다 그리고이 세 번째 숫자는 맞습니다

z- 색인이없는 원본 문서에 있어야합니다 그래서, Z 지수가 100 인이 뒤에 있습니다 알았죠? 그리고 그것은 z 지수입니다이 작은 쪽지는 끝났습니다 여기 오른쪽 여백에 따르면 Z- 색인은 좀 까다 롭고 모든 사람들이 정상에 오려고합니다

그리고 Z- 인덱스를 100으로 놓으면 네비게이션이 스스로를 찾습니다 1,000의 z- 인덱스 같은 것입니까, 아니면 그런 것입니까? 그래서 z-index는 디버그하기가 어렵고 맞추기가 어렵지만 적어도 지금은 상황이 이상하게 보일 때 Z- 색인을 알고, 이상한 방식으로 겹치고 있습니다 Z- 색인은 당신이 활용하고있는 것입니다 그리고 이제는이 네비게이션이 어떻게 작동하는지 살펴 보겠습니다 그래서 네비게이션이하는 몇 가지 사항이 있습니다

물론 시체는 Arial, Sans Serif라는 글꼴 패밀리입니다 이것에 대한 뷰 소스를 만들 것이라고 생각합니다 그러면 탐색 바를 볼 수 있습니다 탐색 모음 자체는 블록입니다 블록 태그 맞지? 그것은 밝은 회색의 위치를 ​​가지고 있으며, 3m의 높이를 부여했습니다

3 줄이고,이 페이지를 확대하면 밖으로, 그것은 더 크고 더 작아진다 100 %로 돌아 가세요 세 줄의 키가 크고, 나는 Arial Sans Serif를 말할 필요가 없다고 생각한다 다른 누군가가 body 태그를 바꾸고 싶을 때를 대비해서 만들었습니다 그러면 nav 태그 안에 ul 태그가 필요합니다

이것은이 네비게이션이 자체 태그라는 것에 대한 좋은 점 중 하나입니다 나는 여기 안쪽에 스타일 만 꾸밀 수있어, 알았지? 그리고 제가 여기서하고있는 일은 제가 말하고있는 것입니다, 나는 작은 원, 작은 점, 작은 총알을 원하지 않는다 그래서 나는 그 중 누구도 원하지 않습니다 나는 기본적으로 가지고있는 패딩을 없애고 싶다 이것은이 ul이 상속하는 것들 중 하나입니다

여기에 내려와 이것을 살펴 보겠습니다 이 우물이 바로 여기에 있습니다 그래서, 무슨 일이 일어나고 있는지, 이것은 제가 CSS에서 말한 것들입니다 나는 몇 가지 기본 사항을 무시하고있다 일반적으로 표시됩니다

표시 블록입니다 괜찮습니다 그래서 목록 유형 스타일을 뒤엎었습니다 그리고 계속해서, nav 안에있는 목록 항목, 그게 뭔지, 목록 항목을 탐색하십시오 나는 그것을 만들고 싶었다

그래서이 사람을 여기에서 조사하자 너가 여기 보이는 경우에, 그리고 나는 등을 맞댄 종류를 얻는다, 여기에 부모님과 관련된 절대적 위치가 있습니다 그리고 왼쪽 위 20 픽셀 왼쪽에 있습니다 그래서 그것이 이것이 여기에 오는 방법입니다 그리고 나서 나는 진한 파란색으로 물들였습니다

내부의 앵커 태그, 내부의 li 태그 내의 앵커 태그 이것이 바로 이것이 말하는 것입니다 진한 파란색 텍스트 장식 없음 그래서 여기가이 색의 파란색과 밑줄이 없습니다 그리고 이것은 점 다시입니다

그래서 저는 백 클래스 (back class)를 사용하여, 그것을 위해, 밀어 넣거나, 여기에 배치합니다 그리고 나서 flurry 클래스를 사용하여이 상대방을 오른쪽에 배치합니다 오른쪽에서 20 픽셀 그래서 탐색 모음을 작동시키는 방법입니다 CSS는 실제로 많은 작업입니다

우리는 CSS에 대해 많은 것을 배웁니다 그리고 이것은 단지 아주 짧은 소개입니다 CSS의 기본 메커니즘이 무엇인지 느껴보십시오 지켜봐 줘서 고마워 [음악]