시간표
09:00 ~ 11:50 워크샵
12:00 ~ 13:00 점심시간
13:00 ~ 18:00 HTML Living Standard (2)
1. 개발자 성장 워크샵
메이커준님과 함께 하는 워크샵
메이커준을 소개합니다.
👋🏼 밝음의 아이콘 메이커준의 초간단 소개
www.makerjun.com
"밝음의 아이콘" 메이커준님과 함께 구글시트를 작성해보았다.
https://docs.google.com/spreadsheets/d/
2022 멋쟁이 사자처럼 회고7~12조 시트
시트1 회고7,회고8,회고9,회고10 이름,전서희,허지현,조민경,주다빈,유준상,조윤희,임다현,박재모,정정현,임수현,김미리,김예지,추경훈,김희진_1,김세훈,김아름,김지수,김수현,김경림 체크인 점수
docs.google.com
개발자로서의 역량 3가지를 작성해보라고 하셨다. 나는 아래와 같이 작성하였다.
개발자로서의 역량 3가지
1. 개발스킬 _ 개발에 필요한 개발언어와 구현 능력, 클린 코드 작성 등
2. 커뮤니케이션 능력 _ 기획자, 디자이너, 백엔드 개발자 간 브릿지 역할.
3. 새로운 기술에 대한 호기심 _ 빠르게 변화하는 개발 트렌드에 발맞춰 새로운 기술에 관심을 갖고 지속성장 가능한 원동력.
하지만 추상적이기 때문에, 이를 실천하기 위한 실천방안도 작성하였다.
"개발스킬"을 얻기 위한 과정. (~8.1까지)
1. TIL 작성
2. 모던 자바스크립트 1독(팀원들과)
3. 매일 프로그래머스 JS 문제 1개 풀기
4. FE 과제 성실히 수행
5. 매일 09:00~00:00 까지 공부하기
이를 위하여 팀원들과 서로의 블로그에 들어가 피드백을 나누기로 하였다.
정말 너무 좋은 팀원들만 모여있어서 행복하다.
2. HTML Living Standard (2)
2.1 지난 과제 점검
과제명: 웹페이지 Grouping Contents 나누기
1. 성훈님 과제 Feedback
- 회사로고 작성 시 h1테그 넣기: h1 > a > img 로 작성. 이유_웹페이지의 정보를 나타내기 위하여.
- Section 안에 section테크 적극 활용하기. Article 안에 Section테크를 넣어도 됨.
- Footer안에 회사 제품, 소개 등 a테그뭉치들 다 넣어주기.
- nav 형태일 때는 nav 테그 적극 활용하기
- 우측상단 "마이페이지,장바구니,검색" 위젯은 Article로 표현하기 (*Article구성 시 Component화 가능한지 생각하기!)
- Section테그 안에 h1~h6테그(Heading테그) 적극 활용하여 주제에 대한 중요도를 알려주기(*접근성,웹표준,SEO에 용이)
- Address는 Footer안에 컨택정보 부분에 활용하기
*캐러셀(carousel): 캐러셀은 마케팅 정보를 보여주기 위한 방법으로, 스크롤하지 않고 최대한 볼 수 있는 마케팅 컨텐츠를 의미한다.
*IR기법:
IR(image replacement)기법이란의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법.
특징: 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다
[HTML,CSS] 웹 접근성 이미지 표현, IR기법
html- img 태그로 표현 (이미지가 의미가 있을 때)\`<a href=" alt 태그이미지가 없을때 출력할 대체 문자 표현 (웹접근성조건)css- background 속성으로 표현 (이미지가 의미가 없을 때) / 대체문자xa { backgro
velog.io
2. 희진님 과제 Feedback
- 퀵메뉴의 경우 Article 테그를 이용하여 Footer 하단 혹은 Main 하단에 추가. (위치는 크게 상관없음)
- h테그와 nav태그를 header로 묶어서 사용
- 캐러셋 구현 시 ul > li 활용
- address테그 안 내용은 dl > dt,dd 테그 사용
3. 희래님 과제 Feedback
4. 현지님 과제 Feedback
- header에 등장하는 광고컨텐츠를 aside로 따로 빼놓기
- heading테그를 쓸 때, 가급적 section 안에 넣기
- 알림의 날짜 같은 경우 <time>테그 혹은 <datetime> 사용
5. 현우님 과제 Feedback
- dl,dt,dd 적극 사용
https://velog.io/@raram2/dl-dt-dd%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%93%B0%EB%8A%94-%EA%B1%B8%EA%B9%8C
dl, dt, dd는 언제 쓰는 걸까?
dl은 Description-List, dt는 Description-Term, 그리고 dd는 Description-Description의 약자입니다. 하지만 대부분 dl보다 ol, 그보다 ul이 더 익숙하게 느껴질 것으로 생각합니다. 그럼 dl은 왜 있는 것이고...
velog.io
- footer에도 heading테그 넣기
- copyright은 <small>테그 이용하기
6. 강사님 네이버 grouping contents
- 검색창은 input태크에 search 타입 지정
- 적절한 section명으로 나누기가 어려울 때, div 사용
- 광고는 대부분 aside테그 이용
- 위젯들은 article테크 기용
- 이미지에 대한 설명은 <figure>와 <figurecaption>으로 나누기
- 출처는 <cite>, 카피라이트는 <small>태그 이용
2.2 Forms 기본속성
2.2.1 폼 동작 방식
- 웹 페이지에 있는 form에 데이터를 입력합니다.
- 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동하게 됩니다.
- 웹 서버는 데이터를 처리하기 위해 APP을 호출합니다. 이때 APP은 물리적으로 별도의 서버일 수도 있습니다.
- 필요에 따라 APP은 DB로 데이터를 전송합니다. 이때 DB는 물리적으로 별도의 서버일 수도 있습니다.
- DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.
- CRUD
- 웹 서버는 받은 결과를 Client 브라우저에게 보냅니다.
- 사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 보여줍니다.
2.2.2 폼의 속성
form의 속성은 아래 표와 같이 이루어져 있습니다.
form 속성
A new tool for teams & individuals that blends everyday work apps into one.
www.notion.so
읽어볼만한 글
form에서 put, delete를 지원하지 않는 이유
form에서 put, delete를 지원하지 않는 이유
왜 안될까? form을 사용해 DB 데이터를 사용하다보면 PUT, DELETE는 왜 지원하지 않는지 의문을 가질 수 있다. 보통 POST를 override 하는 방식으로 우회해서 사용하는데 왜 이렇게 해야만 하는지 그 이
c3epmos.tistory.com
2.3 <input>
2.3.1 input 속성 목록
2.3.1 input 타입 목록
2.4 <label>
단순히 input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 <label> 요소를 사용하도록 합시다.
시각장애인들을 위하여 반드시 넣어주어야 함! Alt를 넣지 않아도 될 때, label도 넣지 않을 수 있음.
2.4.1 for의 사용법
for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야 합니다. 레이블과 폼 컨트롤이 연결되면 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동합니다. 이러한 점 때문에 사용자는 클릭 할 수 있는 영역이 더 넓어져 폼을 쉽게 사용할 수 있게 됩니다. 즉, 레이블에 적힌 내용을 클릭해도 input을 입력할 수 있게 됨.
<label for="myName">이름 : </label>
<input type="text" name="name" id="myName" />복습(상)
2.5 <select>
- multiple과 같이 속성명과 value값이 같을 때는 생략 가능.
- name값 = key값, 보통 백엔드 개발자가 정해줌.
- method를 get으로 할 경우, 네트워크 에러가 안 남. 왜냐하면 기본적으로 자기 자신 html에게 정보를 전달하기 때문.
하지만 post로 할 경우, action을 반드시 지정해주어야함.
- type은 올바른 데이터 입력을 요구하기위해 id는 label과 연결하기 위해 name은 서버전송할때 key값으로 주기위해
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>select</title>
</head>
<body>
<form action="">
<label for="myDevice"
>현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label
>
<select name="device" id="myDevice" size="1">
<option value="" selected>선택</option>
<!-- value에 아무것도 입력하지 않기 -->
<option value="iphone">아이폰</option>
<option value="galaxy">갤럭시폰</option>
<option value="ㅜㅜ">LG폰</option>
</select>
</form>
<form action="">
<label for="myDevice"
>현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label
>
<select name="device" id="myDevice" required>
<option value="0" selected>선택</option>
<option value="iphone">아이폰</option>
<option value="galaxy">갤럭시폰</option>
<option value="ㅜㅜ">LG폰</option>
</select>
<input type="submit" />
</form>
<form action="">
<fieldset>
<legend>개인정보</legend>
<label for="myName">이름</label>
<input type="text" name="name" id="myName" />
<label for="myTel">전화번호</label>
<input type="tel" name="tel" id="myTel" />
<label for="myEmail">이메일</label>
<input type="email" name="email" id="myEmail" />
</fieldset>
<fieldset>
<legend>개인정보 제공 동의</legend>
<label for="checkAgree">개인정보 제공에 동의하십니까?</label>
<input type="checkbox" name="agree" id="checkAgree" />
</fieldset>
</form>
</body>
</html>2.6 <button>
*input과 button 중 무엇을 써야할까?
- input는 열린테그이기에 닫는테그가 없음. 그렇기에 안에 자식요소 입력이 불가능. (대신 value값을 통해 text 변경 가능)
- button 같은 경우는 이미지 등 요소 입력이 가능.
2.7 <textbox>
- 관행상 이용약관을 textbox에 readonly속성을 넣어서 만들기도 함.
(하지만 p태그에 overflow: scroll 로도 구현 가능. 굳이 textbox로 할 이유는 없음.)
2.8 <datalist>
<form action="" method="get">
<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets" />
<datalist id="planets">
<option value="수성">수성</option>
<option value="금성">금성</option>
<option value="지구">지구</option>
<option value="화성">화성</option>
</datalist>
<input type="submit" />
</form>'멋쟁이사자처럼FE 2기 > TIL' 카테고리의 다른 글
| 10일차_특강(1기 선배 & Notion) (1) | 2022.04.11 |
|---|---|
| 11일차_CSS_TEXT,POSITON (1) | 2022.04.11 |
| 9일차_CSS(2) (0) | 2022.04.07 |
| 8일차_CSS(1) (0) | 2022.04.06 |
| 7일차_HTML Living Standard (3) (0) | 2022.04.05 |