본문 바로가기

분류 전체보기

 (105)
[CSS] 리스트 스타일 - 가로 리스트 빈 공간 없이 배경색 채우기 가로 리스트를 만든 후에 배경색을 지정하면 리스트의 경계에 빈공간이 발생하고 리스트가 끝나는 지점까지만 배경색이 채워지는 것을 볼 수 있습니다. 이 때, 리스트의 경계를 포함해 가로 리스트가 있는 줄의 배경색을 모두 채우기 위해서는 li의 background-color 속성이 아닌 ul 또는 ol의 background-color 속성의 값을 변경해야합니다. 가로 리스트가 있는 줄 배경색 모두 채우기 아래의 css 코드 처럼 ul의 background-color의 값을 원하시는 색의 색상코드로 지정해주세요. css 코드 ul { background-color : #a1fffa; } li { display : inline-block; color : #0400ff; background-color : #a1ff..
[CSS] 리스트 스타일 - 가로 리스트 만들기, 리스트 색 변경 ※ 목차 0. 들어가기 1. 가로 리스트 만들기 2. 리스트 글자 색 변경하기 3. 리스트 배경 색 변경하기 4. 코드적용 0. 들어가기 아래 코드는 리스트를 출력하는 html 코드입니다. 리스트 첫번째 목차 두번째 목차 세번째 목차 이 코드를 실행하면 아래의 사진과 같은 리스트가 출력됩니다. 이 html파일에는 어떤 css도 적용되어 있지 않습니다. 지금부터 css를 사용해 이 리스트 화면의 리스트를 가로로 출력하고 리스트의 글자색과 배경색을 변경해보겠습니다. 1. 가로 리스트 만들기 리스트를 가로로 출력하고 싶으시다면 display 속성의 값을 inline-block으로 설정하시면 됩니다. css 코드 li { display : inline-block; } 결과 화면 2. 리스트 글자 색 변경하기 리..
[CSS] 리스트 스타일 - 불릿, 숫자 변경 및 제거 ※ 목차 1. 기본 리스트 불릿 변경 및 제거 2. 순서 리스트 숫자 변경 및 제거 1. 기본 리스트 불릿 변경 및 제거 기본 리스트의 불릿 모양은 list-style-type 속성의 값을 변경함으로써 바꿀 수 있습니다. 기본 리스트의 list-style-type의 속성 값은 다음과 같습니다. 값 설명 none 불릿 제거 disc 기본값, 채운 원 모양 (●) circle 비어있는 원 모양 (○) square 채운 사각형 모양 (■) 예시 아래 코드는 list-style-type의 값을 none으로 변경한 코드입니다. html 코드 기본 리스트 첫번째 목차 두번째 목차 세번째 목차 css 코드 li { list-style-type : none; } 결과 화면 불릿이 제거된 것을 확인하실 수 있습니다. 2..
[HTML] 리스트로 목차 만드는 법 ※ 목차 1. 기본 리스트 만들기 : 태그 + 태그 2. 순서 리스트 만들기 : 태그 + 태그 1. 기본 리스트 만들기 : 태그 + 태그 기본 리스트를 만들 때에는 태그와 태그를 사용합니다. 바깥쪽에 태그를 작성하신 후 태그 내부에 태그를 작성해주시면 됩니다. 목차의 수만큼 태그를 입력해주시고 태그 안에 목차로 사용할 텍스트를 입력해주시면 됩니다. 기본 리스트 첫번째 목차 두번째 목차 세번째 목차 2. 순서 리스트 만들기 : 태그 + 태그 목차 앞에 번호가 붙어있는 순서 리스트를 만들 때에는 태그와 태그를 사용합니다. 바깥쪽에 태그를 작성하신 후 태그 내부에 태그를 작성해주시면 됩니다. 목차의 수만큼 태그를 입력해주시고 태그 안에 목차로 사용할 텍스트를 입력해주시면 됩니다. 순서 리스트 첫번째 목차 두번..
[HTML] alert 창 디자인 변경하기 alert 창의 디자인은 SweetAlert라는 외부 스크립트 파일을 사용해 수정하실 수 있습니다. SweetAlert로 alert 창 디자인 변경하기 SweetAlert은 다양한 alert 창 디자인을 지원합니다. 지원하는 디자인과 사용방법은 SweetAlert 사이트에 자세히 나와있습니다. https://sweetalert.js.org/ SweetAlert You've arrived! How lovely. Let me take your coat. Oops! Seems like something went wrong! Delete important stuff? That doesn't seem like a good idea. Are you sure you want to do that? sweetalert...
[HTML] 클릭 이벤트 발생 시 새 창 띄우기 텍스트나 이미지를 클릭했을 때 다른 페이지로 이동하는 이벤트를 만들 때 새로운 페이지가 나타나는 방식은 target 속성의 값을 수정해주면 바꿀 수 있습니다. 새 페이지 출력 방식 수정 : target 속성 새로운 페이지가 나타나는 방식은 target 속성의 값을 수정함으로써 바꿀 수 있습니다. target 속성의 기본 값은 _self로 되어있으며 이는 새로운 페이지가 기존 탭에서 나타나도록 합니다. target 속성에는 다음과 같은 값들이 있습니다. 값 설명 _self 기본값. 기존 탭에 새 페이지 출력 _blank 새로운 창(탭)에 새 페이지 출력 _parent 부모 프레임에 새 페이지 출력 _top 프레임 밖에 새 페이지 출력 아래 코드는 텍스트 클릭 시 새 탭에 네이버 홈페이지를 기존 탭에 다음 ..
[HTML] 텍스트, 이미지 클릭 시 alert 창(메시지) 띄우기 특정 텍스트나 이미지를 클릭했을 때 alert창(메시지창)을 띄우고 싶다면 alert()를 사용하면 됩니다. 1. 텍스트 alert 창(메세지) 띄우기 텍스트를 클릭했을 때 alert 창이 뜨는 이벤트를 발생시키고 싶다면 태그의 href를 #으로 설정해주세요. 그리고 와 같은 텍스트 태그의 옆에 onclick="alert('')"를 추가로 입력해주시면 됩니다. 여기서 alert 내부의 작은 따옴표(' ')에 출력하고자 하는 텍스트 메시지를 입력해주세요. 예를 들어, ' 클릭 ' 코드는 '클릭'이라는 텍스트를 클릭했을 때 'alert창 출력'이라는 메시지를 띄우는 이벤트를 발생시킵니다. 2. 이미지 alert 창(메세지) 띄우기 이미지를 클릭했을 때 alert 창이 뜨는 이벤트를 발생시키고 싶다면 태그의 ..
[PPT] 그림 배경 투명하게 설정 및 자르기 하는 법 ※ 목차 1. 그림 배경 투명하게 설정하기 2. 그림 자르기 1. 그림 배경 투명하게 설정하기 먼저 수정하고자 하는 그림을 선택해주세요. 그러면 위쪽의 메뉴바에 '그림 서식' 메뉴가 나타납니다. 이를 클릭해주세요. 그림 서식을 클릭해 도구들이 나타났다면 '색 ->투명한 색 설정' 순으로 클릭하신 후 마우스 포인터의 모양이 변경되었다면 수정하고자 하는 그림을 클릭해주세요. 왼쪽과 같이 이전에 배경색이 있던 그림이 오른쪽과 배경색이 없는 그림으로 바뀐 것을 확인하실 수 있습니다. 2. 그림 자르기 먼저 수정하고자 하는 그림을 선택해주세요. 그러면 위쪽의 메뉴바에 '그림 서식' 메뉴가 나타납니다. 이를 클릭해주세요. 그림 서식을 클릭해 도구들이 나타났다면 자르기를 클릭해주세요. 자르기 도구를 클릭하고 나면 그..

티스토리툴바