Programming/HTML5 & CSS3 (37) 썸네일형 리스트형 [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. 이미지 링크 만드는 법 링크를 만들 때는 태그를 사용합니다. 태그는 다음과 같은 형태로 작성하시면 됩니다. ' ' 이미지 링크를 만드실 경우에는 태그의 여는 태그와 닫는 태그 사이에 태그를 사용해 .. [CSS] 외부의 css 파일 적용하는 법 html만으로 웹 사이트를 디자인하는 것에는 한계가 있습니다. 그리고 html의 한계를 보완해주는 것이 바로 css입니다. css를 적용하는 방법에는 크게 html 내부에 css를 작성하는 방법과 외부의 css파일을 불러와 적용하는 방법이 있습니다. 이 글은 외부의 css 파일을 적용하는 법에 대해 다루고 있습니다. 외부의 css 파일은 태그를 통해 적용할 수 있습니다. 1. css 파일 만들기 외부의 css 파일을 적용하기에 앞서 사용할 css 파일을 만들어야합니다. css 파일을 만드는 방법은 html과 같습니다. 편집기(메모장, visual studio code 등)를 실행하신 후 css를 작성해주세요. css를 작성할 때에는 가장 먼저 @charset "utf-8";를 작성해주세요. 코드의 문자 .. [CSS] html 내부에 css 적용하는 법 html만으로 웹 사이트를 디자인하는 것에는 한계가 있습니다. 그리고 html의 한계를 보완해주는 것이 바로 css입니다. css를 적용하는 방법에는 크게 html 내부에 css를 작성하는 방법과 외부의 css파일을 불러와 적용하는 방법이 있습니다. 이 글은 html 내부에 css를 작성하는 방법에 대해 다루고 있습니다. html 내부에 css를 작성하는 방법은 css 적용 예제 화면의 배경색과 의 텍스트의 색이 변경된 것을 확인할 수 있습니다. 2. 특정 태그에 직접 css 작성하기 특정 태그에만 css를 적용하고 싶다면 직접 태그에 css를 작성하시면 됩니다. 이 css는 해당 태그에서만 유효하고 다른 태그에는 적용되지 않습니다. 작성 방법은 css를 적용하고 싶은 태그 옆에 style=" "를 입력.. [HTML] 표 테두리 스타일 변경하는 법 표(테이블)을 만들다보면 표의 테두리의 스타일을 변경해야하는 경우가 발생합니다. HTML에서는 속성들에 변화를 줌으로써 테두리의 유형, 두께, 색상을 변경할 수 있습니다. 1. 테두리 유형 변경하기 테두리 유형을 변경하기 위해서는 border-style 속성을 사용해야합니다. border-style의 기본값은 none이기 때문에 처음 표를 만들었을 때 테두리가 없는 표가 출력되는 이유도 이 때문입니다. border-style 속성이 지원하는 테두리 유형은 다음과 같습니다. 유형 설명 none 기본 값. 테두리 없음 hidden 테두리 숨기기 solid 실선 double 이중선 dashed 파선 dotted 점선 ridge 입체적으로 튀어나온 느낌을 주는 선 groove 입체적으로 들어간 느낌을 주는 선 .. 이전 1 2 3 4 5 다음
