[🦁 TIL 4일차] 5월 27일

근듀·2023년 5월 27일

FE 6기 TIL

프론트엔드스쿨 TIL

목록 보기

4/30

1. 주말 특강

Naver 로그인 페이지 만들기

```
논리적인 구조
```

아이디 입력 -> 비밀번호 입력 -> 로그인 상태 유지 -> IP 보안 체크 -> 로그인

```
시맨틱 마크업
```

Class명은 의미가 잘 전달되도록 작성해야 한다.

```
1개 이상의 제목 요소
```

웹 페이지에는 하나 이상의 Heading 이 필요하다.
이미지를 <h1>태그로 감쌀 수 있다.

<form action="서버 스크립트 파일" method=""><label for=""></label></form>

<form> 태그는 로그인 같은 사용자 정보나 의견을 저장소로 보내야 할 때 사용한다.
입력된 데이터를 한번에 서버로 전송하는데 그때 method를 사용한다. get은 서버에서 정보를 읽어올 때 post는 서버로 정보를 보낼 때 사용한다.
<label> 태그는 <form>요소에 어떤 값을 넣어야 하는지 이름을 붙이는 요소이다. 꼭 명시해주는 것이 좋으며 label의 for값과 다른 요소의 id값이 같으면 연결된다.

```
<input type="" placeholder="" required>
```

input태그는 입력값을 받아야 할 때 사용한다.
type 속성은 어떤 입력값인지 정해주는 필수 속성이다.
placeholder은 기본적으로 표시되는 문구이다.
required 는 필수 입력 서식임을 보여주는 속성이다.

<filedset> <legend> </legend> </filedset>

<filedset>태그는 form 태그 안에 관계된 요소들 끼리 묶어주며 그룹화해준다. 그룹화 된 요소들은 주위에 테두리로 박스가 그려진다.
<legend> 태그는 그룹화 된 구역의 이름을 달아주는 역할을 한다.

2. 회고

나도 어느정도는 공부했다고 생각을 해서 중급 코린이 특강을 들었다. 어디서 나온 자신감이었는지.. 특강 시작하자마자 시안을 주시고 30분동안 만들어보라고 하셨다. 와 갑자기 만들려니까 아무것도 생각안나서 생각나는 것들 위주로만 코드를 짰다. 30분안에 CSS까지 하려고 하니까 손이 덜덜.. 나름 열심히 짠거같은데 CSS부분에서 막혔다. 시간이 지나고 제일 잘만드신분 코드로 리뷰하는 시간을 가졌는데 내가 생각하기에는 정말 완벽하게 짰다 라고 생각했는데 강사님이 말씀하시기로는 아니었다. 리뷰하면서 새로운 태그를 배우는데 와 이게 다뭔지... 정말 fieldset? legend? 다 처음 듣는 태그💧 html만 리뷰한건데도 처음 듣는게 너무 많아서 과연 내가 이 특강을 들을 자격이 있나 싶었다. 수업이 끝나고 몰려오는 좌절감.. 내가 지금까지 배운 html은 아무것도 아니였구나 생각이 들었다. 수업이 다 끝나고 혼자 일단 아는 지식으로만 만들어보았다. 눈으로 보기에는 완벽해보이지만 코드를 보면 정말 초초초초초보 코린이 수준😅 새로 배운 내용으로 혼자 다시 만들어보았다. 배운 내용까지만으로는 완벽한 css를 할 수 없었지만 논리적인 구조가 뭔지는 알 것 같았다. 정말 지금까지 배운 html은 진짜 찍먹 수준이였다는걸 몸으로 느꼈다. 이런식으로 코드리뷰 하면서 공부하니까 이제야 공부하는 것 같다. 앞으로 이런 특강 자주 있었으면 좋겠다.

🔖 혼자 만든 것