해당 노트는 FreeCodeCamp에서 진행하는 Responsive Web Design Project 2를 복습하기 위해 작성했습니다.
HTML
<body> <div class="container"> <header class="header"> <h1 id="title" class="text-center">freeCodeCamp Survey Form</h1> <p id="description" class="description text-center"> Thank you for taking the time to help us improve the platform </p> </header>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap'); :root { --color-white: #f3f3f3; --color-darkblue: #1b1b32; --color-darkblue-alpha: rgba(27, 27, 50, 0.8); --color-green: #37af65; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--color-white); margin: 0; } /* mobile friendly alternative to using background-attachment: fixed */ body::before { content: ''; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; background: var(--color-darkblue); background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg); background-size: cover; background-repeat: no-repeat; background-position: center; } h1 { font-weight: 400; line-height: 1.2; } p { font-size: 1.125rem; } h1, p { margin-top: 0; margin-bottom: 0.5rem; }
@import url: 다른 스타일 시트에서 스타일 규칙을 가져올 때 사용
모든 다른 종류의 규칙보다 선행
:root
의사 클래스는 문서 트리의 루트 요소를 선택:root
는 전역 CSS 변수 선언에 유용하게 사용
- CSS변수 선언 : --
을 앞에 붙여서 속성을 임의로 지정
*: 전체선택자이며 모든 형태의 모든 요소를 선택
*
, *::before
, *::after
에 box-sizing
요소를 적용
box-sizing
: 요소의 넓이와 높이를 계산하는 방법을 지정body: 이해한 내용
var(--color-white);
: :root에서 임의로 설정한 속성을 적용body::before: 선택한 요소(body)의 첫 자식으로 의사 요소를 하나 생성
항상 content
속성이 함께해야 한다.
position
: 문서 상에 요소를 배치하는 방법을 지정fixed
: 화면에 고정되어서 스크롤에도 화면이 움직이지 않는다top, left
속성: position 속성이 적용된 요소의 세로위치를 지정하는 속성height, width
속성: 너비와 높이를 auto
로 지정하여 뷰포트를 가득 채운다
z-index
속성: 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정쌓임 맥락(stacking context)
에서 자신의 위치쌓임 맥락
생성 여부background-image
: 해당 속성은 요소의 배경 이미지를 한 개나 여러 개 지정linear-gradient
: 각도, 색상1, 색상2, url()background-size
: 해당 속성은 요소 배경 이미지의 크기를 설정cover
: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정contain
: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.auto
: 배경 이미지의 원본 크기를 유지.length
/percentage
: 값에 따라 변화background-repeat
: 해당 속성은 배경 이미지의 반복 방법을 지정space
를 이용하여 각 끝에 배치하거나 round
를 통해 잘리지 않도록 이미지를 조정할 수 있다background-position
: 해당 속성은 background-image의 기초 위치를 지정
- body::before를 설정한 이유
- background-attachment: fixed가 일부 mobile 기기에서 작동되지 않기 때문에
- 해당 속성은 배경 이미지를 뷰포트 내에서 고정할지, 자신의 컨테이닝 블록과 함께 스크롤할지 지정
- 하지만 구글링으로는 관련된 내용을 찾기 어렵거나 옛날 자료를 찾을 수 있다. 이제는 상관이 없을 수도?
- MDN에는 fixed가 Safari에서 지원되지 않는다고 표시되있음
margin-top
, margin-bottom
에 바깥여백을 적용
html
<form id="survey-form"> <div class="form-group"> <label id="name-label" for="name">Name</label> <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required /> </div> <div class="form-group"> <label id="email-label" for="email">Email</label> <input type="email" name="email" id="email" class="form-control" placeholder="Enter your Email" required /> </div> <div class="form-group"> <label id="number-label" for="number"> Age <span class="clue"> (optional) </span> </label> <input type="number" name="age" id="number" min="10" max="99" class="form-control" placeholder="Age" /> </div>
form: 해당 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획
label: 사용자 인터페이스 항목의 설명 / 정보를 수집에 유용
label
을 input
요소와 연관시키려면, input
에 id 속성을 넣어야한다.label
에 id
와 같은 값의 for
속성을 넣어야한다. input: 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성하는 요소
type: text
: input요소의 type특성 중 기본값인 text값type: email
: 이메일 주소를 편집할 수 있는 필드type: number
: 숫자를 편집할 수 있는 필드min
: 10의 값을 주어 10미만으로는 입력되지 않게 설정max
: 99의 값을 주어 99초과로는 입력되지 않게 설정placeholder
: 양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용required
: 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값<div class="form-group"> <p>Which option best describes your current role?</p> <select id="dropdown" name="role" class="form-control" required> <option disabled selected value>Select current role</option> <option value="student">Student</option> <option value="job">Full Time Job</option> <option value="learner">Full Time Learner</option> <option value="preferNo">Prefer not to say</option> <option value="other">Other</option> </select> </div>
select
에 적용된 특성: id, name, class, requiredoption
: 메뉴의 옵션을 정리하는 요소disabled
: 지정한 경우 이 옵션을 선택할 수 없다selected
: 지정한 경우 초기에 이 옵션을 선택한 상태로 설정value
: 양식 데이터를 구성할 때 사용할 값, 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용<div class="form-group"> <p>Would you recommend freeCodeCamp to a friend?</p> <label> <input name="user-recommend" value="definitely" type="radio" class="input-radio" checked />Definitely</label> <label> <input name="user-recommend" value="maybe" type="radio" class="input-radio" />Maybe</label> <label> <input name="user-recommend" value="not-sure" type="radio" class="input-radio" />Not sure</label> </div>
checked
: 처음부터 선택되어있는 상태<div class="form-group"> <p> What is your favorite feature of freeCodeCamp? </p> <select id="most-like" name="mostLike" class="form-control" required> <option disabled selected value>Select an option</option> <option value="challenges">Challenges</option> <option value="projects">Projects</option> <option value="community">Community</option> <option value="openSource">Open Source</option> </select> </div>
<div class="form-group"> <p> What would you like to see improved? <span class="clue">(Check all that apply)</span> </p> <label> <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end Projects</label> <label> <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end Projects</label> <label> <input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox" />Data Visualization</label> <label> <input name="prefer" value="challenges" type="checkbox" class="input-checkbox" />Challenges</label> <label> <input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox" />Open Source Community</label> <label> <input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox" />Gitter help rooms</label> <label> <input name="prefer" value="videos" type="checkbox" class="input-checkbox" />Videos</label> <label> <input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox" />City Meetups</label> <label> <input name="prefer" value="wiki" type="checkbox" class="input-checkbox" />Wiki</label> <label> <input name="prefer" value="forum" type="checkbox" class="input-checkbox" />Forum</label> <label> <input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox" />Additional Courses</label> </div>
type= "checkbox"
: 단일 값을 선택하거나 선택 해제할 수 있는 type유형
css
label { display: flex; align-items: center; font-size: 1.125rem; margin-bottom: 0.5rem; } input, button, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button { border: none; }
label의 display: flex
display: flex;
:
align-items: center;
:
- 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스박스의 교차축
- 그리드의 블록 축을 따라 배치하는 방식을 결정
input, button, select, textarea에 동일한 형식 적용
button
border: none
: buttton은 border/outline이 기본적으로 설정되어 있다
css
.container { width: 100%; margin: 3.125rem auto 0 auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } .header { padding: 0 0.625rem; margin-bottom: 1.875rem; } .description { font-style: italic; font-weight: 200; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); } .clue { margin-left: 0.25rem; font-size: 0.9rem; color: #e4e4e4; } .text-center { text-align: center; }
.container: header부터 끝까지 묶은 div class
width: 100%
: 가로길이 화면의 100%margin: 3.125rem auto 0 auto
: 위(3.125rem), 좌우(auto), 아래(0)auto
: 브라우저가 적절한 여백 크기를 선택@media (min-width: 576px) {.container{max-width:540px}}
max-width
: 요소의 최대 너비를 지정한다@media (min-width: 768px) {.container{max-width:720px}}
.header{padding; margin-bottom;)
padding: 0 0.625rem
: 위아래, 가로 안쪽 여백의 크기margin-bottom: 1.875rem
: 아래 바깥여백 .description{font-style; font-weight; text-shadow;}
font-style
, font-weight
: 폰트의 스타일, 폰트의 무게 조정text-shadow: 1px 1px 1px rgba
: 위, 가로, 아래, 색상.clue{margin-left; font-size; color;}
margin-left;
를 준 이유는 서베이 질문과 거리를 두어 가독성을 높이기 위해.text-center{text-align;}
css
/* form */ form { background: var(--color-darkblue-alpha); padding: 2.5rem 0.625rem; border-radius: 0.25rem; } @media (min-width: 480px) { form { padding: 2.5rem; } } .form-group { margin: 0 auto 1.25rem auto; padding: 0.25rem; } .form-control { display: block; width: 100%; height: 2.375rem; padding: 0.375rem 0.75rem; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .input-radio, .input-checkbox { display: inline-block; margin-right: 0.625rem; min-height: 1.25rem; min-width: 1.25rem; }
form{background; padding; border-radius}
@media (min-width: 480px){form{padding;}}
.form-group{margin; padding}
.form-control{}: 질문들을 컨트롤 하는 div요소
display: block
width: 100%
height: 2.375rem
padding: 0.375rem 0.75rem
color: #495057
background-color: #fff
background-clip: padding-box
border: 1px solid #ced4da
border-radius: 0.25rem
tansition:
border-color 0.15s ease-in-out
: 테두리 색상을 0.15초 동안 ease-in-out한다img:
display
: block;block속성
: 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지block
엘리먼트: div
이나 p
, h1
태그 등block
엘리먼트는 inline
과 달리 width
, height
, margin
, padding
속성이 모두 반영height
: 컨텐츠의 높이 조절auto
: 자식요소와 동일하게 조절margin
: 가로 여백 0, 세로 여백은 자녀요소와 같게 함#img-div
img-caption
html
<section id="tribute-info"> <h3 id="headline">Here's a time line of Dr. Borlaug's life:</h3> <ul> <li><strong>1914</strong> - Born in Cresco, Iowa</li> <li> <strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration" </li> <li><strong>2009</strong> - dies at the age of 95.</li> </ul>
section: 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용
article
사용section
을 식별할 수단이 필요 section
의 자식으로 포함li : 리스트
ul
: 정렬되지 않은 목록ol
: 정렬된 목록
css
#headline { margin: 50px 0; text-align: center; } ul { max-width: 550px; margin: 0 auto 50px auto; text-align: left; line-height: 1.6; } li { margin: 16px 0; }
#headline: h3
의 ID
text-align
: center
ul:
max-width
를 550px로 설정하여 그 크기를 벗어나지 않도록 설정함li:
Html
<blockquote cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm" <p> "Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress." </p> <cite>-- Indian Prime Minister Manmohan Singh</cite> </blockquote> <h3> If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry</a>. </h3> </section> </main>
cite
: link를 복사하여 적용
css
a { color: #477ca7; } a:visited { color: #74638f; } blockquote { font-style: italic; max-width: 545px; margin: 0 auto 50px auto; text-align: left; }
Position
, Stacking Context
, input
에 대해서는 다시 한번 정리해보자