분류 전체보기
-
06. 폼프론트엔드/HTML 2020. 9. 1. 18:45
# What? 이게 뭔데? 사용자로부터 입력을 받고 싶을 때 사용 form : 입력폼틀 input : 입력란 1) placehoder: 어떤 입력을 원하는 안내문구 2) id: 이 입력에 대한 고유 id 3) type : 입력 유형(password, checkbox, radio, text) 4) name : input명 label : 어떤 입력에 대한 라벨 * for : 어떤 입력에 대한 라벨인지 표시(해당 입력의 id값을 입력해주면 됨) select : 옵션 선택창 * id: 이 입력에 대한 고유 id textarea : 긴 문장 입력 # How? 어떻게 쓰는데? 이름 패스워드 사과 바나나 체리 베리 선택지1 선택지2 # Practice 연습 아이디, 비밀번호, 비밀번호, 성별을 입력받는 회원가입폼 만..
-
05. 표프론트엔드/HTML 2020. 9. 1. 18:20
# What? 이게 뭔데? table : 표를 만들고 싶을 때 사용 caption : 표 설명 thead : 표 제목 영역 tbody : 표 내용 영역 tr : 행 th : 제목 셀 td : 내용 셀 # How? 어떻게 쓰는데? 테스트 표 제목1 제목2 내용1 내용2 테스트 표2 제목1 내용1 제목2 내용2 테스트 표 제목1 내용1 내용2 내용1 # Practice 연습 아래와 같은 형태로 table 구성해보기(css는 안꾸며도됨) 직책 성명 전화번호 이메일 팀장 신빵찡 02-0513-1234 test@naver.com 팀원 빵상 test@daum.net * 코드참고 : https://github.com/ShinHyungJune/publishing-course/tree/html-05-table
-
03. 링크 달기프론트엔드/HTML 2020. 9. 1. 17:31
# What? 이게 뭔데? a 태그 : 지정한 url로 이동시키고 싶을 때 사용 # How? 어떻게 쓰는데? 네이버로 이동 네이버로 이동 * a 태그 옵션 1) href : 링크주소 2) target : _blank(새창을 열고 싶을 때) * 예시 https://www.seoul.go.kr/main/index.jsp 서울특별시 서울특별시 메인, 핫이슈, 분야별정보, 서울은 지금, 소셜시장실, 주요서비스, 새소식, 이벤트 신청, 이달의 행사 및 축제, 생활정보 서비스를 제공 www.seoul.go.kr # Practice 연습 실제 네이버, 다음으로 이동할 수 있는 링크 만들어보기(새창으로) * 코드참고 : https://github.com/ShinHyungJune/publishing-course/tree..
-
02. Text프론트엔드/HTML 2020. 9. 1. 16:48
# What? 이게 뭔데? html에서 문자를 표현하고 싶을 때 사용 p 태그 : 단락을 만들고 싶을 때 span 태그 : 문자열 내 특정 영역을 감싸고 싶을 때 br 태그 : 줄바꿈을 하고싶을 때 # How? 어떻게 쓰는데? @ index.html 여기다 쓰고싶은 말들을 쓰면 됩니다~ 전달하고자 하는 내용 중 강조하고싶은 핵심문구가 있다면 이런식으로 강조하면 됩니다. 전달하고자 하는 내용이 길 경우 적절히 줄바꿈을 넣어주면 가독성이 높아집니다. * 태그 안에 직접 style을 넣어서 꾸며줄 수 있음. # Practice 연습 - 화면에 아래 내용 뿌려보기 안녕하세요, 저는 OOO입니다. 앞으로 잘 부탁드립니다. * 코드참고 : https://github.com/ShinHyungJune/publishin..
-
01. 기본세팅프론트엔드/HTML 2020. 9. 1. 16:31
# What? 하이퍼텍스트 마크업 언어(Hyper Text Markup Language) * 하이퍼텍스트 = 하이퍼링크를 담는 문서 # How? 1. 기본툴 설치 프론트엔드 개발자까지 생각하고 있다면 visual studio code를 사용하길 권장 (typescript 등 프론트엔드 개발에 최적화된 기능이 잘 되어있음) 1) visual stuido 설치 https://code.visualstudio.com/ 2) live server 플러그인 설치 -> 코드 수정사항이 새로고침 없이 화면에 실시간으로 나타남 3) HTML Snippets -> html 태그 자동완성 지원 2. 뼈대 만들기 여기다 html 태그 작성 * 코드참고 : https://github.com/ShinHyungJune/publis..
-
PWA프론트엔드/React 2020. 8. 25. 01:41
# What? 이게 뭔데 - Progressive Web Application -> 웹에서도 앱처럼 static한 부분들을 설치 가능하게 해줌 -> 푸시알림 등 네이티브에서만 가능했던 부분들을 일부 웹에서도 가능하게 해줌 # Why? 이거 왜 써야 하는데? - 사용자에게 더 나은 사용환경을 제공해주기 위해서 # How? 어떻게 쓰는데? 1. manifest.json 생성 @ public/manifest.json { "name" : "매일점심", "short_name": "매일점심", "display": "standalone", "background_color": "#fff", "theme_color": "#ff9711", "orientation": "portrait-primary", "icons" : [..
-
성공하는 서비스 만들기디자인/UX 디자인 2020. 8. 22. 22:51
# 성공하는 서비스를 위해 필요한 것은 충성고객 파격적인 마케팅으로 신규고객을 아무리 유입해온들 충성고객을 만들지 못하면 다 빠져나감. @ 충성고객지수 파악방법 - 재방문률 점검(1주일, 또는 한달 내에 몇명 들어왔는지) -> 구글 애널리틱스 이용 추천 (SPA라면 https://bbon.kr/google-analytics-on-single-page-application/ ) 참고 # 비전과 목표를 분명히 @ 비전 ex01) 회사 막내들의 점심 예약, 회식 예약, 커피 심부름 불편함을 줄이겠다, ex02) 넷플릭스 쉐어 사용자들의 파티 모집 불편함과 불안감을 줄이겠다. @ 목표 - 너무 낮거나 높은 목표는 안됨. ex01) 충성고객 n명을 달성한다. ex02) 넷플릭스 쉐어파티 n개를 달성한다.