1. border-spacing: 테두리 간의 간격 조절 * space: (사물들 사이에 일정한) 간격을 두다 border-spacing: 수평거리 수직거리; 표 테두리와 셀 테두리, 셀 테두리 간의 간격을 조절해주는 속성. 1행 1열 1행 2열 2행 1열 2행 2열 ↓ cf 1, 참고로 셀 테두리와 셀 안의 내용 간의 간격을 조정하는 건 padding이다. cf 2, 테두리 간에 벌리고 싶은 수평거리와 수직거리가 같을 경우에는, 하나만 써도 된다. cf 3, border-spacing은 아래쪽의 border-collapse와 같이 사용할 수 없다. 2. border-collapse: 표 테두리와 셀 테두리 합체! * collapse: (경계 등이) 허물어지다 border-collapse: seperat..

1. caption-side: 표에 캡션 넣기 보통 표의 제목을 표시하는 '캡션(caption)' 캡션은 대개 tag의 하위 태그인 으로 많이 표시(예시 1)한다. 예시 1. 방탄소년단 정규 앨범 순서 순서 앨범명 발매일 수록곡 예시 1집 DARK&WILD 2014.08.20. DANGER 2집 WINGS 2016.10.10. 피 땀 눈물, Lie 3집 LOVE YOURSELF 轉 'TEAR' 2018.05.18. FAKE LOVE, 전하지 못한 진심 4집 MAP OF THE SOUL : 7 2020.02.21. 작은 것들을 위한 시, Dionysus ↓ 예시 만들면서 찾아본 BTS 정규 앨범들이다^^;;; 개인적으로 노래만 좋으면 장땡이라 그룹 BTS에 대해서는 잘 모르기에 이참에 월드 스타에 대해 공..

앞에서 했던 1) list-style-type 2) list-style-image 3) list-style-position 을 모두 한꺼번에 표시할 수 있는 방법이 있다. list-style: 속성값; 속성값은 1), 2), 3)에서 쓸 때와 같이 똑같이 작성하면 된다. 예제 1. 예제 2. 목록 관련 스타일 학습한 것을 응용해서 웹 사이트의 세로 메뉴 만들기를 실습해봤다. (더 예쁘게 꾸미려면야 할 수도 있지만, 실습에는 기본만 써보기로^^) 위의 소스 코드를 진짜 메뉴처럼 바꿔보면,

1. list-style-image: 원하는 이미지로 불릿을 대신하기 list-style-image: url('이미지 파일 경로') | none ; 속성값 설명 url('이미지 파일 경로'); 가지고 있는 이미지 파일을 불릿 대신에 사용할 수 있음. none; list-style-type에서 지정한 속성대로 나타남. list-style-type의 단조로운 불릿 대신, 원하는 이미지로 불릿을 만들고 싶을 때 사용한다. 불릿으로 대신 사용할 이미지는 작은 사이즈인 것이 좋다. 아니면, Hi, Daisy! 이 소스 코드가 아래 이미지처럼 불릿이 잘려 나온다....ㅜ (사용한 이미지의 크기는 512px * 512px이다.) 그래서 도대체 얼마나 작은 사이즈의 이미지를 써야 하는지 몰라서 책의 예제에 있는 파일의..

list-style-type: 불릿 모양과 번호 스타일 지정 앗, 이것은 생활코딩 강의 들으면서 해 본 것들이다..!!! 개념 및 내용은 링크로 대체해야겠다ㅎㅎ 그 때, 강의에서 나오지 않는 속성값까지 (굳이굳이) 찾아가며 정리해 놨었으니까??😜 https://from-ms-to-developer.tistory.com/entry/13%EA%B0%95-%EB%AA%A9%EB%A1%9D-%EB%A7%8C%EB%93%A4%EA%B8%B0-ul-ol-li 13강. 목록 만들기 , , 연관된 항목을 나열할 때 쓰는 것. 마치, 안녕. Hello. 你好。 이런 것이나 안녕. Hello. 你好。 이런 것처럼ㅎ.. (모르는 건 아니지만^^) 여기서 순서가 없는 항목을 나열할 땐 tag를, 순서가 있는 항목 from-m..