CSS60 css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 표를 꾸밀 때 쓰이는 프로퍼티에 대하여 알아보도록 하겠습니다. 우리가 웹 페이지를 볼 때 박스나 리스트 말고 또 하나의 구성 요소가 바로 표죠? 이 표도 css를 이용해서 꾸밀 수가 있습니다. 그래서 이번 포스팅에서는 표를 꾸밀 때는 어떤 프로퍼티를 쓰는지 간단히 알아보는 시간을 가져보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 표 꾸미기 프로퍼티 우선 우리가 표를 꾸미기 전에 순수 html만 이용하여 표를 만들면 이렇게 나옵니다. 2023 1학기 성적 이름HTMLCSS 합175169 최민수8070 박보영9599 이런 식으로 작성할 수 있습니다. 그리고 결과 화면은 이렇게 나옵니다. 이제 이 표를 가지고서 꾸미.. 2023. 4. 24. css 리스트 제어 프로퍼티로 카페 메뉴 만들기 css 리스트 제어 프로퍼티로 카페 메뉴 만들기 네 안녕하세요, 이번 포스팅에서는 리스트 제어 프로퍼티를 이용하여 직접 메뉴판을 만들어보도록 하겠습니다. 직접 해보지 않으면 몸이 받아들이는 속도가 다소 느릴 수 있기 때문에 직접 만드는 것을 보여드리고자 이 포스팅을 쓰게 되었습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 메뉴 만들기 : ul태그 이용 제일 처음 할 일은 리스트를 만드는 것입니다. 그래서 해당 리스트는 ul 태그를 이용해서 만들도록 하겠습니다. 이런 식으로 만들어봤습니다. Home Espresso Cappuccino Cafe Latte F.A.Q 일단 html의 기본 뼈대를 만들었습니다. 이런 식으로 제작을 했으며, 이제 뼈대가 생겼으니, 본격적으로 꾸며보도록 하겠습니다. 2. 셀렉터.. 2023. 4. 24. css list-style 단축 프로퍼티에 대하여 알아보기 css list-style 단축 프로퍼티에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 리스트 관련 단축 프로퍼티에 대하여 알아보도록 하겠습니다. 우리가 항상 여러 가지 프로퍼티를 써보면 늘 단축 프로퍼티가 존재해 왔었습니다. 리스트 역시 단축 프로퍼티가 존재합니다. 그래서 오늘은 그러한 단축 프로퍼티를 알아보려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 리스트 단축 프로퍼티 - list-style 리스트 단축 프로퍼티는 말 그대로 제가 이전까지 포스팅했던 그 프로퍼티들을 한 번에 쓸 수 있도록 만들어둔 프로퍼티입니다. 그래서 우리가 불편하게 이것저것 여러 개를 붙여가며 쓸 필요가 없습니다. 사용 방법은 이렇습니다. ul { list-style : list-style-type list-st.. 2023. 4. 24. css list-style-image 프로퍼티로 이미지 마커 만들기 css list-style-image 프로퍼티로 이미지 마커 만들기 네 안녕하세요, 이번 포스팅에서는 이미지 마커를 만드는 방법에 대하여 알아보도록 하겠습니다. 이전 포스팅에서도 마커의 종류를 다양하게 쓸 수 있다는 것을 보여드렸는데, 그 마커들 외에도 우리가 사용하고 싶은 이미지를 마커로 이용할 수도 있습니다. 그때 사용하는 프로퍼티입니다. 그럼 이제 이를 어떻게 사용하는지 알아보도록 하겠습니다. 1. list-style-image 사용하여 이미지 마커 만들기 이 마커를 사용하게 되면 우리가 원하는 이미지를 마커로 사용할 수 있게 됩니다. 사용 방법은 아래와 같습니다. ul { list-style-image : url("media/marker.png") } 이런 식으로 해당 이미지의 주소를 적어서 나타.. 2023. 4. 24. 이전 1 2 3 4 5 6 7 ··· 15 다음