Programming (63) 썸네일형 리스트형 [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 창이 뜨는 이벤트를 발생시키고 싶다면 태그의 .. [HTML] 텍스트, 이미지 링크 만드는 법 코드를 작성하다보면 텍스트나 이미지를 클릭했을 때 특정 페이지로 이동해야하는 경우가 발생합니다. html에서는 태그를 통해 이러한 이벤트를 발생시킬 수 있습니다. 1. 텍스트 링크 만드는 법 링크를 만들 때는 태그를 사용합니다. 태그는 다음과 같은 형태로 작성하시면 됩니다. ' ' 텍스트 링크를 만드실 경우에는 태그의 여는 태그와 닫는 태그 사이에 텍스트를 입력해주시면 됩니다. 예를 들어, 다음 홈페이지 이동는 '다음 홈페이지 이동'이라는 텍스트를 클릭하면 다음 홈페이지로 이동하는 이벤트를 발생시킵니다. 2. 이미지 링크 만드는 법 링크를 만들 때는 태그를 사용합니다. 태그는 다음과 같은 형태로 작성하시면 됩니다. ' ' 이미지 링크를 만드실 경우에는 태그의 여는 태그와 닫는 태그 사이에 태그를 사용해 .. 이전 1 2 3 4 5 6 ··· 8 다음
