HTML & CSS 특강

---

🔔 HTML

1) Forms

• <Form>

  • 정보를 입력하는 영역

  • 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송 / 전송한 데이터는 웹 서버가 처리 / 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송

    • action : 어디에 보낼 건지?
    • method : 어떻게 보낼 건지?

• <input>

  • 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줌 / 사용자에게 정보를 입력 받음

  • 속성 : type / name / readonly / maxlength / minlength / required / autofocus / placeholder / pattern

    • type : text / button / password / search / date / time / range / number / color / radio checkbox / file / email / url / tel
      
      

• <label>

  • input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있음
  • 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 요소를 사용하는 것을 지향

      <label for="input-name">이름 :</label>
      <input type="text" id="input-name">

  • for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야 함
    
  • 이름: 영역을 클릭하면 input 입력 영역에 포커스
    
    

• <select>

  • 드롭다운 리스트 박스를 생성
  • 사용자가 선택해야하는 리스트 박스안의 아이템을 만들 때에는 <option> 태그를 사용
    
    

• <fieldset>

  • 자식 요소로 사용되는 폼 컨트롤들을 그룹화 할 수 있음
  • 특히 폼 내용이 방대하여 섹션별로 나눌 필요성이 있을 경우 유용하게 사용
    
    

• <legend>

  • <fieldset> 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목을 의미

  • 반드시 <fieldset>의 첫번째 자식으로 사용

• <button>

  • 클릭 가능한 버튼을 나타냄
  • 버튼의 모습을 다양하게 제어하고 버튼 내부에 다른 자식 요소를 추가하고 싶을 때 사용

---

🔔 CSS 특강

1) 마진 겹침(병합) 현상

• 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상
• 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

• 의도된 동작
• block-level elements는 무조건 일어나는 일

해결방법
1. 부모 요소에 overflow 속성 값을 적용
2. 부모 요소에 display: inline-block 값을 적용
3. 부모 요소에 border 값을 적용
4. 부모 요소에 display 속성으로 flow-root을 사용 (IE 지원 불가)

2) 고민할 부분

• <img> 와 <background-image>의 차이
• class명 어떻게 짓는 게 좋을까?

---

🔔 마무리

• 폰트 트래픽 문제
  1. 잘 사용되지 않는 폰트는 이미지화
  2. 많이 사용되지 않는 폰트는 경량화
  3. 많이 사용되는 폰트는 CDN(Content delivery network)을 사용하기 보다는 내부 API 서버나, 로컬 서버에서 서빙
• 뾰족한 눈이 있어야 한다
• 큰 덩이리부터 잡자! / 최소한의 마크업으로 시작하자!
• 개발되어 있는 바퀴를 새로 만들지 마라!
• 반응형 디자인을 고려하기!