따라서 아직 다루지 않은 가장 중요한 개념 중 하나는 요소의 위치입니다.
그러면 페이지를 배치하거나 div를 오른쪽 상단으로 이동하는 방법은 무엇입니까?
또는 앵커 태그를 더 넓게 만들거나 이미지 사이에 간격을 어떻게 추가할까요?
이 모든 것이 정말로 중요하며 상자 모델이라는 것과 관련이 있습니다.
따라서 박스 모델은 기본적으로 HD의 모든 요소의 중심에 있으며, 기본적으로 모든 요소에는 사각형 상자가 있습니다.
그래서 우리는 여기 MDA의 어떤 웹 페이지로 가도 볼 수 있습니다. 검사관을 열어 돋보기를 선택했습니다.
그리고 모든 요소 위로 마우스를 가져 가면 주위에 상자가 있음을 알 수 있습니다.
그래서이 H2에는 그 주위에 파란 상자가 있습니다.
이 상자에는 상자가 있습니다.
특히 boxy하지 않은 것들조차도.
그래서이 둥근 모서리 ..
주변에는 상자가 있습니다.
무대 뒤에서.
그래서 여기와 이것 하나는 정말로 둥글거나 둥글지 않고 둥근 모서리를 가진 상자 형이지만 아직 상자입니다.
그래서이 상자들은 우리가 다른 속성을 스타일링 할 수 있기 때문에 정말 유용합니다.
따라서 모든 상자에는 4 개의 속성 또는 4 개의 다른 부분이 있습니다.
많은 속성이 있지만 우리가 조작 할 수있는 상자 부분에 있습니다.
MDA에서 나온이 다이어그램이 단락이라고 가정 해 봅시다.
그래서 단락에 일부 텍스트가 있고 그것을 주황색이나 노란 경계선으로 표시하고 사용자가 텍스트와 경계선을 보지만 실제로는 다른 일이 일어나고 있습니다.
그래서 국경과 텍스트 사이에는 패딩이라는 것이 있습니다.
따라서 패딩은 경계 안의 공간 일뿐입니다.
콘텐츠와 테두리 사이에는 여백이 있고 그 다음에 여백이 있습니다.이 여백은 외부 테두리와 다른 테두리 사이에 있습니다.
그래서 우리는 종종 여백을 사용하여 요소 사이에 간격을 추가합니다.
그래서 우리가 두 단락을 가지고 있고 그것들이 더 멀리 떨어져 있기를 원한다면 나는 여백을 사용하고 그것을 증가시킬 것입니다.
이제 우리는 실제로하기 전에 우리가 사용하기를 원하는 속성 중 일부 구문에 대해 자세히 살펴 보겠습니다.
나는 당신에게 가장 흥미로운 것 중 첫 번째 것을 만들기를 고대 할 수있는 두 가지를 보여주기를 원하지만 중요한 것은 우리가 지금 이와 비슷한 것을 만드는 방법을 가지고 있다는 것입니다.
지금까지 우리는 실제로 연결된 상자가 서로 연결되어있는 상자를 만드는 방법이 없었습니다. 그러나 상자가 비어있어 안에는 텍스트가 없습니다.
그래서 우리는 박스 모델에 대해 배우고 그것을 여기에 적용하여이 틱택 매듭 보드를 만든 다음 허구의 사진 작가를위한 포트폴리오 사이트를 만들 계획입니다.
그래서 이것은 좋다.
이미지가 반응하므로 크기가 바뀌고 창 크기와 눈금이 바뀝니다.
이 모든 것은 여기에서 배우려는 개념을 기반으로합니다.
그래서 저는 여기에 서서 숭고하게 열어 갈 것입니다.
그리고 저는 제가 만든 아주 간단한 문서를 가지고 있습니다.
그래서 단순한 HTML입니다.
연결된 스타일 시트가 있습니다.
그것은 비어 있습니다.
몇 가지 의견과 두 개의 단락을 제외하고.
그래서 이것을 열어 보면 매우 지루하다는 것을 알 수 있습니다. 상자 모델을 가지고 놀기 위해 이것을 사용하려고합니다.
그래서 나는 성공하게 될 것이고 단락을 고를 것입니다. 그런 다음이 주석들을 내부에 복사하여 제가하고있는 일을 시각적으로 알려주기 위해 코드를 작성할 수 있습니다.
그래서이 경계를주는 것으로 시작합시다.
따라서이 경계선을 검토해야하며 픽셀 파랑으로 그 새로 고침을 저장하고 콘텐츠 주변에 경계선이 있음을 알 수 있습니다.
그리고 여기서도 눈에 띄는 점은 여기에있는 콘텐츠가 화면 전체에 걸쳐 있다는 것입니다.
우리 경계는 여기서 멈추지 않습니다. 왜냐하면 우리가 기본적으로 단락을 만들 때 화면 전체에 걸쳐 있기 때문입니다.
따라서 텍스트의 단락 자체의 너비를 변경하려면 width 속성을 사용할 수 있습니다. 그러면 앞으로 가서 너비를 1로 지정합니다.
시작하려면 200 픽셀을 사용합시다.
그리고 새로 고침하면 너비가 바뀌 었음을 알 수 있습니다.
내가 조사하면 내용이 파란색이 아닙니다.
그리고 나서 우리는 그 주변에 경계선을 가지고 있습니다.
따라서 콘텐츠는 파란색입니다.
그리고이 다이어그램에서이 상자는 바로 여기이 요소 상자입니다.
그리고 나서 우리는 바로 그 경계선을 가지고 있습니다.
국경과 내용 사이에는 공간이 없습니다.
너비가 다른 것도 하나 있고 높이도 있습니다.
그러니 300 픽셀의 높이를하고 방금 공간을 추가했는지 봅시다.
나는 그것을 제거 할 것이지만 우리가 사용할 수있는 높이가 있습니다.
백분율을 사용할 수 있도록 픽셀을 사용하지 않아도됩니다.
그리고 그것들은 정말 유용해서 보여 드리겠습니다.
50 %를하자. 그러면 50 %가 무엇인지 궁금 할 것입니다.
그리고 대답은 부모 요소의 50 %라는 것입니다.
따라서이 경우에는 단락 내부의 단락이 본문을 가로 지르는 중간입니다.
우리의 경우에는 본문이 전체 페이지입니다.
그것은 모든 길을 가로 지르고있었습니다.
그래서 우리는 페이지의 절반으로 끝납니다.
그리고 창 크기를 변경하면이 점도 좋으므로 많은 사람들이이를 사용하므로이 이미지 격자에서 실제로 사용하게 될 것입니다.
이미지가 너비를 변경하고 그 비율을 볼 수 있습니다.
좋아, 지금은 그렇게 유지할거야.
그리고 우리가 이야기 할 다음 속성은 패딩입니다. 패딩은 요소와 경계 사이의 공간입니다.
그리고 바로 지금 우리는 국경이 바로 위에 있지 않습니다.
그래서 패딩 (padding)이라는 속성이 있습니다. 픽셀 수를 줄 수 있고 시작하려면 10 픽셀을 사용합시다.
파일 새로 고침을 저장하십시오.
이제 모든면에 10 픽셀의 여백이 있습니다.
따라서 지금 검사하면 녹색 콘텐츠가 표시되어 파란색 콘텐츠가 있고 그 다음 테두리와 콘텐츠 사이에 녹색이 표시되므로 분명히이를 늘릴 수 있고 많은 것을 얻을 수 있습니다 내부에 더 많은 공간이 있습니다.
그러나 이것이 패딩을 설정하는 유일한 방법은 아닙니다.
이것은 4면 모두에서 정확히 동일하게 설정됩니다.
그러나 때로는 국경과 같은 한면 또는 두면에만 패딩을 원합니다.
더 긴 버전의 경우에는 경계가있는 상위 10 픽셀 경계 인 하위 5 픽셀의 바로 가기가 있습니다.
덧씌우 기와 같은 것은 그것을 주석 처리하고 우리는 40 픽셀과 신선한 채움과 같은 것을 할 수 있습니다.
우린 여기서 패딩을합니다.
그리고 그것은 패딩을위한 유일한 장소입니다.
그리고이 파란색 공간은 여기에서 나온 실제 내용 인 패딩이 아니라는 것을 기억합니다.
오른쪽에 공간이있는 것처럼 보입니다.
그것은 다른 곳에서 왔습니다.
그래서 우리가 여기서 할 수있는 또 다른 일은 마진을 가지고 노는 것입니다.
마진은 퍼즐의 마지막 부분입니다.
국경 밖의 공간입니다.
그래서 요소들 사이.
여기이 공간을 여기에서 늘리거나 늘리거나, 예를 들어 이미지 사이의 공간을 Marjan을 사용하여 설정하기 때문에 유용 할 것입니다.
그래서 실제로는 패딩처럼 보이기 때문에 여백을 말하고 시작과 새로 고침을 위해 100 픽셀과 같은 명백한 작업을 해봅시다.
그리고 무슨 일이 일어 났습니까? 경계 외부에있는 요소의 모든면에 100 픽셀의 공간이 생겼습니다.
그래서 측면을 찾으십시오.
Chrome에서는 주황색으로 식별되므로 파란색은 내용입니다. 녹색은 주황색으로 채우는 것이 여백입니다.
그래서 패딩처럼.
가끔 여백의 한 부분을 한 면만 설정하여 여백 상단이 500 픽셀 인 것처럼 처리 할 수 ​​있습니다.
그리고 나서 그들이 지금이 곳으로 와서 구해 내면 왼쪽의 상단에 공간 만 남습니다.
그리고 그 위에 더 많은 공간이 있습니다.
아래쪽이나 왼쪽 또는 오른쪽에 아무것도 없습니다.
그래서 마진입니다.
그래서 때로는 여백의 모든면에 값을 추가해야하지만 4 가지 다른 선으로 값을 지정하지 않으려합니다.
그래서 우리가 여기에 있다면 정확히 똑같아지기를 원하지는 않지만 마진 여백 위쪽 여백은 여백을 오른쪽으로 말하지 않아도됩니다.
경계와 같은 또 다른 지름길이 있습니다.
또는 우리는 한 번에이 일을 할 수 있습니다. 우리는이 마진을 할 수 있고 네 가지 값을 줄 수 있습니다.
첫 번째는 맨 위, 오른쪽은 맨 아래입니다.
500 픽셀을하고 나서 왼쪽으로하고, 이렇게하면 값이 모두 다른 멋진 4면 여백을 얻을 수 있습니다. 단 한 줄로해야합니다.
그래서 여기를 살펴보고 500 픽셀을 얻었는지 확인해 봅시다. 20 픽셀 위에 왼쪽으로 100 픽셀을 얻은 다음 오른쪽에 40 픽셀을 갖습니다.
따라서 마진을 남기면서 자주 볼 수있는 마지막 것이 하나 있습니다.
자동.
그래서 우리가 할 수있는 일은 왼쪽이나 오른쪽에 자동 여백을 설정하는 것입니다.
그게 실제로 우리를위한 중심 요소입니다.
그래서 어떻게 작동하는지 보여 드리겠습니다.
그리고 이것을 다시 말하면 우리는 여백을 쓸 수 있고, 왼쪽 또는 오른쪽 제로 여백 및 아래쪽의 상단 자동 및 왼쪽의 자동 0 마진을 말할 수 있습니다.
그리고이 전체 크기를 만들고 새로 고침하면 우리에게 필요한 것들을 중심으로 배치됩니다.
이것이 의미하는 것은 50 %라고 결정했음을 의미합니다. 왜냐하면 우리가 여기서 말했기 때문에 왼쪽이 자동이고 오른쪽이 자동이라고 생각하기 때문입니다. 그렇게하기 만하면됩니다.
그리고 나서 우리는 맨 위와 맨 아래에 0을가집니다. 그래서 그들은 함께 scrunched됩니다.
우리가 할 수있는 것은 심지어 이것을하는 더 짧은 방법이 있습니다. 그리고 그것은이 여백 0 Otto처럼 보입니다.
그래서 이것은 자동으로 상하 좌우를 제로로 설정합니다.
그래서 아무 것도 바뀌지 않고 상단과 자동으로 50 픽셀을 추가하거나 50 픽셀과 20 픽셀을 추가하려면이 구문을 사용할 수 있습니다.
기억해야 할 것은 숫자가 0이 아니면 x가 필요하다는 것입니다.
그래서 이렇게하면 왼쪽과 오른쪽 상단에 20을 더한 다음 상단과 하단에 50을 더합니다.
여기에 다시 한 번 더 보겠습니다.
우리는 바로 여기있는 내부 내용을 가지고 있습니다.
우리는 테두리 사이에있는 패딩을 가지고 있으므로 우리가 가지고있는 것은 모두 패딩입니다. 그런 다음 테두리와 다른면 사이에 여백이 있습니다.
기본적으로 요소들 사이.