'웹 언어 배우기/HTML' 카테고리의 글 목록

웹 언어 배우기/HTML (19)

HTML 상대경로와 절대경로 표기법

웹 언어 배우기/HTML 다한(dahan) 2020. 6. 24. 10:30

HTML과 CSS에서 이미지를 넣는 방법은 img와 background:url()로 삽입할 수 있습니다. 이 과정에서 경로를 설정해야 하는데 상대경로와 절대경로를 이용할 수 있습니다. 상대경로 상대경로는 HTML, CSS 파일을 기준으로 경로를 설정하는 방법입니다. 만약, img 태그를 사용하여 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? 일단 img 태그는 HTML에 속하므로 index.html를 참고할 것입니다. index.html 파일은 루트에 있고 jpg 파일은 images 안에 logos에 있습니다. 그렇다면 최종 경로는 './images/logos/xxx.jpg'가 될 것입니다. 마찬가지로 CSS에서 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? index.css 파일은 sty..

HTML nav 태그 사용법

웹 언어 배우기/HTML 다한(dahan) 2020. 5. 25. 07:00

nav 태그 현재 또는 다른 페이지로 이동하는 링크를 하나로 묶어 네비게이션 역할을 합니다. 대표적으로 메뉴, 목차 등에서 사용할 수 있습니다. 사용법 리스트1 리스트2 리스트3 예시 금융서비스 노후준비 및 재무상태 추천금융상품 고객이벤트 직접해보기 참고 사이트 nav 태그 설명 MDN

HTML의 블록요소와 인라인 요소 특징

웹 언어 배우기/HTML 다한(dahan) 2019. 9. 28. 07:00

HTML 태그는 기본적으로 블록 요소와 인라인 요소로 나누어져 있습니다. 이것의 차이점과 특징을 모른다면 CSS를 써먹는 데 있어서 큰 고비가 닥쳐올 것입니다. 가장 기본이 되기 때문에 충분히 이해해야 합니다. 블록 요소 HTML 태그에서 블록 요소는 div, h1, p 태그 등이 있으며 사용 가능한 최대 가로 너비를 사용합니다. 아래 예제를 보면 간단하게 이해할 수 있습니다. See the Pen 블록 요소 by Cho-YoungHo (@choyoungho-web) on CodePen. 위 예제를 통해 크기를 지정할 수 있다는 사실을 알았습니다. 또한, 크기를 지정하지 않으면 width값 auto, height값 auto로 설정되어 있습니다. 블록 요소의 또 다른 특징으로는 수직으로 쌓입니다. 이 말은..

검색엔진에 도움이 되는 meta 태그 사용 방법

웹 언어 배우기/HTML 다한(dahan) 2019. 9. 25. 07:00

meta 태그는 문서 그 자체를 설명하는 태그로 키워드, 설명, 웹 페이지를 제작한 사람 등을 설정할 수 있습니다. 그중 가장 많이 쓰는 meta 태그 위주로 알아보겠습니다. meta 태그 웹 페이지에서 대표하는 키워드를 쉼표를 통해서 나열하는 메타 태그입니다. 웹 페이지에 대한 설명을 설정할 수 있는 태그입니다. 이 메타 태그는 구글에 사이트의 이름을 검색했을 때 나타납니다. 웹 사이트를 만든 사람, 회사 등을 표현할 수 있는 메타 태그입니다. 웹 페이지를 제작할 때 사용했던 툴을 적는 메타 태그입니다. 사용한 툴이란 부트스트랩, 워드프레스와 같이 프레임윅을 말합니다. 검색엔진의 크롤링 및 색인 생성 동작을 제어하는 메타 태그입니다. index는 현재 페이지를 검색에 색인 여부를 설정할 수 있고 fol..

레이아웃 구성할 때 필요한 더미 텍스트, 이미지 사용 방법

웹 언어 배우기/HTML 다한(dahan) 2019. 9. 23. 07:00

더미 텍스트와 이미지는 레이아웃 구성할 때 필요합니다. 어느 정도 내용이 있어야 구조가 잡히기 때문입니다. 모든 에디터에서 사용 가능하며 손쉽게 사용할 수 있습니다. 함께 알아보겠습니다. 더미 텍스트 자신이 사용하고 있는 에디터에 가서 lorem을 입력하고 Tab키를 눌러보면 더미 텍스트가 나옵니다. 또한, lorem숫자를 입력하면 그 숫자만큼의 단어가 나옵니다. 예를 들어 lorem100이라고 입력하면 100 단어의 더미 텍스트가 나옵니다. 더미 이미지 이미지를 생성해주는 placeholder 사이트에 들어가면 사용방법과 함께 에디터에 적용할 수 있습니다. See the Pen dummy text, image by Cho-YoungHo (@choyoungho-web) on CodePen. /350은 가..

html h1 tag "제목 태그"

웹 언어 배우기/HTML 다한(dahan) 2019. 1. 16. 07:00

html에서 글자를 크게 하거나 꾸며주는 태그, 속성은 대표적으로 font-size, color 등이 있습니다. 그 중 이것을 활용하면 검색엔진에 효과적인 태그입니다. 바로 h 태그입니다. h 태그는 부터 까지로 숫자가 클수록 글자 크기가 작아지고 자동으로 줄바꿈이 됩니다. 그리고 이 태그는 html5 이후부터 속성이 없습니다. ※ html5 이전 h 태그는 align 속성이 있었습니다. 이 속성은 글자를 정렬할 수 있습니다. 없어진 계기는 CSS에 똑같은 의미가 있는 text-align이 있어 없어진 것이라고 생각됩니다. h tag별 용도 h tag는 총 6가지가 있습니다. 가장 크게 보여야 하고 돋보이게 해야 하는 제목은 태그를 사용합니다. 따라서 가장 중요한 태그라고 할 수 있습니다. 그러므로 태그..

웹사이트에서 게시판 구조 만드는 방법 "<table> 태그"

웹 언어 배우기/HTML 다한(dahan) 2019. 1. 11. 07:00

웹사이트에서 게시판 구조 만드는 방법" 태그" 웹사이트를 만들게 되면 여러가지 디자인을 할 때 레이아웃을 잡아야 합니다.과거에는 웹페이지의 전체를 표로 잡아 개발했지만 W3C에서 테이블로 레이아웃 개발을 하지말자라고 해서 지금은 보다 간편한(?) 방법으로 레이아웃을 잡고 있습니다. 웹사이트에서는 주로 게시판 구조를 만들 때 사용됩니다. 기본 구조 : 표를 만들기 위해 전체적인 구조를 구성하는 태그 : table row를 뜻하며 한 줄을 의미하는 태그 : table data를 뜻하며 하나하나의 데이터를 의미하는 태그 의미론적 구조 : 텍스트 진하게 표시 : 테이블의 제목부분으로 가장 맨 위로 지정되는 태그 : 테이블의 본문 태그 : 테이블의 끝을 의미하며 가장 아래로 지정되는 태그 수직, 수평 병합 이 때..

다양한 웹 언어에서 사용되는 <form> 태그

웹 언어 배우기/HTML 다한(dahan) 2018. 12. 13. 07:00

제목처럼 다양한 웹 언어(jsp, spring 등)에서 사용되는 태그에 대해 알아보겠습니다. 태그는 웹 상에서 많이 사용되는데 사용자에게 무엇인가 입력하여 값을 전달할 때 사용됩니다. 예를 들어보겠습니다.대부분의 홈페이지는 로그인, 회원가입 메뉴가 있습니다.로그인의 경우 아이디, 비밀번호를 적는 칸이 있죠. 로그인하려면 어떻게 해야 하나요? 바로 그 칸에 아이디와 비밀번호를 적고 로인 버튼을 누르죠? 그리고 아이디와 비밀번호가 틀리면 경고창이 나오면서 다시 입력하라는 메세지가 나올 것입니다. 혹은, 아이디와 비밀번호가 맞다면 로그인이 된 상태의 메인화면이 나올것입니다.이것이 바로 태그의 역할입니다. 태그 사용법 태그는 사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그입니다. 사용자가 아이디와 비밀번..

1
2
3

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바