본문 바로가기

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] 웹 상에서 원하는 폰트를 적용해보자 | 폰트 다운로드 | google fonts 윈도우/맥OS 상에 기본으로 설치되어 있지 않은 폰트를 웹상에서 구현하고 싶을 때, google fonts를 참고하자. fonts.google.com [ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ](https://fonts.google.com) 원하는 폰트를 검색하고, 오른쪽에 select this style을 클릭. 원하는 몇가지의 폰트를 선택한 뒤, 오른쪽 위의 아이콘을 클릭하면, 선택한 항목의 폰트에 대한 html/css embed 코드가 생성된다. 복사한 뒤, html사이에 다음과 같은 형식으로 복붙한다. 이를 완성하면, html 실행시 해당하는 폰트가 없으면.. 더보기
[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의 약자이다.코드를 보면, 안에 가 있는 것을 볼 수 있다.와 같은 항목들을 어디서부터 어디까지 연관이 있는 항목인지를 구분하는 태그가 .. 더보기
HTML 문법(줄바꿈 태그 <br> vs <p>) | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* HTML의 줄 바꿈 태그를 알아보자.우선 가장 기본적인 줄 바꿈 태그로는 태그가 있다. 현재 줄 바꿈 태그가 없는 상태의 텍스트이다. 여기서 줄 바꿈을 하고 싶은 곳 앞에 을 붙여 넣으면 된다. 태그는 앞에서 배웠던 태그들과는 다르게, 닫는 태그 없이 여는 태그만 쓰면 된다.이 필요 없다는 이야기이다. 위처럼 태그를 넣으면, 줄 바꿈이 된다.만약 줄을 더 띄우고 싶다면, 원하는 만큼 을 넣으면 된다. 세 개를 넣었더니 줄이 세 번 띄워진다. 태그 외에 줄 바꿈을 할 수 있는 또 하나의 태그가 있다.단락 태그인 태그이다. 사이에 단락으로 구분 짓고자 하는 텍.. 더보기
HTML 문법(제목 태그) | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* HTML에서의 제목 태그를 달아보도록 하자.형식은 부터 까지 크기에 따라 분류된다.아래처럼 사이에 제목을 써보자. 결과는 다음과 같다. 이 가장 큰 글자 크기로 써지고, 숫자가 줄어듬에 따라 크기도 줄어든다. 더보기

티스토리툴바