일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 리눅스
- AI
- CSS
- 동적 프로그래밍
- 백준
- 코딩테스트
- DFS
- 알고리즘
- 운영체제
- dp
- 순열
- 구글 킥스타트
- linux
- google coding competition
- 코딩
- 프로그래머스
- OS
- PYTHON
- BFS
- 프로그래밍
- 코딩 테스트
- 킥스타트
- 브루트포스
- nlp
- 딥러닝
- 파이썬
- 그래프
- kick start
- 동적프로그래밍
- 네트워크
- Today
- Total
목록Front-end/HTML (5)
오뚝이개발자
netlify라는 서비스를 이용해 web hosting을 손쉽게 할 수 있다. 먼저 구글에 netlify를 검색해 app.netlify.com로 접속한다. 가입을 한 뒤 로그인을 한다(github계정으로도 가능하다). get started를 눌러 원하는 html코드가 들어있는 폴더를 아래의 네모 박스에 드래그한다. 그럼 web hosting이 완료된다. site의 이름을 바꿀 수도 있다. 아래 페이지에서 site settings에 들어간다. 그 후, 아래 사진에서 change site name을 클릭해 사이트명을 바꿔주면 사이트의 url주소도 그에 맞게 변경된다.
HTML 코드로 간단하게 방문자 분석 기능을 웹사이트에 추가할 수 있다. 먼저 https://analytics.google.com 에 방문하여 무료로 계정 만들기를 클릭한다. 계정이름 입력 후 다음 클릭 측정하려는 대상을 웹을 선택한다. 속성 설정에서 웹사이트 이름과 url, 카테고리, 시간대를 설정 후 만들기 클릭. 그 후, 나오는 HTML 추적 코드를 복사해 head 태그 안에 넣어주면 끝! 구글 애널리틱스 사이트의 실시간 기능에서 방문자의 기록을 볼 수 있다.
HTML 코드를 삽입해 간단하게 웹사이트에 채팅기능을 추가할 수 있다. tawk 사이트에 들어가 가입 후 로그인을 한다. 그 후 좌측 배너에 설정을 누르면 다음과 같은 화면이 나온다. 언어를 설정하고 Next : Create Property를 클릭한다. 그럼 다음과 같은 화면이 나오는데 사이트명과 url주소를 입력 후 Next를 클릭한다. 그 후, 다음과 같은 화면이 나오면 자신의 이메일이 관리자 권한으로 입력되어있는 것을 확인한다. 계정을 추가해줘도 된다. 다음과 같은 화면이 나오면 화면의 HTML 코드를 복사한 후 자신의 웹사이트 HTML 소스에 붙여넣으면 완료! 짜잔! 다음과 같이 사이트에 채팅기능이 추가된 것을 볼 수 있다. tawk 사이트에서 관리자 화면에서 메시지를 관리하고 답장도 할 수 있다.
HTML 코드로 손쉽게 댓글 기능을 추가할 수 있다. 여기에선 DISQUS 사이트의 기능을 사용하도록 한다. 검색창에 DISQUS를 입력해 사이트에 들어가 아래 사진의 GET STARTED를 누른다. 가입 후 로그인을 해야 사용 가능하다. 그 후 아래의 I want to install Disqus on my site를 클릭한다. 그 후 website name을 입력하고, 카테고리를 설정해준 후 create site를 클릭한다. 좌측의 메뉴에서 select platform 클릭한다. 아래로 스크롤 해 install manually with universal code 클릭 Place the following code where you'd like Disqus to load에 나오는 HTML코드를 자신의 웹사..
HELLO WORLD 출력 VScode로 test.html이란 파일을 만들고 hello world를 입력한 후 저장한다. 크롬을 열어 ctrl+o를 누르고 test.html 파일을 선택하면 아래 그림과 같이 해당 html파일이 크롬으로 열리는 것을 볼 수있다. , 태크 - html에서 태그란 그 안의 내용을 설명해주는 것을 말한다. - strong 태그는 태그 안의 내용을 Bold체로 바꿔준다. - EX) hello world - u 태그는 태그 안의 내용에 밑줄을 쳐준다.(underline) - EX) hello world Heading 태그 heading 태그란 제목을 표현하는 태그를 말한다. , , ... , 까지 6가지가 있다. 숫자가 작을수록 크기가 큰 제목이다. heading 1 heading..