본문 바로가기

프로그래머/HTML

[HTML] 웹 상에 무료로 원하는 짤(gif), 이미지를 삽입해보자 | giphy | flaticon www.flaticon.com -> 무료 이미지 검색 [ Flaticon, the largest database of free vector icons Download all icons in SVG, PSD, PNG, EPS format or as webfonts www.flaticon.com ](https://www.flaticon.com) giphy.com -> 무료 짤 검색 [ GIPHY | Search All the GIFs & Make Your Own Animated GIF GIPHY is your top source for the best & newest GIFs & Animated Stickers online. Find everything from funny GIFs, reaction GIFs.. 더보기
[HTML/CSS/JS] 웹에서 실시간으로 html/css/javascript를 코딩하고 확인해보자 | codepen.io codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io vscode 같은 IDE를 깔지 않더라도 웹상에서 html/css를 코딩하고 실시간으로 확인할 수 있다. 페이지에서 왼쪽에 start coding을 누르자. HTML, CSS, JS에 해당하는 각각의 칸이 있고, 원하는 내용을 코딩해서 넣으면 옆의 창으로 실시간 확인이 가능하다. 간단한 코딩 구현을 쉽게 확인할 수 있다. 더보기
HTML 문법(<title>,<html>,<head>,<body> 태그) | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 이전까지는, 브라우저에 탭 제목이 파일이름으로 나왔다.하지만, 제목은 검색결과에도 영향을 미치는 아주 중요한 요소이다.우리가 원하는 제목이 브라우저 탭에 출력되도록 태그를 사용해보자. 태그 안에 원하는 제목을 입력한다. 제목이 탭에 출력된다. 제목이나 내용에 한글을 넣고 싶다면, 을 꼭 추가하도록 하자. 한글 출력이 잘 된다. 그리고 html 문서에는 관례적으로 html으로 문서가 쓰여졌다고 의미하는 첫째줄,텍스트 전체를 감싸는 태그,제목과 몸통을 구분하는 , 태그가 꼭 쓰인다. 더보기
HTML 문법(부모-자식 parent-child 태그) | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 내용에 목차를 추가해보자. 목차를 입력하고, 줄 바꿈 태그 으로 목차를 완성해보자. 이렇게 나온다.그러면, 원래 줄 바꿈 기능할 하는 태그 대신, 목록의 의미를 나타내는 태그 를 써보자. 쓰고자 하는 목록을 로 감싸주면 된다. 이렇게 태그를 쓰지 않더라도 자동으로 한 줄이 띄어진다. 목록을 추가해보자. 결과를 보면, 상관성이 없는 목차들인데, 붙어있으니까 보기가 좋지 않다. 태그로 감싸주자.ul은 unordered list의 약자이다.코드를 보면, 안에 가 있는 것을 볼 수 있다.와 같은 항목들을 어디서부터 어디까지 연관이 있는 항목인지를 구분하는 태그가 .. 더보기
Node.js 설치(윈도우) 및 실행 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* Node.js를 설치해 보자.이 포스팅은 윈도우에 설치하는 것을 기준으로 한다.우선, https://nodejs.org/en/ 로 들어가,왼쪽 LTS를 눌러 설치한다. 설치가 완료되었다면, 설치가 잘 되었는지 확인하자.윈도우 검색에서 'cmd'를 입력해 명령 프롬프트를 실행한다. 명령 프롬프트에 node -v 를 입력해서 설치된 node.js의 버전이 출력되면 설치 완료. node.js의 기본적인 커맨드를 입력해보자.node를 입력해 node.js 입력 상태로 만든 뒤,console.log(1+1)를 입력,2가 출력되면 정상적으로 작동되는 것이다. node.. 더보기
HTML 문법(줄바꿈 태그 <br> vs <p>) | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* HTML의 줄 바꿈 태그를 알아보자.우선 가장 기본적인 줄 바꿈 태그로는 태그가 있다. 현재 줄 바꿈 태그가 없는 상태의 텍스트이다. 여기서 줄 바꿈을 하고 싶은 곳 앞에 을 붙여 넣으면 된다. 태그는 앞에서 배웠던 태그들과는 다르게, 닫는 태그 없이 여는 태그만 쓰면 된다.이 필요 없다는 이야기이다. 위처럼 태그를 넣으면, 줄 바꿈이 된다.만약 줄을 더 띄우고 싶다면, 원하는 만큼 을 넣으면 된다. 세 개를 넣었더니 줄이 세 번 띄워진다. 태그 외에 줄 바꿈을 할 수 있는 또 하나의 태그가 있다.단락 태그인 태그이다. 사이에 단락으로 구분 짓고자 하는 텍.. 더보기
HTML 문법(밑줄, 강조 태그) | 생활코딩 강의 복습 | 프로그래밍 공부 HTML에 관한 글을 써보았다. 파일을 열어보면 단순한 텍스트의 배열로 나온다. 자, 이제 우리가 어떤 텍스트를 강조하고자 굵은 글씨로 쓰고 싶다면?strong 태그를 이용하면 된다.강조하고자 하는 텍스트를 사이에 넣는다.이것이 기본적인 html의 문법이다. 이렇게. 결과는? 우리가 강조하고자 하는 부분이 굵게 표시된다. 그러면 밑줄을 긋고 싶다면?underline 태그를 이용하자. 사이에 텍스트를 넣는다. 이렇게. 결과는 텍스트에 밑줄이 그어져 나온다. 더보기
HTML 파일 생성하기 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 기본적인 HTML 파일을 생성해보자. 에디터에서 파일(1_1.html)을 생성한 뒤 더보기

티스토리툴바