시작
2021.11.27~2021.11.28
Hypertext Markup Language (HTML)
기획
- 목표를 정하다
언어의 원리
- 원인 : 컴퓨터 언어 - 소스, 코드
- 결과 : 컴퓨터가 한 일 - 앱, 응용 프로그램
WEB 특징 - 퍼블릭 도메인
- 어떠한 저작권도 존재하지 않는 완전한 자유
HTML 에디터
- 메모장, 아톰 (https://atom.io/)
HTML 코드를 작성시
- 모두가 사용할 수 있는 접근성
- 쉽게 접근할 수 있는 코딩 ex) h1~6활용 - 더 많은 노출 효과
문법
- 기본
- 도큐멘트 타입 HTML <!DOCTYPEHTML> - 이 문서는html 로 구성되어 있다.
- 이 문서는 html로 구성됨 <HTML> - 전 코드를 위와 같이 묶어야함
- 제목의 역할을 하는 문맥은 헤드로 묶기 <HEAD>
- 본문의 역할을 하는 태그 <BODY>
- 이 코드를 읽을때 utf-8 로 읽음 <meta charset="utf-8">
- 태그(tag)
- 페이지 이름 <title> - 검색엔진 핵심이므로 무조건 사용
- 강조 <strong>
- 언더 라인 <u>
- 줄바꿈 <br> - 닫지 않는 태그
- 단락 나눔 <p> ex) <p style="margin-top:45px;"> 45픽셀만큼 단락에 여유
- 이미지 삽입 <img src=""> - ex) <img src="coding.jpg" width="100%">로컬 , 네트워크는 이미지 주소 입력
- 부모와 자식 - <parent>, <child>
- 링크 걸기(앵커, 닻) <a> ex) <a href="https://www.w3.org/TR/html5/"></a> / href = href는 HyperText Reference
- 삽입 <input>
- 동영상 삽입 <iframe> ex)
EX) <iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" frameborder="0" allowfullscreen></iframe>
너비 560 높이 315 프레임 보더 0, 풀스크린을 허용하는 링크된 영상을 불러온다.
ex) 유튜브 자동 재생 소스
<iframe width="가로사이즈" height="세로사이즈" src="https://www.youtube.com/embed/영상키값?rel=0&autoplay=1&mute=1&loop=1;playlist=영상키값" frameborder="0"></iframe>- 리스트 <li> - 리스트 중 하나로 지정한다. ul ol 의 영향을 받는다 .
- 언오더 리스트 <ul> - 숫자가 앞에 붙지 않는다
- 오더 리스트 <ol> - 숫자가 앞에 붙는다
- 테이블 <table> - 표 만들때 싸용
- 테이블 열(로우) <tr> - 행 지정
- 테이블 셀 <td> - 열 지정
- 테이블 헤드 <thead> 테이블 제일 좌측 상단에 제목 표기
- 속성(attribute)
- src="다이렉트어드레스" - 이미지 링크 불러올때 사용 <img> 와 함께사용 (소스)
- style="스타일" - ex) style="font-size:15px;" - 예시) 글자 크기 -
- target="_blank" - 앵커의 속성으로 사용시 새로운 페이지가 열리게 하기위함
- title="툴팁기능" - 앵커의 속성으로 사용시 툴팁 기능
- type="체크박스(ex)" 타입 지정
W3C (The World Wide Web Consortium) - https://www.w3.org/
- 국제민간표준화기구
- WEB의 표준은 여기서 제정된다.
어드밴스위브랭킹 - https://advancedwebranking.com/
- WEB 태그 통계 자료
- 통계를 기반으로 공부 - 많이 쓰이는 단어 중요
WEBSITE란?
- 여러개의 html 로 앵커시켜 만든것. 링크를 통해 각각을 매칭시켜주는것이 중요
web 호스팅
- 웹사이트를 호스팅 해주는 웹 호스팅 업체.- 간편하지만 인터넷의 원리에 대해 알기 어려움
- Static 정적으로 html 으로만 구성된 파일의 경우 무료로 해주는 곳이 있다 - 검색 ) free static web hosting
- dynamic 동적으로 구성(php, python, ruby, java 와 같은 곳은 유료로 해주는 곳이 만하다.
web server 구축
- 직접 내 컴퓨터에 서버를 구축하는 방식 - 어렵다
- 무료 오픈 소스 - 아파치 - 사용법 및 다운로드 https://haenny.tistory.com/202 (헤니님 블로그)
- 127.0.0.1 - 내 컴퓨터를 가르키는 IP를 의미함
- 아파치를 켜고 127.0.0.1 을 입력하면 내 컴퓨터의 웹서버 index파일이 실행됨
- 카페에서 와이파이를 통해 서버를 개통함 - 스마트폰도 똑같은 네트워크에 속해있다면 ip 주소 입력후 입장가능하다.
댓글, 채팅, 기능 추가
- 생활코딩 참고 https://opentutorials.org/course/3084/18594
- 댓글 기능 추가 : 디스커스 - 내 홈페이지에 달린 댓글들을 https://disqus.com/ 에서 모아서 볼 수 있음
- 채팅 기능 추가 : 내 html 에 채팅 기능을 추가할 수 있음. 투왁 https://www.tawk.to/
댓글