S1U6 [HTML/CSS] 활용

* 공부할때 참고 하기 좋은 사이트 : 생활코딩 https://opentutorials.org/course/3084/18445

* 코딩 테스트 사이트 : https://school.programmers.co.kr/

 

1. 현재 기분이나 느낌

먼저, 이번 페어도 전공자다. 남자분이라 편하다. 여러가지 물음에 쿨하게 대답을 잘해주심. 일단 편해~

오늘 페어 시간전에 계산기만들기 html + css를 이용해 레이아웃 디자인 하는 거여서 나름 유투브 찾아보면서 선행해서 만들어봄

페어분은 전공자 + 현업에서 전산운영 일하신 분이라 현재 내 학업상태를 이야기하니 이것저것 말해주심.

먼저 지금 학습 수준으로 당연히 감당하기 어려운 수업이고 전공자들이나 따라갈 정도라는것. 

시간지나면 천천히 익혀지니 걱정할 필요없다는것. 조급해 할 필요없다는 것.

미리 선행학습 할 만큼 두려워 할 필요없다는 것 이었다. 그래도 계산기 만들기 선행으로 해보니 맘은 편했다. 

html, css 부분이라 그런듯하지만 담주 javascript는 또 떨린다.

 

2. 이해도 자가 점검 리스트

Chapter1. 레이아웃

• 레이아웃이 필요한 이유를 이해한다.(o)
• 레이아웃을 위한 HTML을 만들 수 있다.(o)

Chapter2. Flex

• display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.(o)
• flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.(o)
• justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.(o)
• flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.(o)
• flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.(o)
• VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.(o)

3. 학습한 내용중 떠오르는 것

계산기 만들기 하면서 grid를 이용한 행,렬로 배열하는 방법

Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있다.

그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있다.

 

출처:https://free-eunb.tistory.com/86

 

 

4. 설명하기 어려운 단어가 있다면 왜 그런지?

 

<form> 태그는 웹 페이지에서의 입력 양식을 의미.
로그인 창이나, 회원가입 폼 등이 이에 해당됨.

실제로 백엔드 코드와 함께 <form>을 사용하기 위해서는 다음 속성들이 사용.

• name: 폼의 이름
• action: 폼 데이터가 전송되는 백엔드 url
• method: 폼 전송 방식 (GET / POST) 등

input

<form> 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그.
실제로 사용자가 양식을 입력하기 위한 태그는 <input> 태그 등이 사용.

type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정.

type

• text: 일반 문자
• password: 비밀번호
• button: 버튼
• submit: 양식 제출용 버튼
• reset: 양식 초기화용 버튼
• radio: 한개만 선택할 수 있는 컴포넌트
• checkbox: 다수를 선택할 수 있는 컴포넌트
• file: 파일 업로드
• hidden: 사용자에게 보이지 않는 숨은 요소

 

 

5. 추가로 알아야하는 것, tip

 

계산기 만들기에 필요한 javascript에 대해 공부해봐야 할 듯.