freeCodeCamp 웹 디자인 – Cat Photo App, Cafe Menu

Responsive Web Design Certification – Cat Photo App

• 콘텐츠를 구분해줄 때 section 활용
• figure와 figcaption은 이미지를 꾸며줄 때 사용함
• input 요소를 label로 감싸서 이름지어서 연관지어 활용(especially for assistive technologies like screen reader)
• radio 버튼 선택시 다른 버튼은 자동 해제되게 하기 위해서는 같은 name 속성을 명시
• submit시에 name과 pair로 데이터를 전달하기 위해 value 속성 사용(value 없으면 indoor-outdoor=on 이런식으로 데이터가 넘어감)

<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

• fieldset으로 input, label을 그루핑해줌, fieldset은 block-level elements
• legend는 fieldset의 캡션 역할
• label로 input을 감싸기 싫으면 label로 텍스트를 감싸고 for 속성에 원하는 input의 id값을 사용해서 사용 가능
• 라디오 버튼, 체크박스에서 기본값 설정시 checked 명시

<input id="energetic" type="checkbox" name="personality" value="energetic" checked> <label for="energetic">Energetic</label>

Responsive Web Design Certification – Cafe Menu

• width 프로퍼티 80%를 설정시 부모 태그 width의 80%로 설정됨
  • 넓은 화면에서 너무 넓어지지 않도록 max-width도 같이 설정
• 요소를 center로 위치하고 싶을 때 margin-left와 margin-right를 auto 설정
• background-image: url(~)로 설정 가능
• article elements commonly contain multiple elements that have related information.
  • article(class=”item”) 안에 있는 p 태그들을 인라인 블록으로 만들기

.item p { 
  display: inline-block
 }

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

• 인라인 블록 요소들은 text-align이 적용이 안되므로 width 설정해줘야 함
  • 단, 아래와 같이 있을 경우 width 50, 50이 제대로 적용 안됨

<article class="item">
  <p>Caramel Macchiato</p>
  <p>3.75</p>
</article>

• 아래와 같이 같은 라인에 있어야 함

<article class="item">
  <p>Caramel Macchiato</p><p>3.75</p>
</article>

• You can use an hr element to display a divider between sections of different content. Note that hr elements are self closing.
  • 연한 회색 줄이 화면에 추가됨
• pseudo-selector
  • 방문한 링크 선택자 a:visited
  • 마우스 오버 a:hover
  • 클릭한 링크 a:active
• h1, h2 등의 태그가 디폴트 마진이 적용되어 있기 때문에 적절한 조정 필요
  • 경우에 따라 이웃 태그에 네거티브 마진을 적용하는 경우도