프론트엔드/HTML
-
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..