다시 오신 것을 환영합니다.
To Do 목록 응용 프로그램의 기본 기능을 완성 했으므로 이제는 이렇게 할 수 있습니다.
그래서 우리는 확실히 갈 길이 멀었습니다.
그리고 우리는 한 번에이 한 조각을 공격 할 것입니다.
가장 논리적 인 순서로 시도해 보겠습니다.
배경 색상과 글꼴과 같은 더 큰 조각부터 시작하여 여기에 큰 여백과 패딩이 있는지 확인한 다음 더 많은 뉘앙스를 중점적으로 다룰 것입니다.
이제 시작하겠습니다.
우리가 할 첫 번째 일은 전체 화면을 할 것입니다.
이걸 아래로 밀어서 시작합시다.
이것은 우리 컨테이너 div입니다.
상단에 여백을 추가하여 여기에 더 많은 공간을 확보 할 것입니다.
그래서 우리는 C S S로 돌아가서 지금은 닫거나 자바 스크립트를 닫을 수 있습니다.
우리 div에는 컨테이너에 대한 아이디어가 있습니다. 그리고 우리는 여러분이 이미 해왔 던 것을 여기에서 선택할 것입니다.
그리고 오히려 제로의 여백보다 오히려 그것은 위쪽과 아래쪽에 100 픽셀을줍니다.
그리고 x가 필요하다는 것을 기억하십시오. 우리가 0을 가지면 우리는 X가 필요하지 않지만 숫자가 있다면 우리가합니다.
이제 살펴 보겠습니다.
이제 그들은 같은 장소에서 시작합니다.
그들은 거기에 같은 마진을 가지고 있습니다.
다음으로 할 일은이 컨테이너에 배경색을 추가하는 것입니다.
보 기가 약간 어렵지만 내가 지울 때 지워진 것을 지울 때.
이 색깔이 바로 여기에 있습니다.
그렇게 다시.
그래서 우리는 그것을 추가 할 것입니다.
그래서 컨테이너 대신 배경과 색상을 말하십시오.
7시 7 분 후 7시입니다.
그냥 그렇게.
어떻게 보이는지 확인해 봅시다.
승인.
그래서 우리는 여기에있는 것과 같은 회색을 가지고 있습니다.
그것은 같은 밝은 회색입니다.
우리가 할 다음 것은 국경에서 일하는 것입니다.
그리고 실제로는 국경이 없습니다.
그것이 가지는 것은 아주 작은 상자 그림자입니다.
그래서 우리는 아직 상자 그림자를 보지 못했습니다.
여기서 그걸 증명하고 MT-NW에 들어가서 그림자 효과를 추가하는 방법 일뿐입니다.
그래서 아래로 스크롤하면 여기에 다른 박스 그림자가 있다는 것을 알 수 있습니다. 아주 가벼운 그림자를 보게 될 것입니다. 그러나이 주위를 눈치 챘을 때 아주 작은 그림자가 있습니다.
그래서 우리가 사용할 문법과 그림자는 박스 대쉬 그림자 0 0 3 픽셀이고 그 다음 색상과 우리 색상은 기본적으로 검은 색이 될 것입니다. 그러나 R.G ..입니다.
그리고 나서 우리는 그것을 정말로 정말로 투명하게 만들 것입니다.
그래서 거의 눈에 띄지 않습니다.
그리고 내가 새롭게하면.
경계선이 없지만이 요소 주위에 약간의 그림자가 있습니다.
승인.
이제 컨테이너에 대한 모든 조치가 완료됩니다.
H-1을 공격합시다.
그래서 여기로 향합니다.
그래서 그것은 우리 시대에 나는 단지 H1을 고려했습니다.
신분증이나 아무 것도 없으니 좋습니다.
CSSA 파일로 가서 배경색으로 추가해 봅시다.
그래서 우리는 각각을 선택하고 배경은 2 9 8 0이되는 색이며, 그들은 저장하고 새로 고침 할 것이고 이제 우리는 정확한 색조를가집니다.
그래서 우리는 또한 글꼴 색상을 흰색으로 변경하고이를 빠르게 보여줍니다.
괜찮아.
천천히 여기에 가까이 인치.
우리가 할 다음 일은 여백을주지 않는 것입니다. 그리고 이제 우리는 여기서 우리가 가진이 공간을 제거 할 것입니다.
여기에서 볼 수 있듯이 여백은 없습니다.
이것이 우리 H-1입니다.
여기에 패딩이 있습니다.
따라서 텍스트는 여기 에서처럼 가장자리에서 바로 올라가지 않습니다.
그러나 파란 상자 바깥에는 여백이 없습니다.
이것은 텍스트 입력이며 패딩이 증가했지만 그 둘레에는 여백이 없습니다.
그래서 To Do 목록 주위에 약간의 패딩을 추가하는 것으로 시작하겠습니다.
H-1 그래서 여기서는 위쪽과 아래쪽에 10 픽셀을 추가하고 왼쪽과 오른쪽으로 20 픽셀을 추가하고 저장합니다.
우리가 점점 가까워지고있는 것을 볼 수 있습니다.
글꼴 크기를 변경해야합니다.
글꼴을 변경해야합니다.
우리는 또한 모든 것을 대문자로 바꿀 수 있으며, 지금까지 할 수 있습니다.
내 즐겨 찾기 중 하나가 텍스트 대문자로 변환된다는 것을 알아야합니다.
나는 그것이 아주 멋지다 고 생각한다.
우리는 모두 대문자를 사용합니다. 글꼴 크기는 24 픽셀이어야하고 글꼴 크기는 24x이어야하고 마지막으로 할 일은 일반 글꼴 체중인지 확인하는 것입니다.
따라서 기본적으로 H1은 실제로 굵게 표시되며 원하는 것은 아닙니다.
그래서 우리는 Funt way normal을 할 것이거나 font weight 400을 쓸 수도 있습니다.
우리는 거기에 갈.
이제 당신이 다루고 싶은 다음 글로 돌아갈 폰트를 변경하는 것만으로도이 글 머리 기호를 제거 할 수 있습니다.
우리는 여기에 글 머리 기호가 없는지 알 수 있습니다.
이러한 글 머리 기호는 기본 브라우저 스타일로 간주됩니다.
그래서 우리는 그것을 무시할 것입니다.
우리는 그들이 속해있는 UL을 선택하고 목록 스타일 없음이라고 말할 것입니다.
그리고 우리가 돌아가서 새로 고침하면 우리는 이제 어떤 총알 점도 가지지 않습니다.
제가해야 할 또 하나의 일은 여백을 0으로 설정하고 여백을 0으로 설정하면 여기에 새로 고침이되고 단지 우물의 양쪽 공간을 없애지 않고 영원히 우리가 할 공간이 있습니다. 그러나 UL 자체가 아닌 거짓말입니다.
그래서 우리는 다시 돌아올 것입니다.
이제 올바른 글꼴을 추가해 보겠습니다.이 글꼴의 이름은 rubato이며 Google 글꼴의 일부입니다.
그래서 나는 여기에서 열어서 rubato에 대한 검색을 할 것입니다.
우리가 간다.
컬렉션에 추가 한 다음 사용하십시오.
그리고 우리는 정상적인 길을 원할 것입니다.
우리는 대담하고 또한 중간에 추가 할 것입니다.
이제이 링크를 HMO에 복사하고이 창을 닫을 수 있습니다.
각 팀의 위치와 여기에있는 상단의 붙여 넣기 위치로 돌아가 평가를 확인하고 신체에 스타일을 추가 할 것입니다.
모든 것은이 폰트를 사용하기 때문에 우리는 폰트 패밀리를 로봇 적으로 추가 할 것입니다.
그냥 그렇게.
그리고 우리가 지금 되돌아 가서 새로 고침하면 H-1이 꽤 많이 있습니다.
우리가 모든 글꼴을 만지지 않았던이 버튼을 제외하고는 같은 색으로 모든 것이 좋습니다.
그리고 우리 동맹국들이 거기에 도달하고 있습니다.
그들은 올바른 글꼴을 가지고 있습니다.
간격 및 패딩 문제를 해결해야합니다.
우리가 처리 할 다음 것은 거짓말의 배경색입니다.
그래서 다른 모든 거짓말.
그것은 흰색의 순수한 흰색에서 회색의 색으로 우리가 배경으로 가지고있는 것입니다.
그래서 SS를 사용하여 다른 모든 동맹국에 스타일을 추가 할 수 있습니다.
자 이제하자.
우리가 할 첫 번째 일은 모든 동맹국을 선택하고 그들에게 흰색의 배경을 부여하는 것입니다. 그래서 우리는 F F F 또는 백색 또는 R-GA 255 255에서 55까지 할 수 있습니다. 그러면 우리는 다른 모든 거짓말을 할 것입니다.
그리고 그 구문은 거짓말이며 끝내야 할 아이입니다.
그리고 그것도 서로의 패턴을 잘 정의했습니다.
그리고 우리가 3을한다면 3 분의 1을 말할 것입니다. 그러나 우리는 단지 다른 모든 것을 원합니다.
그리고 배경색을 컨테이너 배경에 사용하고 새로 고친 f7 f7 f7과 동일하게 만듭니다.
이제는 조금 작기 때문에 눈에 띄지 않지만 다른 모든 거짓말은 이제 회색으로 변합니다.
따라서 몇 가지를 더 추가하면 완벽하게 교체되는 것을 볼 수 있습니다.
이제 거짓말의 높이와 패딩에 대한 문제를 해결해 보겠습니다.
가장 먼저 할 일은 40 픽셀의 높이를 부여하여 모든 동맹국의 높이가 40x이므로 우리는 새로 고침을 할 것입니다.
좋아요. 그래서 그들은 적당한 공간을 차지합니다.
이제 글꼴을 비교하면 글꼴에 몇 가지 문제가 있습니다.
또한 패딩을 추가해야합니다.
다음은 텍스트를 세로로 가운데 놓 이도록 거짓의 선 높이 속성을 변경합니다.
지금 라인은 기본적으로이 키가 크다.
우리는 전체 40 픽셀을 사용하여 줄 높이가 40x임을 보여주고 글꼴의 크기를 변경하지 않고 단지 줄의 크기를 변경합니다.
이제 40 픽셀입니다.
그래서 선은이 전체 영역을 차지합니다.
다음 작은 것은 우리가 순수한 검정색을 가지고 있고 내가 사용한 색깔이 정확히 검은 색이 아니라는 것입니다.
약간 가벼워.
그래서 우리는 색상을 설정하고 여섯 6 새로 고침이며 다음 우리는 입력을 해결하자.
그래서 우리는 당신이해야 할 몇 가지 일이 있습니다.
첫 번째는 올바른 공간을 차지하도록합니다.
따라서이 입력 값은 훨씬 더 크며 글꼴 크기가 클수록 여백이나 여백 값만이 아닙니다.
새로운 배경색도 있습니다.
그리고 우리가 클릭 할 때 국경이 있습니다.
이제 그 모든 작업을 해보고 더 큰 글꼴 크기로 추가하는 것으로 시작하겠습니다.
따라서 입력 글꼴 크기를 선택하고 글꼴 크기를 18 픽셀로 설정합니다.
그리고 우리가 여기있는 동안 우리는 배경색뿐만 아니라 배경색도 할 것이고 그것은 같은 f 7 7 1/2 7입니다.
그냥 그렇게.
그리고 새로 고침하자.
승인.
우리가 점점 가까워지고있어.
다음으로 할 일은 너비를 추가하는 것입니다. 우리가 줄 수있는 너비는 100 %입니다.
그래서 지금은 컨테이너를 가로 지르는 길 밖에 없습니다.
우리가 새로 고침하면 이제 모든 것을 가로 질러 간다.
하지만 몇 가지 작은 문제가 있습니다.
우리가 돌보고 싶은 첫 번째 일은 거기에 약간의 패딩입니다.
그래서 오른쪽에있는 13 개의 픽셀에 패딩 13 픽셀을 추가 할 것입니다.
아래쪽에 13 픽셀, 왼쪽에 20 픽셀.
그래서 당신은이 것을 볼 수 있습니다.
우리는 위쪽과 아래쪽이 13입니다.
왼쪽에는 20 픽셀이 있습니다.
그래서 내가 신선했다면 이제는 적절한 양의 공간을 차지하는 더 큰 의견을 갖게됩니다.
우리는 입력이 너무 길다는 문제가 있습니다.
우리가 100 %가되어야한다고 말했을 때 실제로 그 내용은 단지 내용이었고 패딩을 포함하지 않았고 마진을 포함하지 않았습니다. 이는 입력이 div의 끝을 지나서 오래 걸리는 것을 의미합니다. 패딩과.
상자 크기 변경이라는 속성 인 다른 방법을 변경하는 것을 의미합니다.
따라서 블록 크기를 조정할 때 몇 가지 옵션이 있지만 기본적으로 상자의 상자 크기를 제어합니다.
그리고 우리는 Dasch box 국경으로 바꿀 것입니다.
그리고이 글에서 읽어야 할 것은 너비와 높이 프로퍼티가 패딩과 테두리를 포함하지만 마진은 포함하지 않는다는 것입니다.
그래서 우리가 경계 상자로 바꾼다면 여기로 들어가서 상자 크기 조정 순서 상자를 추가하고 계속하기 전에 저장하십시오.
나는 이것이 우리가 접두사를 갖고 싶어하는 속성 중 하나임을 지적 할 것이다.
그래서 Web Kit와 Mozy는 Moz와 Microsoft의 혼란입니다.
나는 지금 그렇게하지 않을 것이다.
솔루션 코드에 표시됩니다.
그러나 입력하는 데 오랜 시간이 걸립니다.
그래서 적어도 Chrome에서 어떻게 작동하는지 바로 알 수 있습니다.
우리 상자는 테두리에 패딩을 포함하지만 여백은 포함되지 않습니다.
그래서 우리는 완벽한 적합성으로 끝납니다.
다음에는 입력 할 때 글꼴 색을 지정하겠습니다.
그래서 우리 모두가해야 할 일입니다.
저는 H-1에서 같은 색을 가져 와서 우리 입력으로 내려 가서 그냥 색이라고 말하겠습니다.
그리고 우리가 지금 새로 고침하면 우리는 타이핑을 시작합니다. 우리가 간다.
이제 그 효과에 초점을 맞추자.
입력에서 초점을 맞추는 것을 클릭하면 여기에서 볼 수 있습니다.
그래서 우리는 그것에 대해 연구해야합니다.
지금은 기본 포커스 효과가 있습니다.
따라서 입력 콜론 포커스를위한 선택기는 마우스를 가져 가면 의사 선택기와 같습니다.
이 셀은 입력에 집중했을 때만 실행됩니다.
그래서 나는 우리가 그것에 집중할 때 배경을 희게 만들 예정입니다.
나는 또한 3 픽셀의 경계선을 채울 것입니다. 우리가 작업 해 왔던 푸른 색과 윤곽선이 아닌 윤곽선을 제공 할 것입니다. 브라우저 자체에서 얻는이 성가신 강조점을 참조하십시오.
이제 우리가 입력에 집중하면이 새 파란색 테두리가 생기고 배경색도 회색으로 변경되어 흰색입니다.
따라서 우리가 여기에있는 자리 표시 자 텍스트를 추가해야하지만 입력을 위해해야 ​​할 일만 남았습니다.
그래서 색인 HTL로 가서 입력 옆에 또는 자리 표시 자 속성을 추가 할 것입니다.
그리고 이것은 당신이 원하는대로 될 수 있습니다.
나는 그걸 일치시킬거야.
따라서 새로 추가하고 새로 고치는 것입니다.
우리는 거기에 갈.