프론트엔드
-
01. 기초프론트엔드/Javascript 2020. 9. 7. 23:49
# What? 기초로 알고 있어야하는게 뭔데? 1. javascript 파일은 파일명.js와 같은 형태로 만들어야 한다. 2. console.log(보고싶은 내용);으로 console에 데이터를 찍어볼 수 있다. 3. 단일행 주석은 //, 여러행 주석은 /* 내용 */과 같은 형태로 달 수 있다. # Practice 연습 @ example.js console.log(123); // console.log(456); /* 이것은 테스트 내용입니다. 이것들을 주석처리 해보십시오 */
-
02. 글자 꾸미기프론트엔드/CSS 2020. 9. 2. 01:11
# What? font-size : 폰트크기(14px, 16px..) font-weight : 폰트굵기(medium, bold...) font-family : 글씨체 line-height : 줄간격 # How? 어떻게 꾸미는데? @ index.html 폰트 사이즈 폰트 굵기 글씨체 줄간격이 뭘가? 차이점이 뭘가? 줄간격이 뭘가? 차이점이 뭘가? @ style.css .text01 {font-size:40px;} .text02 {font-weight:bold;} .text03 {font-family:monospace;} .text04 {line-height:30px;} @ Practice 문제 화면에 다음과 같은 글씨 띄우기 이것은 48px 굵은 글씨 이것은 24px
-
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..