본문 바로가기

[IT] HTML & CSS7

html 이미지 배경 투명하게 만들기 배경에 투명도를 주는 방법은 크게 두가지 입니다. background 속성에 css를 이용한 rgba와 엘러먼트에 투명도를 주는 opacity 속성이 있습니다. 두가지의 가장 큰 차이는 속성 background만 투명도를 적용하는 방식과 엘리먼트(element) 전체에 투명도를 주는 방식입니다. rgba 예) 배경색을 투명하게 만들기 div {background-color: rgba(255,255,255,0.75);} 255, 255, 255는 8비트(256) 색상값 0~255까지와 0.75는 투명도 75%를 의미 합니다. 투명도는 0~1.0까지 존재 합니다. opacity 예) 이미지 요소에 50%의 투명도 주는 방법 p img {opacity: 0.5;} 예) p태그 안에 배경 이미지를 넣고 투명하게.. 2020. 1. 2.
html 특수 문자 코드 표 텍스트 글꼴 및 수학 기호 코드 심볼 기호 통화 코드 지적 재산권 그리스어 알파벳등 HTML 문자 코드 표 특수 코드 html 문자표 기호 숫자코드 문자코드 설명 가로 탭 줄 바꿈 케리지 리턴 / 엔터 공백, 띄워쓰기 일반 코드 HTML 문자표 기호 숫자코드 문자코드 설명 공백 ! ! 느낌표 " " " 큰따옴표 # # 우물정자 $ $ 달러 % % 퍼센트 & & & 엠퍼센트/그리고 ' ' ' 작은 따옴표 ( ( 왼쪽 괄호 ) ) 오른쪽 괄호 * * 별표 + + 더하기 , , 쉼표 - - 빼기 . . 마침표 / / 슬러쉬 0 0 숫자 영 1 1 숫자 일 2 2 숫자 이 3 3 숫자 삼 4 4 숫자 사 5 5 숫자 오 6 6 숫자 육 7 7 숫자 칠 8 8 숫자 팔 9 9 숫자 구 : : 콜론.. 2019. 12. 29.
html img 이미지 가져오기 절대경로와 상대경로 html img태그의 src속성 이미지 경로 가져오기에 대한 많은 고민이 있습니다. 다음은 img 태그의 src 속성의 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다. img 태그는 src와 alt 두 가지 필수 속성이 있습니다. 그중 src속성에 경로를 지정하여 이미지를 가져올 때 위와 같이 html 코드를 작성 합니다. img 태그는 종료태그가 없기 때문에 이 아닌 태그 안에서 마지막 종료 >에 ./로 닫아 줍니다. 그럼 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다. 절대경로 파일의 탐색을 위한 접근 경로를 파일 시스템의 루트로부터 시작해 명시해 주는 것을 절대 경로라고 합니다. 인터넷 파일(서버호스트에 업로드된 이미지)의 경우 파일 경로를 전체 url을 사용하여 지정해 줍니다. .. 2019. 12. 29.
HTML 기초 tag 많이 사용되는 태그 정리 html에서 가장 많이 사용되는 태그 정리 head안에 속한 요소태그 meta, title등 body안에 속한 요소태그 h1~6, div, p, ul, ol, span, stong, img, a태그등을 설명 문서 타입을 선언 합니다. html 또는 html 4.01 버전 또는 xhtml 1.0등 유형까지 표현할 수 있습니다. Document Type Definition, 줄여서 DTD 선언이라고도 합니다. html(Hyper Text Markup Language) 문서로 작성한다 선언 body 태그는 문서의 본문을 선언 합니다. 웹문서 본문에는 텍스트, 하이퍼링크, 이미지, 표, 목록등의 HTML 문서가 작성되는 시작을 선언합니다. 내가 작성하는 문서 내용이 들어갈 공간 주석 HTML 문서 작성중 메모가.. 2019. 12. 28.
CSS란 무엇인가? HTML 기초 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 입니다. CSS는 의미 Cascading Style Sheets CSS는 HTML 요소가 표시 되는 방법을 설명합니다. 간단히 style sheets라고 합니다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 많은 글꼴 위치 크기 색상등의 style을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자.. 2019. 12. 28.
HTML이란 무엇인가요? HTML이란 무엇인가에 대하여 소개합니다. 인터넷 서비스의 하나인 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류입니다. 특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성되어 있다. HTML(Hyper Text Markup Language)은 가장 단순한 형태의 웹 언어이며 웹 서버에 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 해당 HTML 문서를 클라이언트로 전송한다. 그러면 클라이언트는 이 웹 페이지를 해석하여 웹 브라우저에 표현해 주는데 이런 웹 페이지를 정적인(Static) 웹 페이지라고 한다. 웹문서를 작성하기 위해서는 단순히 타이핑으로 글자를 입력하면 끝나는 것이 아닌 글자.. 2019. 12. 28.
CSS Scrollbar 스크롤바 꾸미기 색상 바꾸기 변경 방법 홈페이지 쇼핑몰등을 제작후에 배경색상 컨셉에 어울리게 Scrollbar 색상을 변경할 수 있다면 나의 홈페이지 느낌이 조금 더 달라질 수 있습니다. 지원되는 브라우져는 Chrome, Safari 및 Opera와 같은 웹킷 브라우저에서만 가능합니다. ::-webkit-scrollbar 비표준 CSS 요소로 지원 Scrollbar 모양을 수정할 수 있습니다. /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-.. 2019. 12. 28.

티스토리툴바