본문 바로가기

Programming/HTML5 & CSS3

 (37)
[HTML] 골격 태그 사용하는 법 HTML 문서를 만들기 위해서는 기본적인 골격 태그들을 알고 있어야합니다. HTML 파일의 기본 골격 구조는 아래와 같습니다. 1. 해당 파일이 html 파일임을 알려줍니다. html 파일의 가장 위에 작성하며 html의 버전을 알려줍니다. 2. 아래 작성합니다. 이 태그는 html 코드의 작성의 시작과 끝을 알려줍니다. lang은 language의 약자로 무슨 언어로 작성되었는지를 알려줍니다. lang="en" 형태로 작성하며 en은 english 즉, 영어로 작성되었음을 알려줍니다. 괄호 속 en 대신 ko를 입력하면 한국어로 작성되었다는 뜻입니다. 3. 태그 내부에 작성합니다. 이 태그에 작성되는 내용은 웹 브라우저의 화면에 출력되지 않습니다. 이 태그가 속한 html파일이 만드는 페이지의 정보와 ..
[HTML/CSS] 웹 개발환경 갖추기 HTML과 CSS로 웹 문서를 만들기 위해서는 웹 편집기를 사용해야합니다. 이 웹 편집기로는 메모장, 노트패드++, 드림위버 등 다양한 프로그램이 있습니다. 어떤 프로그램을 선택하셔도 상관이 없으시나 이 글은 비주얼 스튜디오 코드를 사용해 웹 개발환경 갖추는 법에 대한 내용을 담고 있습니다. 1. 비주얼 스튜디오 코드 설치 비주얼 스튜디오 코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. https://code.visualstudio.com/ 자세한 설치 방법이 궁금하시면 아래 Visual Studio Code 다운로드 및 설치 방법 게시물을 참조해주세요 pururing-log.tistory.com/65 Visual Studio Code 다운로드 및 설치 방법 Visual Studio Code는 윈..
[HTML/CSS] HTML5 와 CSS3 HTML이란? HyperText Makeup Language의 약자로 웹사이트를 제작할 때 사용하는 기본 언어입니다. 이때, Makeup(마크업)이란 tag(태그)를 사용하여 문서의 내용을 작성합니다. 태그에는 여러 종류가 있으므로 개발자의 목적에 따라 알맞은 태그를 선택해 사용할 수 있습니다. HTML vs HTML5 HTML5는 HTML의 5번째 버전이라는 의미입니다. HTML이 처음 개발된 이후로 점점 발전해가면서 이전의 HTML을 업그레이드한 새로운 버전이 나오게 되었고 현재는 HTML5 버전을 사용하고 있습니다. 보통 HTML5를 HTML이라고 많이 부르기는 하지만 이전의 버전과 구별하기 위해 HTML5라고 부르는 경우도 종종 있습니다. HTML5 지원 확인 방법 자신이 사용하고 있는 웹 브라우..
[html/css] 티스토리 표 색깔 변경 하는 법 ※ 목차 1. 색상코드 찾기 2. html 편집하기 0. 예제 html 편집을 통해 표1을 표2와 같이 색을 채워보겠습니다. [표1] A B C E G D F H [표2] A B C E G D F H 1. 색상코드 찾기 html을 편집하기에 앞서 채우고 싶은 색의 색상코드를 알아야합니다. 색상코드는 검색을 통해 쉽게 얻을 수 있습니다. 시간 절약을 위해 색상코드를 얻을 수 있는 사이트의 링크를 첨부하니 더보기를 참조해주세요. 더보기 https://html-color-codes.info/Korean/ search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=%EC%83%89%EC%83%81%EC%BD%94%EB%93%9C%ED%91%9C&oque..
[html/css] 티스토리 썸네일 크기 조절 하는 법 ※ 목차 1. css 수정 2. html 수정 1. css 수정 ctrl + F를 눌러 thum img를 검색해주세요. 여러 개의 thum img가 검색이 되는데 바꾸고자 하는 부분을 골라 수정해주시면 됩니다. ① 블로그 홈의 썸네일을 수정하려는 경우 .post-type-thumbnail .post-item .thum img와 .post-item .thum img의 width와 height를 각각 변경해주세요. 정사각형 모양으로 만들고 싶다면 width와 height를 같게 하면됩니다.(보통 100%나 150px로 입력하시면 적당합니다.) 만약 이미지의 잘림이 발생한다면 margin(여백)을 조절해주면 됩니다. 변경을 마치셨다면 이제 html 수정으로 넘어가면 됩니다. ② 블로그 글의 관련 글의 썸네일을..

티스토리툴바