LikeLion Web Day_04
[HTML 실습]HTML 제 2장
< 해당 콘텐츠는 '멋쟁이 사자처럼'의 교육자료를 기반으로 제작되었습니다.게시글의 불법 복제 및 복사, 공유가 전면금지 되어있습니다. >
20210408_20615034_9기교육
HTML
- HTML
HTML로 꾸미려 들지 말자. HTML은 마크업 랭귀지이다.
꾸미는 언어는 CSS이다.
- 문서의 전체를 설명해주기 위한 HTML
01. "이거는 HTML로 작성된 문서야~"를 알려주는 태그
01. "이거는 HTML로 작성된 문서야~"를 알려주는 태그
02. 직접 화면에 출력되지는 않지만, 문서를 설명하는 태그
(타이틀, 인코딩 방식(UTF-8) 등)
03. 직접적으로 화면에 등장하는, 문서에서 보이는 태그
+ 사용자로부터 입력값을 받아들이는 태그
<form>
=> <form>태그 사용법
<form action='전송받을 대상'> ---- </form>
---- = 사용자로부터 입력값을 받아들이는 태그들
- VS Code 환경설정
 |
| VS Code 내, 다운로드 |
Live Server
웹 브라우저로 볼 수 있게 해주는 도구이다.
(단축키 : Alt + L + O)
- HTML 실습
01.
문서 제작 후, 문서 명에 '.html'을 설정한다.
이후, 문자 입력 후 마우스 우클릭을 한다.
해당 창이 표시가 되며, 'Open with Live Server'를 클릭 시, 브라우저가 뜬다.
해당 브라우저에는 코드창에 기입한 문자가 표기된다.
'hihihihihihi'라고 코딩 했을 시,
브라우저 내, 출력값이다.
02.
코딩을 하기 위한 기본 설정단계이다.
[ ! + Tab == 기본 설정 코드 표출 ]
 |
| 표출되는 기본 설정코드이다. |
03.
코드 작성 시, 중간에 실행을 해보면,
'전송받을 대상'에 myid 속에 qwerty가, password 속에 1234가 잘 전송된 것을 확인할 수 있다.
해당 부분은 form 태그 내부이다.
아이디 비밀번호를 입력과 값 저장까지 설정 후, <input type="submit">로 '제출'표시까지 제작된 후의 중간 실행 값이다.
이처럼 코딩 중간중간 URL 확인을 통해, 확인이 가능하다.
이로써 클라이언트와 서버사이 통신은 URL로 가능한 것이 증명된다.
04.
마지막에 나오게 되는 코드를 보면 알 수 있는데, 리스트가 있다.
일전에 배웠던 리스트를 활용하여 기입하지만, 다음을 통해서 한 번에 기입툴을 만들 수도 있다.
[ ol>li*x + Tab == 순서관계가 있는 리스트 제작 ]
[ ul>li*x + Tab == 순서관계가 없는 리스트 제작 ]
x는 숫자로 만들고 싶은 항목의 갯수를 입력하면 된다.
[ Ctrl + n = 새로운 파일 생성(VS Code 내)]
05.
작성된 코드이다.
각주한 곳은 '! + Tab'으로 표출된 기본 설정 코드이며,
각주처리한 이유는 없어도 돌아가지만 기본코드 내, 표출이 되기 때문에 모르겠어서이다. 찾아봐야겠다.
+ 각주 태그
<!-- ---- -->
댓글 없음:
댓글 쓰기