전체 글221 css 표에 줄무늬 만들기 css 표에 줄무늬 만들기 네 안녕하세요 이번 포스팅에서는 표에 줄무늬를 만들어보려 합니다. 표에 줄무늬를 만드는 이유는 표가 단색으로만 되어있으면 은근히 시인성이 떨어집니다. 그래서 시인성을 높이기 위해서 사용합니다. 그럼 지금부터 어떻게 사용하는지 알아보도록 하겠습니다. 그리고 해당 css를 적용시킬 표는 저의 이전 포스팅에 표 기본 템플릿이 있는데, 아래에 링크를 기재를 해둘테니 참고하여 주시면 감사하겠습니다. 2023.04.24 - [html, css, 자바스크립트/css] - css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 표를 꾸밀 때 쓰이는 프로퍼티에 대하여 알아보도록 하겠.. 2023. 5. 8. css 셀에 배경색과 테두리 효과, 글자 색 변경하기 css 셀에 배경색과 테두리 효과, 글자 색 변경하기 네 안녕하세요, 이번 포스팅에서는 셀 배경색과 셀 테두리 효과, 그리고 글자 색을 적용시키는 방법에 대하여 알아보도록 하겠습니다. 표는 표의 뼈대를 담당하는 테이블과 그 안에 있는 내용을 구성하는 셀이 존재합니다. 그리고 그 셀 역시 제어의 대상이 될 수 있다는 것을 우리는 이전 포스팅들을 통해 알아보았습니다. 그래서 이번에는 셀의 배경색을 지정하고 테두리 효과와 글자 색을 변경하는 방법에 대하여 알아보려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 그리고 이 포스팅은 이전에 작성했던 표 기본 템플릿을 이용하여 실습을 할 것입니다. 관련 링크는 아래에 기재를 해둘테니, 참고해주시면 감사하겠습니다. 2023.04.24 - [html, css, 자바스크.. 2023. 5. 1. css padding, text-align 프로퍼티로 셀 여백 지정 및 정렬하기 css padding, text-align 프로퍼티로 셀 여백 지정 및 정렬하기 네 안녕하세요, 이번 포스팅에서는 셀 여백을 지정하는 방법과 셀 정렬을 하는 방법에 대하여 알아보도록 하겠습니다. 우리가 이전까지 봤던 방법은 셀의 전반적인 큰 틀을 제어하는 것이었습니다. 이번 시간부터는 좀 더 디테일한 부분들을 조정할 수 있는 방법들에 대하여 알아보려 합니다. 그중에서 셀의 여백을 제어하고, 셀 정렬을 하는 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 그리고 이 포스팅은 이전에 작성한 표 기본 템플릿을 가지고서 실습을 할 것이니, 아래 링크를 참고해 주시면 감사드리겠습니다. 2023.04.24 - [html, css, 자바스크립트] - css 표 꾸미기 프로퍼티에 대하여 알아.. 2023. 5. 1. css width, height 프로퍼티로 표 크기 제어하기 css width, height 프로퍼티로 표 크기 제어하기 네 안녕하세요, 이번 포스팅에서는 표 크기를 제어하는 방법에 대하여 알아보도록 하겠습니다. 표 크기를 제어하는 것도 꽤나 중요한 요소입니다. 표의 너비와 높이를 조정해서 구역을 나누어 가독성을 높일 수 있기 때문입니다. 그럼 지금부터 시작하도록 하겠습니다. 그리고 이 포스팅은 이전에 작성했던 표 기본 템플릿을 가지고서 직접 실습을 할 것입니다. 표 기본 html 코드가 있는 페이지를 제가 기재를 해둘 테니, 그곳에서 참고를 해주시면 감사하겠습니다. 2023.04.24 - [html, css, 자바스크립트] - css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 네.. 2023. 5. 1. css border 프로퍼티로 표 테두리 제어하기 css border 프로퍼티로 표 테두리 제어하기 네 안녕하세요, 이번 포스팅에서는 표 테두리를 제어하는 방법에 대하여 알아보도록 하겠습니다. 표 테두리는 표의 경계를 표시하기 때문에 제어는 필수적이라고 할 수 있습니다. 일관된 선으로 표현을 하면 어떤 부분이 어떤 걸 나타내는지 잘 모르기 때문입니다. 그래서 이번 시간에는 그러한 기능을 가진 프로퍼티와 그 사용법에 대하여 알아보려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 일단 우리가 표를 꾸밀 때 사용할 html 코드를 알아야 합니다. 해당 코드와 결과물은 이전에 다뤘던 포스팅에 올려뒀으니, 그 부분을 참고하여 같이 보시면 됩니다. 해당 링크는 아래에 걸어두도록 하겠습니다. 2023.04.24 - [html, css, 자바스크립트] - css 표 .. 2023. 5. 1. 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. 이전 1 2 3 4 5 ··· 28 다음