의미 HTML-CSS 양식
의미 HTML-CSS 양식
우리는 간단한'사용자 등록표'를 만들 것입니다. 의미와 (올바른 방식으로 "적절한"표시를 사용) 표시와 기본적인 접근 가능성을 가지고 있습니다.♿ 직접 익히다.
입문
첫 번째 환매
나는 나의 'Front End Starter' repo.를 사용할 것이다. 이것은 내가 쓴 게시물이다.
HTML-CSS-JS Starter Repo
마나프 미스라・ 20년10월31일・ 1분 읽기
#beginners
#html
#css
#javascript
이 글의 나머지 부분에서, 나는 네가 이것이나 유사한 것을 사용하고 있다고 가정한다.
글꼴/제목
색인에 표시된 대로TODO."우리는 몇 가지 유형을 추가해야 한다Google Fonts
하나link부터 하나의 특수한 CSS까지💄 구글에서 온 파일은 우리의 것이다<head>.또한 제공된 font-family 규칙을 body CSS 선택기에 추가해야 합니다.
우리는 또 교체해야 한다<title>.검색 엔진 최적화(SEO)의 목적(이것은 중요하지 않습니다 - 참고용), 우리는 <title> 을 우리의 <h1> 와 일치시키려고 시도해야 합니다.
<title>User Registration</title>
</head>
<body>
<h1>User Registration</h1>
HTML
하이퍼텍스트 태그 언어에는 페이지의 내용을 설명하는 중요한 작업이 있습니다.📃. HTML당💬 라벨은 더 많은 것이 아니라 이 목적을 달성해야 한다!
에미트.io
만약에 VS 코드를 사용한다면 (그리고 이렇게 해야 할 수도 있습니다. 웹 개발의 업계 표준 텍스트 편집기와 너무 가깝습니다!)내장 에서 Emmet 이라는 컨텐츠에 액세스할 수 있습니다.이것은 우리에게 대량의 HTML 코드 입력을 절약할 수 있는 편리한 도구이다.
사례 및 요점, 입력: form>(div>label+input)*5+button<h1> 탭에서 완료 후 TAB와 RETURN을 누릅니다.
만약 이것이 작용하지 않는다면, 너는 어쩔 수 없이 클릭해야 할 것이다⬇️ 먼저 Emmet 약어의 완성 형식을 선택합니다.
<양식>
시작action에서 삭제<form 속성 - 우리는 그 spit가 필요 없어!for의 모든 label 속성은 id의 일치input 속성과 상대해야 한다.
각 placeholder 속성을 추가하여 용도를 나타냅니다.input 액세스용♿ 목적CSS를 사용하여 숨깁니다.label이런 패턴을 따르다👆🏽, "이름"외에 우리의 폼을 설정할 수 있습니다: <label for="name">Name:</label><input type="text" placeholder="Name" id="name" required/>, ✉️, ☎️ 및username.
네가 이렇게 할 때, 각각password에 required을 더해라.이것은 브라우저가 사용자가 제출하기 전에 필드가 작성되었는지 확인하도록 우리의 생활을 간소화할 것이다.주의,'진짜'응용 프로그램에 있어서, 이 자체는 통상적으로 부족하다.백업으로 추가 클라이언트 및/또는 서버 측 JS 필요
... 에 대하여✉️ 및 input 의 password 속성을 type 에서 input 및 "text" 로 각각 변경해야 합니다.
... 에 대하여☎️, "email": "password": typetel - "즉시 등록!"과 같은 텍스트만 입력하면 됩니다.<label for="fone">Phone</label><input type="tel" placeholder="Phone" id="fone" required/>검사하다✅ 얘 어때요?👀 브라우저에서
당신의 대합실로 돌아가서 하세요: button.이것은 시작됩니다 <button>Register Now!</button> - "hot"이 있는 로컬 웹 서버🔥 다시 로드하는 중입니다."
안 닮았어.👀 gr8 - 이것이 바로 우리가 필요로 하는 CSS💄.
CSS
우리는 시뮬레이션 이동 화면에서 개발 도구를 사용하여 그것을 열 수도 있다.적어도 Chrome에서 이것은 Mac에서 완성한 것이다. "COMMAN + OPTION + I"그리고 "COMMAND + Shift + M"이다.거기서 하나만 선택하면📱 사이즈-원하는 거 다 돼요.
npm start 선택기에 추가: browser-sync 기본 글꼴 크기를 만듭니다.이것은 앞으로 font-size: 10px 및 body 에서 우리의 관련 CSS 단원으로 이전될 것이다.
꼬리표를 떼다
label {
left: -9999px;
position: absolute;
top: -9999px;
}
margin은(는) 정상적인 위치에서 제거되며 화면에서 멀리 떨어진 곳으로 이동할 수 있습니다.
마음을 가라앉히다
이 가능하다, ~할 수 있다,...🤔 우리는 하나padding를 position: absolute 아래로 던져 완성할 수 있다.비록 이것은 이곳에서 가능하지만, 우리는 더 좋은 습관을 배우려고 노력하고 있으며, 이러한 습관은 더욱 큰 프로젝트로 이어질 것이다.label 정렬에 적용...텍스트😼. 우리는 text-align: center 정렬 요소를 사용할 것이다👈🏽 근거body.
한번 보다👀 브라우저에서 text-align 및 display: flex 이 "병렬"으로 표시됩니다.
기본적으로 적용 body 은 요소의 모든 직접 하위 요소를 한 줄로 배열합니다.그러나 이런'부자'유연한 관계를 만들면 우리가 원하는 것을 쉽게 조정할 수 있다.h1 아래에 놓으세요.지금 상황이 호전되고 있다👀 비교적 좋았어
현재 form 아래에 있습니다.
이제 우리는 display: flex 중의 flex-direction: column 을 가운데에 놓을 것이다.
form {
align-items: center;
display: flex;
flex-direction: column;
}
♻️
실제로 특정 규칙이 중복되지 않도록 결합합니다.
body,
form {
align-items: center;
display: flex;
flex-direction: column;
}
간격
button,
input {
/* top/bottom left/right */
margin: 4px 0;
}
몸통
button {
background-color: #48c774;
border-color: transparent;
border-radius: 4px;
color: white;
padding: 0.5rem;
}
align-items: center; 이런 추악한 위약 행위에서 벗어나기 위해서다.
나는 네가 이런 다른 가치관을 수정하도록 격려한다👆🏽 너는 곧 그들이 무엇을 하고 있는지 볼 수 있을 것이다.
물론 아직 해야 할 일이 많지만, 표로 말하자면, 현재의 양식은 이미 충분하다.
Reference
이 문제에 관하여(의미 HTML-CSS 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/codefinity/semantic-html-css-form-5cgj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
첫 번째 환매
나는 나의 'Front End Starter' repo.를 사용할 것이다. 이것은 내가 쓴 게시물이다.
HTML-CSS-JS Starter Repo
마나프 미스라・ 20년10월31일・ 1분 읽기
#beginners
#html
#css
#javascript
이 글의 나머지 부분에서, 나는 네가 이것이나 유사한 것을 사용하고 있다고 가정한다.
글꼴/제목
색인에 표시된 대로
TODO."우리는 몇 가지 유형을 추가해야 한다Google Fonts하나
link부터 하나의 특수한 CSS까지💄 구글에서 온 파일은 우리의 것이다<head>.또한 제공된 font-family 규칙을 body CSS 선택기에 추가해야 합니다. 우리는 또 교체해야 한다
<title>.검색 엔진 최적화(SEO)의 목적(이것은 중요하지 않습니다 - 참고용), 우리는 <title> 을 우리의 <h1> 와 일치시키려고 시도해야 합니다.<title>User Registration</title>
</head>
<body>
<h1>User Registration</h1>
HTML
하이퍼텍스트 태그 언어에는 페이지의 내용을 설명하는 중요한 작업이 있습니다.📃. HTML당💬 라벨은 더 많은 것이 아니라 이 목적을 달성해야 한다!
에미트.io
만약에 VS 코드를 사용한다면 (그리고 이렇게 해야 할 수도 있습니다. 웹 개발의 업계 표준 텍스트 편집기와 너무 가깝습니다!)내장 에서 Emmet 이라는 컨텐츠에 액세스할 수 있습니다.이것은 우리에게 대량의 HTML 코드 입력을 절약할 수 있는 편리한 도구이다.
사례 및 요점, 입력: form>(div>label+input)*5+button<h1> 탭에서 완료 후 TAB와 RETURN을 누릅니다.
만약 이것이 작용하지 않는다면, 너는 어쩔 수 없이 클릭해야 할 것이다⬇️ 먼저 Emmet 약어의 완성 형식을 선택합니다.
<양식>
시작action에서 삭제<form 속성 - 우리는 그 spit가 필요 없어!for의 모든 label 속성은 id의 일치input 속성과 상대해야 한다.
각 placeholder 속성을 추가하여 용도를 나타냅니다.input 액세스용♿ 목적CSS를 사용하여 숨깁니다.label이런 패턴을 따르다👆🏽, "이름"외에 우리의 폼을 설정할 수 있습니다: <label for="name">Name:</label><input type="text" placeholder="Name" id="name" required/>, ✉️, ☎️ 및username.
네가 이렇게 할 때, 각각password에 required을 더해라.이것은 브라우저가 사용자가 제출하기 전에 필드가 작성되었는지 확인하도록 우리의 생활을 간소화할 것이다.주의,'진짜'응용 프로그램에 있어서, 이 자체는 통상적으로 부족하다.백업으로 추가 클라이언트 및/또는 서버 측 JS 필요
... 에 대하여✉️ 및 input 의 password 속성을 type 에서 input 및 "text" 로 각각 변경해야 합니다.
... 에 대하여☎️, "email": "password": typetel - "즉시 등록!"과 같은 텍스트만 입력하면 됩니다.<label for="fone">Phone</label><input type="tel" placeholder="Phone" id="fone" required/>검사하다✅ 얘 어때요?👀 브라우저에서
당신의 대합실로 돌아가서 하세요: button.이것은 시작됩니다 <button>Register Now!</button> - "hot"이 있는 로컬 웹 서버🔥 다시 로드하는 중입니다."
안 닮았어.👀 gr8 - 이것이 바로 우리가 필요로 하는 CSS💄.
CSS
우리는 시뮬레이션 이동 화면에서 개발 도구를 사용하여 그것을 열 수도 있다.적어도 Chrome에서 이것은 Mac에서 완성한 것이다. "COMMAN + OPTION + I"그리고 "COMMAND + Shift + M"이다.거기서 하나만 선택하면📱 사이즈-원하는 거 다 돼요.
npm start 선택기에 추가: browser-sync 기본 글꼴 크기를 만듭니다.이것은 앞으로 font-size: 10px 및 body 에서 우리의 관련 CSS 단원으로 이전될 것이다.
꼬리표를 떼다
label {
left: -9999px;
position: absolute;
top: -9999px;
}
margin은(는) 정상적인 위치에서 제거되며 화면에서 멀리 떨어진 곳으로 이동할 수 있습니다.
마음을 가라앉히다
이 가능하다, ~할 수 있다,...🤔 우리는 하나padding를 position: absolute 아래로 던져 완성할 수 있다.비록 이것은 이곳에서 가능하지만, 우리는 더 좋은 습관을 배우려고 노력하고 있으며, 이러한 습관은 더욱 큰 프로젝트로 이어질 것이다.label 정렬에 적용...텍스트😼. 우리는 text-align: center 정렬 요소를 사용할 것이다👈🏽 근거body.
한번 보다👀 브라우저에서 text-align 및 display: flex 이 "병렬"으로 표시됩니다.
기본적으로 적용 body 은 요소의 모든 직접 하위 요소를 한 줄로 배열합니다.그러나 이런'부자'유연한 관계를 만들면 우리가 원하는 것을 쉽게 조정할 수 있다.h1 아래에 놓으세요.지금 상황이 호전되고 있다👀 비교적 좋았어
현재 form 아래에 있습니다.
이제 우리는 display: flex 중의 flex-direction: column 을 가운데에 놓을 것이다.
form {
align-items: center;
display: flex;
flex-direction: column;
}
♻️
실제로 특정 규칙이 중복되지 않도록 결합합니다.
body,
form {
align-items: center;
display: flex;
flex-direction: column;
}
간격
button,
input {
/* top/bottom left/right */
margin: 4px 0;
}
몸통
button {
background-color: #48c774;
border-color: transparent;
border-radius: 4px;
color: white;
padding: 0.5rem;
}
align-items: center; 이런 추악한 위약 행위에서 벗어나기 위해서다.
나는 네가 이런 다른 가치관을 수정하도록 격려한다👆🏽 너는 곧 그들이 무엇을 하고 있는지 볼 수 있을 것이다.
물론 아직 해야 할 일이 많지만, 표로 말하자면, 현재의 양식은 이미 충분하다.
Reference
이 문제에 관하여(의미 HTML-CSS 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/codefinity/semantic-html-css-form-5cgj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
당신의 대합실로 돌아가서 하세요:
button.이것은 시작됩니다 <button>Register Now!</button> - "hot"이 있는 로컬 웹 서버🔥 다시 로드하는 중입니다."안 닮았어.👀 gr8 - 이것이 바로 우리가 필요로 하는 CSS💄.
CSS
우리는 시뮬레이션 이동 화면에서 개발 도구를 사용하여 그것을 열 수도 있다.적어도 Chrome에서 이것은 Mac에서 완성한 것이다. "COMMAN + OPTION + I"그리고 "COMMAND + Shift + M"이다.거기서 하나만 선택하면📱 사이즈-원하는 거 다 돼요.
npm start 선택기에 추가: browser-sync 기본 글꼴 크기를 만듭니다.이것은 앞으로 font-size: 10px 및 body 에서 우리의 관련 CSS 단원으로 이전될 것이다.
꼬리표를 떼다
label {
left: -9999px;
position: absolute;
top: -9999px;
}
margin은(는) 정상적인 위치에서 제거되며 화면에서 멀리 떨어진 곳으로 이동할 수 있습니다.
마음을 가라앉히다
이 가능하다, ~할 수 있다,...🤔 우리는 하나padding를 position: absolute 아래로 던져 완성할 수 있다.비록 이것은 이곳에서 가능하지만, 우리는 더 좋은 습관을 배우려고 노력하고 있으며, 이러한 습관은 더욱 큰 프로젝트로 이어질 것이다.label 정렬에 적용...텍스트😼. 우리는 text-align: center 정렬 요소를 사용할 것이다👈🏽 근거body.
한번 보다👀 브라우저에서 text-align 및 display: flex 이 "병렬"으로 표시됩니다.
기본적으로 적용 body 은 요소의 모든 직접 하위 요소를 한 줄로 배열합니다.그러나 이런'부자'유연한 관계를 만들면 우리가 원하는 것을 쉽게 조정할 수 있다.h1 아래에 놓으세요.지금 상황이 호전되고 있다👀 비교적 좋았어
현재 form 아래에 있습니다.
이제 우리는 display: flex 중의 flex-direction: column 을 가운데에 놓을 것이다.
form {
align-items: center;
display: flex;
flex-direction: column;
}
♻️
실제로 특정 규칙이 중복되지 않도록 결합합니다.
body,
form {
align-items: center;
display: flex;
flex-direction: column;
}
간격
button,
input {
/* top/bottom left/right */
margin: 4px 0;
}
몸통
button {
background-color: #48c774;
border-color: transparent;
border-radius: 4px;
color: white;
padding: 0.5rem;
}
align-items: center; 이런 추악한 위약 행위에서 벗어나기 위해서다.
나는 네가 이런 다른 가치관을 수정하도록 격려한다👆🏽 너는 곧 그들이 무엇을 하고 있는지 볼 수 있을 것이다.
물론 아직 해야 할 일이 많지만, 표로 말하자면, 현재의 양식은 이미 충분하다.
Reference
이 문제에 관하여(의미 HTML-CSS 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/codefinity/semantic-html-css-form-5cgj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
label {
left: -9999px;
position: absolute;
top: -9999px;
}
form {
align-items: center;
display: flex;
flex-direction: column;
}
body,
form {
align-items: center;
display: flex;
flex-direction: column;
}
button,
input {
/* top/bottom left/right */
margin: 4px 0;
}
button {
background-color: #48c774;
border-color: transparent;
border-radius: 4px;
color: white;
padding: 0.5rem;
}
Reference
이 문제에 관하여(의미 HTML-CSS 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codefinity/semantic-html-css-form-5cgj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
