[#6] CSS Einführung: Kontakt Formular stylen

soooo를 전체 이론을 중지하십시오! 오늘은 CSS를 사용하여 문의 양식을 작성합니다

나는 그것을 위해 부트 스트랩을 사용할 것이다 그것이 당신을 괴롭히지 않는다면, 해당 비디오를보십시오 이 시점에서, 우리는 지난 번에 멈췄다 먼저 Bootstrap CSS 파일을 작성합니다 나는 제목 꼬리표 밑에서 그렇게한다

"머리"에 우리는 그것을 볼 수 있습니다 아직 부트 스트랩 특정 클래스에 액세스하지는 않았지만 그럼에도 불구하고 디자인은 어쨌든 바뀝니다 그 때문이야 부트 스트랩은 <html> 및 <body> 스타일과 같은 일반 태그입니다

내 자신의 CSS 파일을 만들 수도 있습니다 나는 그것을 "stylecss"라고 부른다 여기에 우리 자신의 디자인을 만들 것입니다 나는 그것을 통합 할 수있다

같은 구문 "stylecss"만 부트 스트랩 특정 클래스를 통합하여 시작합니다 양식을 최대한 동적으로 유지하는 데 도움이됩니다 나는 그것을 잠시 동안 할 것이고, 내가 왜 나중에 설명하는지 설명 할 것이다 해냈다

그것이 내가 그것을 보는 방법입니다 좋아 보인다 페이지의 줄 바꿈도 작동하는지 테스트 해 보겠습니다 여기부터입니다 너무 좁다

더 이상 서로 옆에 맞지 않으며 서로 부러집니다 이것이 바로이 부트 스트랩 특정 클래스를 포함시킨 이유입니다 정확히 그게 뭐야? 일단 컨테이너 클래스 전체 내용 그러나 그것은 역 동성과는 아무런 관련이 없습니다 중요한 것은 각각의 중첩 된 "열"클래스가있는 "행"클래스입니다

기억하십시오 : 너비의 최대 12 배 1 여기에 나는 여섯 번을 두 번이나 먹는다 따라서 주소 데이터와 양식 데이터가 나란히 표시됩니다 전체 너비를 사용하십시오 각 경우에 사용할 수 있습니다

조금 더 큰 개별 입력 필드는 7, 7 및 더 큰 메시지 : 11 여기서 7, 7, 11을 볼 수 있습니다 그리고 입력 필드를 모양대로 보이게하려면 나는 "form-control"클래스를 사용했다 부트 스트랩 부분까지 내 style

css을 지금 수정하고 싶습니다 추가 변경 먼저, 컨테이너를 편집하고 싶습니다 이를 위해 저는 "큰"클래스를 만듭니다 내부 거리에 대한 값을 제공합니다

이것은 "패딩"으로 가능합니다 100px 위 아래로 나는이 "큰"클래스를 지적한다 컨테이너 클래스에 추가됩니다 결과적으로 텍스트는 이제 100 픽셀 아래로 슬라이드됩니다

"패딩 바닥"은 볼 수 없지만 여기에도 있습니다 100 픽셀 추가되었습니다 다음으로, 나는 전체 "섹션"을 여기에 벽지로 원한다 실수 그래서 모든 것이 너무 흐린 흰색으로 보이지 않습니다 이를 위해 나는 새로운 클래스를 정의한다

나는 그 "접촉"이라고 부른다 나중에 배경 이미지가 상대적으로 어두워 야합니다 그래서 나는 글꼴 색상 흰색 당신이 그것을 잘 읽을 수 있도록 그건 그렇고, 이것은 서면의 속기 방법입니다 그래서 나는 또한 여섯 번 "f" 나는 또한 "흰색"이라고 쓸 수 있습니다

모든 것이 동일합니다 아웃 이미지가 상대적으로 위치해야합니다

"배경"명령으로 선택됩니다 여기에서는 "img"폴더의 그림을 참조합니다 "Kontaktjpg" 중간에 고정해야합니다

여기서 "고정"은 브라우저 창을 기반으로합니다 "background-size : cover"를 사용하면 이미지의 크기가 자동으로 조정됩니다 브라우저 창이 크기가 조정됩니다 "연락처"클래스를 "섹션"에 지정합니다 그리고 한번 살펴 봅시다

아름다운 🙂 그런데 배경 이미지는 웹 사이트에서 라이센스가없는 이미지입니다 "Thestocksim" 다음 나는하고 싶다 이 제목 섹션을 여기에서 편집하십시오

그게이 작품이야 그 안에 <h2> 제목이 있습니다 및 단락 그래서 저는이 수업을 "제목"이라고 부릅니다 먼저 "title"클래스에서 제목을 정의하십시오

첫 번째는 조금 커야합니다 28px, 상대적인 위치, 그리고 이번에는 "마진 (margin)"과 함께 마진을 용서합니다 15 픽셀 아래로 뿐만 아니라 내부의 거리 예를 들어, "텍스트 변환"으로 설정할 수 있습니다 광고 제목은 대문자로 표시되어야합니다

"소문자"는 모든 것을 소문자로 변환합니다 이제 자라났습니다 다음은 문단입니다 그래서 "title p"

여기서 글꼴 크기를 조정합니다 폰트의 가중치, 즉 폰트의 넓이를 표시합니다 Sooo 조금 더 커 완벽한 다음은 주소 데이터와 입력 필드입니다

나는 클래스 "input"이라고 부른다 "정렬되지 않은 목록"으로 시작하십시오 모든 것이 나중에 여기에 추가 될 것입니다 및 "정렬되지 않은 목록" 중첩되어 있습니다 여기서 다시 외부 거리 20 픽셀 및 목록 항목 나는 또한 무언가를 끌어 내려야한다

또한 "마진"값에 대한 약자 표기법이 있습니다 이것은 다음과 같이 할 수 있습니다 : 즉, 위 아래로 15 픽셀을 의미합니다 왼쪽 및 오른쪽으로 0 픽셀 나는 또한 글꼴 크기를 조정하고 같은 "무게" 그것은 일관성이 있습니다 지금은 15 픽셀 사이입니다

그리고 나를 괴롭히는 것은 다른 모든 것은 흰색 인 반면 링크는 파란색으로 바뀝니다 그래서 "input li a" "color : white" 하나는 논리적으로 글꼴을 사용합니다 레이블을 사용자 정의하십시오

라벨이 정렬됩니다 "행"클래스 (행 입력)의 "양식"아래에 있습니다 그래서 나는 다음과 같이 쓸 수있다 "입력 양식 레이블" 다른 글꼴을 용서하십시오 크기 14 픽셀 같은 "font-weight"를 다시 가져옵니다

그것은 단지 작은 변화를 일으킬 것입니다 조금 더 얇아졌습니다 "데이터 입력"텍스트를 아직 읽을 수 없습니다 그래서 나는해야한다 또한 흰색의 색상

데이터 입력은 "전설" 그래서 나는 말할 필요가있다 "양식 전설"input 전설 양식 색상 : 흰색

가장자리에있는 정보 : 나는 어디서나 "리"또는 그냥 "ul"또는 "p" 그러나 귀하의 웹 사이트가 나중에 만료되지 않을 가능성이 매우 높습니다 이 문의 양식 이다 그러나 그들은 또한 다른 단락과 다른 표제를 가지고있다 정의했다 그리고이 글을 쓸 때,이 정의는 "

title"클래스에만 적용됩니다 나중에 다른 클래스와 헤드 라인 "h2"를 정의 할 수 있습니다 매우 다른 것처럼 보입니다 다음 이 "form-control"클래스를 약간 편집하고 싶습니다 나는 그것을 전혀 좋아하지 않는다

그래서 내가 "양식 제어"클래스 과 나는 흰 글꼴 색이 필요합니다 우리는 이유를 알게 될 것이다 나는이 "상자 그림자"를 제거하고 싶다 그건 그렇고 여기가 바로 이것입니다 이 파란색 프레임

그건 전혀 맞지 않아 나는 원한다 흰 테두리 다른 종류의 "배경"명령으로 작업합니다 즉 "rgba"와 함께 나는 그 위에 검은 배경을두고 싶다

검정색은 RGB의 0,0,0입니다 이 "a" 알파 값을 나타냅니다 그래서 배경이 얼마나 강한 지 보여줍니다 나는 20 %를 말한다 그는 80 % 투명합니다

그리고 다음과 같은 일이 발생합니다 여기서 검은 색의 매우 강한 투명한 배경을 봅니다 이제 글꼴 색이 선명합니다 나는 흰 글자를 써야한다 그렇지 않으면 나는 아무것도 보지 못한다

이 입력란을 클릭하면 해당 입력란에 있음을 알 수 있습니다 들판에 도착했다 나는 지금 어떤 의견도 내지 않는다 작은 흰색 커서는 약간보기가 어렵습니다 우리는 이미 "hover"selector를 알고 있습니다

그러나 또 다른 것이 있습니다 즉 "초점" 그리고 여기에서는 값만 변경합니다 투명성 20 ~ 60 %

그는 훨씬 덜 투명하다 여기를 클릭하면 너 내가 지금 어디에 있는지 분명히 알 수있어 경우에 따라, 나는 또한 이름 필드 수 있습니다 "자동 초점"을하십시오 그리고 여기

지금 페이지를 새로 고침하면이 필드에 커서가 자동으로 표시됩니다 이 별표는 여기에 있습니다 예를 들어 빨간색으로 색칠 할 수 있습니다 그것을 위해 <span> 클래스를 용서합니다 "빨강"이라고 부르세요

그래서 "붉은 색"을 위해 나는 특정한 색깔을 용서한다, 나는 가지고있는 소리 이미 선택되었습니다 그러면 당신은 그것들을 더 잘 볼 수 있습니다 어떤 경우에는 단추가 누락되었습니다 아직 할 수 없어 인식하고 있습니다

따라서 "btn"클래스는 버튼을 정의합니다 그리고 무엇보다도 약간 큰 글꼴 크기 : 14 픽셀 with "cursor : pointer"나는 커서를 얻는다 클릭 손과 닮았다 "font-weight"는 약간 더 커질 수 있습니다 거리 10 픽셀 밖 위쪽으로

짧은 맞춤법을 다시 채우기 : 5 픽셀 위아래로 좌우로 15 픽셀 과 또한 흰색으로 장식해야합니다 "양식 제어" 여기서 저는 알파 값으로 다시 작업합니다 20 %를 다시 선택합니다 여전히 Button 클래스를 할당해야합니다

버튼이 있습니다 그리고 우리는 그 결과를 살펴볼 것입니다 예, 이제 버튼처럼 보입니다 '마우스 오버'효과 만 아직 실종 상태입니다 이제는 더 이상 읽을 수 없기 때문입니다

그러나 그것은 더 이상 로켓 사업이 아닙니다 "btn : 가져가" 여기 또 다른 투명성 가치를 생각해 봅시다, 60 % 우리는 색깔이 빠져있는 것을 보았습니다 흰색을 가져 가자 모든 것이 꽤 좋아 보입니다

나를 괴롭히는 것은, 당신은 여전히이 흰색을 매우 심하게 읽을 수 있습니다 너를 지금 원해 셀렉터 "호버"와 "포커스"두 가지가 추가로 표시됩니다 즉 "전에"와 "후에" 당신이이 벽지에 너무 강하지 않도록 집중된 그런 그레이닝 효과를 사용하고 싶습니다

나는 너에게 그림을 보여줄 것이다 나는 그것을 "img"폴더에 압축했다 이것을 "곡물"이라고합니다 나는 당신이 그것을 지금도 볼 수 있기를 바랍니다 그것은 매우 작습니다

나는 그것을 확대 할 것이다 네, 어쩌면 당신은 그것을 인식 할 수 있습니다 왼쪽 상단에 검은 색 픽셀이 있습니다 3 개의 백인으로 둘러싸인 나는이 사진을 찍을 것이다 이 그릿 이미지를 이제 전체 배경 이미지에 걸쳐 배포하고 x 축과 y 축의 거울

이렇게하면 두 번째 픽셀이 모두 검은 색이됩니다 어떻게 끝내야하는지 보여 드리겠습니다 이를 위해 "연락처"클래스를 약간 변경합니다 우리의 배경 그림이 포함되어 있습니다 이제 "이전"선택기를 사용하고 있습니다

이 곡식 효과는 그것입니다 나는 상대적으로 그러나 절대적으로 그 위치를 정하지 않는다 그래서 나는 그렇게 말한다 나는이 곡물을 왼쪽 상단 구석에서 시작하고 싶다 전체 너비와 전체 높이를 악용하려고합니다

이번에는 절대 위치 지정 나는 텍스트의 형태로 문자열의 형태로 내용을 원하지 않는다 오직 그림 만 가져와 물론 그것을 지정해야합니다 다시 "background : url ()"명령을 통해

'이미지'가 호출되었습니다 "Koernungpng" 이제는 "반복"이라고 말해야합니다 그런 다음 x 축과 y 축에 자동으로 미러링됩니다 그리고 한번 살펴 봅시다

인식하기는 어렵지만 효과는 매우 가벼워 야합니다 하지만 지금 우리가 알아 차리는 것은 텍스트는 이제 배경으로 떨어졌습니다 그는 곡물과 겹쳐져있다 그리고 물론 위대하지 않습니다 그래서 지금 우리가 그것을 전면에 가져와야하는 이유입니다

하지만 우리가하기 전에 나는 아직도 그것을 넣는다 그것의 "후"명령 사진이 너무 밝습니다 그렇기 때문에 흰색 텍스트를 그렇게 심하게 읽을 수 있습니다 여기서 나는 처음으로 같은 일을한다

왼쪽 상단에서 다시 시작합니다 전체 너비 및 전체 높이 아무것도 삽입하지 않음 ( ""), 절대 위치 이제 "배경"명령으로 작업하고 다시 손쉽게 넣을 수 있습니다 투명 검정색 50 % 가시, 50 % 투명

이제 모든 것이 훨씬 더 어둡게되었습니다 그리고 나는 이것을 더 잘 알 것이다 내가 배경으로 말했듯이 이제는 하나입니다 CSS 명령 즉, "z- 색인" 내가 "1"을 용서한다면 텍스트가 자동으로 사라진다

첫 번째 (제일) 수준으로 웹 사이트를 여러 단계 또는 계층으로 상상해보십시오 "position : relative", 왜냐하면 제목은 컨테이너를 기준으로 동작해야하기 때문입니다 어쩌면 전체가 조금 더 중심에 위치 할 수도 있습니다 순간에 그것은 서있다 매우 왼쪽 또 다른 외부 정리

60 픽셀을 다시 내립니다 높이를 조금 늘리십시오 그래서 지금은 최전방에서 배경이 조금 더 어둡기 때문에 명확하게 볼 수 있습니다 우리는 중간에 중심을 두었습니다

이제 주소 데이터와 입력 필드를 동일하게 처리해야합니다 여기서 입력 필드부터 시작합니다 먼저 "z- 색인"을 맨 위에 놓으면 다시 볼 수 있습니다 그리고 우리는 상대적으로 자신을 다시 자리 매김해야합니다 그래서 그것은 또한 앞으로 나아갔습니다

완벽한 그리고 저를 괴롭히는 마지막 것 이 총알은 여기에 있습니다 나는 그것을 갖고 싶지 않습니다 나는 그것을 더 의미있는 그림으로 대체한다 그리고 아마도 당신은 아직도 기억하고 있습니다

부트 스트랩쪽에 있다고 이른바 "glyphicons"가 주었다 그리고 저는 그것을 지금 정의합니다 이것은 HTML에 직접 있습니다 그리고 나는 그것을 놓을 것이다 여기에 전에 "<span>"클래스를 사용합니다

"glyphicon"과 각 클래스 나는 이미 알아 냈다 "Glyphicon 도로" 그래서 지금은 복사합니다 전화의 경우, 전자 메일 및 링크 이제는 각 클래스 만 변경합니다 "이어폰"은 전화 아이콘을 제공합니다

"봉투"봉투 전자 우편으로 및 "지구본" 글로브 아이콘을 제공합니다 어떻게 보이는지보세요 여기 사진이 있습니다 그러나 교란 여전히 "정렬되지 않은 목록"의이 "지점"입니다

그리고 부트 스트랩 클래스가 있습니다 이 목록 항목이 사라집니다 그리고 그 클래스는 호출됩니다 "목록-스타일이 적용되지 않은" 완벽한

결과에 매우 만족합니다 이제 여기에 바닥 글을 설치할 수 있습니다 그 위에 탐색 용 헤더가 있습니다 그러나 지금은 충분해야하는 연락 양식을 위해 이 비디오는 CSS로 할 수있는 것에 대한 통찰력을 제공했습니다

부트 스트랩 개념에 참여하십시오 알다시피, 그것은 매우 논리적이고 어렵지 않습니다 이제는 처음에 보인다 직접 웹 사이트를 쓰고 싶지 않은 경우 기성 템플릿에 의존합니다 그는 여러 곳에서 그것을 발견합니다

네트워크 예를 들어,이 문의 양식은 수정 된 것일뿐입니다 버전 "통합"템플릿 주제에 대한 링크는 비디오 설명에서 찾을 수 있습니다 다음 비디오에서는 연락처 양식으로 숨을 쉬게됩니다

이를 위해 우리는 데이터베이스와 스크립팅 언어 PHP가 필요합니다 다음에 보자