[자기소개 페이지]

내부링크

클릭시 이동되게 될 곳에 name=속성을 넣고 클릭하게 될곳에 href=# 속성을 넣으면 된다.

<a href=#이동할곳>이동할게요 </a>

<a name="이동할곳"<h3>이동했어요!</h3>

form 태그

form태그를 통해 get in touch 항목을 만들었다.

form : 입력 양식 전체를 감싸는 태그

form은 컨트롤 요소(control element)로 구성된다. 텍스트, 버튼, 라디오 등이 컨트롤

name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송
action : form이 전송되는 서버 url 또는 html 링크
method : 전송 방법 설정. get은 default, post는 데이터를 url에 공개하지 않고 숨겨서 전송하는 방법
autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용

<form name="profile" action="/action_page.php" method="get" 
      autocomplete="on">
  <input type="text" name="id">
  <select>
    <option value="blue">
  </select>
</form>

input 태그

type 속성

1. text - text 입력란

2. password - 비밀번호 입력란. 입력 내용이 보이지 않음.

3. button - 버튼

4. submit - 서버로 form에 입력한 데이터를 보내주는 버튼

5. reset - form에 입력한 모든 데이터 삭제

6. radio - 단일 선택

7. checkbox - 다중 선택

8. file -file 업로드 컨트롤
   method="post" 일 때만 사용 가능
   enctype : form 데이터를 서버로 제출할 때 데이터가 인코딩 된 방법 명시
   "multipart/form-data" : 모든 문자를 인코딩하지 않음

9. hidden - 눈에 보이지 않는 정보를 서버쪽으로 보낼 때 사용. 서버로 choiiis라는 값 전송

textarea 태그

여러 줄의 텍스트를 입력할 때

select 태그

드롭 다운 형식의 선택. 선택 항목은 option으로

label 태그

• control의 제목이 그것의 이름표라는 것을 명시하기 위해 사용
• checkbox나 radio에서 값을 클릭해도 표시될 수 있게 할 수 있음
  (값이 radio의 label이라는 것을 표시해줘서)
• text에서는 화면상에서 label 클릭하면 text 입력 창으로 커서가 간다.

어려웠던점

1. background-image를 넣고 opacity를 주어 가독성을 더 좋게 만들고 싶었는데 글씨도 같이 투명해져서 난감했었다. 검색을 통해 CSS의 Pseudo-element(ex ::after)를 사용해 보았지만 적용이 되지 않아 답답하다...

2. 아직 레이아웃을 만드는 것이 어렵게 느껴진다. grid와 flexbox 개념을 더 숙지해야겠다.

3. favorite things를 만들때 display grid를 활용하면 창을 줄였을때 사진들이 옆으로 삐져나오고 block을 활용하면 사진밑에 글을 쓰면 가로로 정렬이 되지 않았다.