[FreeCodeCamp/프리코드캠프]Responsive Web Designing #1

소진수·2021년 4월 7일
1

Free Code Camp

목록 보기
1/1
post-thumbnail

해당 노트는 FreeCodeCamp에서 진행하는 Responsive Web Design Project 2를 복습하기 위해 작성했습니다.


* 이미 언급한 내용은 초록색으로 작성했습니다.
* 새로 이해한 내용은 노란색으로 작성했습니다.
* 추가적인 속성 내용은 회색으로 작성했습니다.

1. 상단 HTML & CSS 분석

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>

  • div class="container" : 플로우 콘텐츠를 위한 통용 컨테이너 요소
  • div요소에 "container"라는 class를 적용하여 전체적인 css 특성을 적용
  • header : 소개 및 탐색에 도움을 주는 콘텐츠 요소(제목, 로고, 검색 폼, 작성자 이름)
  • h1 : 제목구획 요소
    • id : 애플리케이션의 고유 영역 식별자 / 레이블과 인풋 컨트롤을 연결하기 위한 식별자
    • class : 재사용을 위한 애플리케이션 레이아웃 식별자 / 재사용을 위한 애플리케이션 컴포넌트 식별자

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: 다른 스타일 시트에서 스타일 규칙을 가져올 때 사용

  • 모든 다른 종류의 규칙보다 선행

    • @import는 중첩 명령문이 아니기 때문에 조건부 그룹 @규칙 내에 사용할 수 없음
    • :root: :root 의사 클래스는 문서 트리의 루트 요소를 선택
  • :root는 전역 CSS 변수 선언에 유용하게 사용
    - CSS변수 선언 : --을 앞에 붙여서 속성을 임의로 지정

    • *: 전체선택자이며 모든 형태의 모든 요소를 선택

    • *, *::before, *::afterbox-sizing 요소를 적용

      • box-sizing: 요소의 넓이와 높이를 계산하는 방법을 지정
        • content-box: 기본 css박스 크기 지정방식, width에 안쪽 여백과 테두리를 추가한다
        • border-box: width 와 height 속성이 안쪽 여백과 테두리는 포함, 바깥 여백은 X
    • body: 이해한 내용

      • color: var(--color-white);: :root에서 임의로 설정한 속성을 적용
    • body::before: 선택한 요소(body)의 첫 자식으로 의사 요소를 하나 생성

    • 항상 content속성이 함께해야 한다.

      • position: 문서 상에 요소를 배치하는 방법을 지정
        • fixed: 화면에 고정되어서 스크롤에도 화면이 움직이지 않는다
        • 고정 위치 지정은 절대 위치 지정과 비슷하지만, fixed는 요소의 컨테이닝 블록이 뷰포트의 초기 컨테이닝 블록이라는 점에서 다릅니다. 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있습니다.
      • top, left속성: position 속성이 적용된 요소의 세로위치를 지정하는 속성
        • position이 fixed인 경우
          • top: 요소의 컨테이닝 블록 상단 바깥여백과 상단 내부여백의 간격을 지정
  • height, width속성: 너비와 높이를 auto로 지정하여 뷰포트를 가득 채운다

    • z-index속성: 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정
      • position(static을 제외한)의 박스에 대해, z-index 속성은 다음 항목을 지정합니다.
    • 현재 쌓임 맥락(stacking context)에서 자신의 위치
      • 자신만의 쌓임 맥락 생성 여부
      • z-index를 설정하여 겹쳐보이는 효과를 줌
    • background-image: 해당 속성은 요소의 배경 이미지를 한 개나 여러 개 지정
      • 맨 처음 지정한 이미지가 제일 위에 위치
      • 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 background-color는 지정해야 한다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문
      • linear-gradient: 각도, 색상1, 색상2, url()
    • background-size: 해당 속성은 요소 배경 이미지의 크기를 설정
      • cover: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정
      • contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.
      • auto: 배경 이미지의 원본 크기를 유지.
      • length/percentage: 값에 따라 변화
    • background-repeat: 해당 속성은 배경 이미지의 반복 방법을 지정
      • space를 이용하여 각 끝에 배치하거나 round를 통해 잘리지 않도록 이미지를 조정할 수 있다
    • background-position: 해당 속성은 background-image의 기초 위치를 지정
      • left, right, center, top, bottom, 그리고 숫자로 위치 지정
  • body::before를 설정한 이유
    • background-attachment: fixed가 일부 mobile 기기에서 작동되지 않기 때문에
    • 해당 속성은 배경 이미지를 뷰포트 내에서 고정할지, 자신의 컨테이닝 블록과 함께 스크롤할지 지정
    • 하지만 구글링으로는 관련된 내용을 찾기 어렵거나 옛날 자료를 찾을 수 있다. 이제는 상관이 없을 수도?
    • MDN에는 fixed가 Safari에서 지원되지 않는다고 표시되있음
  • h1:
    • font-weight: 서체의 굵기를 조절
    • line-height: 행간 조절
  • p:
    • font-size: em은 부모 요소, rem은 루트 요소에 상대적으로 적용
    • h1,p의 margin-top, margin-bottom에 바깥여백을 적용

2. 중단 HTML & CSS 분석

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: 해당 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획

    • 모든 서베이들을 div로 묶고 같은 class를 지정하여 동일한 css스타일을 적용
    • 그리고 각 input 내부에 다른 공통 class를 적용하여 컨트롤한다.
  • label: 사용자 인터페이스 항목의 설명 / 정보를 수집에 유용

    • labelinput 요소와 연관시키려면, input 에 id 속성을 넣어야한다.
    • 그런 다음 labelid 와 같은 값의 for 속성을 넣어야한다.
  • input: 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성하는 요소

    • type: text: input요소의 type특성 중 기본값인 text값
    • type: email: 이메일 주소를 편집할 수 있는 필드
    • type: number: 숫자를 편집할 수 있는 필드
      • span을 삽입하여 optional로 해당 대화형 컨트롤을 설명
        • 짧은 인라인 요소 꾸미기위해 사용
      • 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>

  • form 구획안에 있지만 label을 사용하지 않고 select를 사용함
  • 또한 p를 활용하여 질문을 생성함
  • select: 옵션 메뉴를 제공하는 컨트롤 요소
    • select에 적용된 특성: id, name, class, required
    • option: 메뉴의 옵션을 정리하는 요소
      • 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>

  • 마찬가지로 div/class로 css를 적용하고 p요소로 질문을 작성함
  • label/input으로 raido 유형을 선택하여 동일한 name을 적용함
  • name, value, type, class, checked를 적용함
    • 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>

  • 위와 같은 select 예문

    <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>

  • label / input / checkbox
  • type= "checkbox": 단일 값을 선택하거나 선택 해제할 수 있는 type유형
  • name, class은 모두 동일하게 적용되고 value는 각각 다르게 적용

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;:

    • 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈입니다.
    • 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.
  • align-items: center;:
    - 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스박스의 교차축
    - 그리드의 블록 축을 따라 배치하는 방식을 결정

  • input, button, select, textarea에 동일한 형식 적용

    • margin 0, font-family, font-size, line-height inherit from parent element
  • 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}}

    • 브라우저의 뷰포트 너비가 540px 이상인 경우에만 스타일을 적용
      • max-width: 요소의 최대 너비를 지정한다
        • width 속성의 사용값이 자신의 값보다 커지는걸 방지한다
  • @media (min-width: 768px) {.container{max-width:720px}}

    • 화면 크기별로 크기를 적용하는 이유는...?
    • 해상도 별로 다양한 웹사이트를 제공할수 있기 때문에
    • min을 사용할 때는 반드시 작은 사이즈에서 큰 사이즈로 작성해야한다
  • .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;}

    • 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;}}

    • 뷰포트의 크기가 최소 480px이면 padding을 2.5rem 적용한다
  • .form-group{margin; padding}

    • form-group 클래스는 모든 질문들을 각각 묶은 div에 적용된 클래스이다.
    • 그러므로 모든 질문에는 이 클래스가 똑같이 적용된다.
      • margin: 위(0), 좌우(auto/브라우저가 적절한 여백크기 선택), 아래(1.25rem)
      • padding: 0.25rem 주변여백에 차이를 준다
  • .form-control{}: 질문들을 컨트롤 하는 div요소

    • display: block
      • 내용의 길이에 상관 없이 가로 크기가 부모 요소의 100%를 차지합니다.
      • enter 키를 누르지 않았는데도 줄바꿈을 한 효과를 가지고 있습니다.
      • 가로 크기를 부모요소의 100%보다 작게 설정할 수는 있지만, 그렇게 한다고 해도 줄바꿈 효과는 사라지지 않습니다.
      • 해당 요소의 다음 요소는 아래에 위치하게 됩니다.
    • width: 100%
      • 가로 넓이를 부모의 100%로 설정
    • height: 2.375rem
      • 각 질문지의 높이를 2.375rem으로 설정
    • padding: 0.375rem 0.75rem
      • 안쪽 여백을 세로 0.375rem 가로 0.75rem으로 두어 내용이 상자에 꽉차지 않게함
    • color: #495057
      • 글자색상 회색으로 지정
    • background-color: #fff
      • 하얀색
    • background-clip: padding-box
      • 해당 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정
      • 배경을 안쪽여백에만 적용한다
    • border: 1px solid #ced4da
      • 단축속성
      • 테두리를 1px 두께, 스타일은 solid, 색상은 #ced4da로 한다
    • border-radius: 0.25rem
      • 테두리 경계의 꼭지점을 0.25rem 만큼 둥글게
    • tansition:
      • 간단히 다루기엔 양이 너무 많음 / 변화를 적용한다 / :hover와 같은 action을 통해 작동
      • 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 : 자식요소와 동일하게 조절
    • 값이 없어도 auto와 같은 값을 가짐
    • margin: 가로 여백 0, 세로 여백은 자녀요소와 같게 함
  • #img-div

    • background, padding, margin : 중복 내용
  • img-caption

    • margin : 위(15px), 아래(5px)
    • @media(x) : 중복 내용

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을 식별할 수단이 필요
    • 주로 제목(h1~h6) 요소를 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

    • h3의 외부 여백(상하:50px, 좌우:0)를 적용
    • text-align: center
      • 텍스트 가로정렬 속성
  • ul:

    • max-width: 550px
      • max-width를 550px로 설정하여 그 크기를 벗어나지 않도록 설정함
      • 하지만 스크린? 화면?이 작아지면 화면에 맞춰서 작아진다
    • text-align:
    • margin: 상(0), 우(auto), 하(50px), 좌(auto)
    • line-hegiht: 1.6배
  • li:

    • margin: 상하(16px), 좌우(0px)

3. 하단 HTML & CSS 분석

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>

  • blockquote: 인용구 요소
  • cite: link를 복사하여 적용
  • cite: 인용구 하단에 사용됨
  • a: 앵커 요소는 href 특성을 통해 다른 URL, 장소로 연결할 수 있는 하이퍼링크를 만듬
    • href: 앵커 필수 요소, 하이퍼링크를 삽입한다
    • target: 현재 페이지, 새로운 창에서 열지 결정

css

a {
  color: #477ca7;
}
a:visited {
  color: #74638f;
}
blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}

  • :visited: 의사 클래스중 하나로 사용자가 방문한적 있는 링크를 나타냄

🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤🎤

4. 마무리 / 느낀점

  • Position, Stacking Context, input에 대해서는 다시 한번 정리해보자
  • 리뷰하는 방식에 대해서는 이렇게 하지않고 다른 방식으로도 진행해볼 예정이다. 리뷰하는데 생각보다 많은 시간이 소요되었다. 다음엔 인용문 안에서 바로 비교해보는 방식을 진행해보려 한다.
  • 다음 프로젝트도 잘 완성하여서 다음 포스트를 시일내로 업로드 해보자.

profile
느려서 바쁘다

0개의 댓글