web 공부 2024.03.29

HTTP 메소드

• GET: 데이터를 조회할 때 사용. 기본값
• POST: 데이터를 서버로 제출할 때 사용. (file 태그가 있다면 post가 무조건 필요)
• PUT and PATCH :
  PUT : 자원 전체 교체 (자원의 모든 필드 필요)
  PATCH : 자원의 부분 교체 (자원의 일부 필드 필요)
• DELETE: 삭제

폼 데이터 전송

• <form> 태그의 method 속성에 GET, POST 등을 지정할 수 있다. 지정하지 않으면 기본값은 GET.
• 파일을 포함하는 폼은 반드시 POST 메소드를 사용해야 함. 이와 관련해 multipart/form-data를 찾아보기.
  (멀티파트는 클라이언트와 서버 간에 전송되는 HTTP 요청 또는 응답에서 여러 종류의 데이터를 동시에 전송하기 위해 사용되는 방식이다. 일반적으로 파일 업로드와 관련된 데이터를 전송하는데 주로 사용된다.)

<form method="POST" enctype="multipart/form-data">
  <!-- 폼 요소들 -->
</form>
텍스트 입력
<textarea> 태그는 사용자가 글을 입력할 수 있는 영역을 제공. 값은 태그 사이에 입력됨.
<textarea name="description">여기에 글을 적기.</textarea>
버튼
<button> <!-- 태그의 기본 유형은 submit. 폼 데이터를 제출하는 데 사용.
제출 기능이 아닌 버튼을 만들려면 type="button"을 명시. -->
<button type="button">클릭하세요</button>

구조적 태그

<div>는 컨텐츠를 논리적으로 그룹화하는 데 사용.
<span>은 인라인 요소를 그룹화하는 데 사용.
<object> 태그는 외부 리소스를 포함하는 데 사용. 과거에는 플래시 콘텐츠에 주로 사용되었지만, 현재는 PDF 파일 등을 포함하는 데 사용.

의미론적(Semantic) 태그

HTML5는 의미론적 요소를 도입하여 <div> 태그의 사용을 보완. 예를 들어, <section>, <article>, <nav>, <header>, <footer> 등이 있다.

CSS 시작

CSS는 웹 페이지의 스타일을 지정하는 데 사용.

CSS 우선순위
!important는 가장 높은 우선순위를 가지며, 가능한 사용을 피해야 함. 인라인 스타일 id 선택자 (#id) 클래스 선택자 (.class) 태그 선택자 (tag)

CSS 기본 예제

/* 모든 요소 선택 */
* {
  margin: 0;
  padding: 0;
}

/* 특정 태그 선택 */
h1 {
  color: blue;
}

/* 클래스 선택 */
.button {
  background-color: red;
}

/* ID 선택 */
#unique {
  font-weight: bold;
}

block and inline

<h1>안녕</h1>
<div>안녕</div>

위의 코드는 block 으로 한 줄을 차지한다.

<span>안녕</span>
<i>안녕</i>

위의 코드는 inline으로 글의 크기만큼만 차지한다. i는 주로 폰트어썸의 아이콘을 가져올때 사용한다.

block과 inline은 css의 display속성으로 지정이 가능하며, 바꾸기도 가능하다. 기본값이 저런거지 못바꾸는게 아니기 때문이다.

inline-block도 있는데 원래 inline속성은 지정할 수 없는 width와 hight을 지정할 수 있게 해준다.