이번의 목표 01. 객체의 컬러를 지정하는 방법에 대해 알아보자 이번 시간에는 CSS를 작성하면서 객체에 컬러를 지정할 때에 사용하는 방법 세가지를 공부해보겠습니다. 01) 저장된 컬러 키워드를 이용하는 방법. 이 값들로는 black, white, blue, red, aqua, lightgreen 등이 있습니다. 100개가 넘는 색상들이 이렇게 이름을 가지고서 저장되어 있습니다. 'css 색상 키워드' 를 검색하시면 다양한 값을 확인할 수 있습니다. 02) html색상표를 이용하여 원하는 색상의 코드를 사용하는 방법. HTML색상표는 네이버에서 검색하면 손쉽게 찾아볼 수 있습니다. 원하는 색을 선택하고 밝기를 조정하는 등의 방법으로 색상을 만들고 코드를 제공받을 수 있습니다. 03) RGB, RGBA 를..

이번의 목표 01. !importnat에 대해 알아보자 02. box-shadow에 대해 알아보자 01. !important에 대해 알아보자 !important 는 해당 요소의 스타일을 지정할때 사용하며 !important가 붙은 스타일은 다른 스타일보다 우선적으로 적용이 되기 때문에 이후에 다른 스타일이 적용된다 하더라도 내가 원하는 스타일로 고정시킬 수 있습니다. 코드 예시는 아래와 같습니다. *{ color:blue !important; } See the Pen Untitled by MeowMeowPuppy (@MeowMeowPuppy) on CodePen. 02. box-shadow에 대해 알아보자 box-shadow는 이름처럼 요소에 그림자를 넣어줄 수 있습니다. boxShadow = x축 - ..

이번의 목표 01. 하위 선택자에 대해 알아보자. 02. 자식 선택자에 대해 알아보자. css 작성할 때에 때때로 하위의 객체들에만 스타일을 적용하기 위해 코드를 쓸때가 있습니다. 예를 들자면 div label { color:red; } 의 형식으로 적곤 하는데 이렇게 하면 해당 div 안에 있는 label은 모두 빨간 글씨가 됩니다. 이렇게 쓰고 싶다면 쓰지만, 혹시나 손주 객체는 그렇게 하기 싫고 자식 객체에만 스타일을 적용 시키고 싶을때에도 방법이 있습니다. id를 사용하는 것도 방법이겠지만, 그렇게 하면 자식 객체에 모두 id를 넣어줘야하니까 차라리 > 키워드를 사용해봅시다. > 키워드는 자식 객체 의 선택자입니다. 공백은 하위 선택자 입니다. div > label{ color:red; } 를 쓰..

이번의 목표 01. caption-side를 이용하여 테이블에 제목을 달아보자 02. empty-cell 을 이용하여 빈 셀을 공백으로 만들어보자 태그에는 를 사용하여 제목을 달아줄 수 있습니다. 이때 기본값은 항상 테이블의 상단에 위치하도록 되어있습니다. 위치를 변경하기 위해서는 caption-side 를 사용하면 됩니다. top, bottom, left, right 로 위치 변경이 가능합니다. 그리고 다음으로 알아볼 것은 empty-cells 입니다. 테이블을 만들때에 필요에 의해서 빈칸을 만들어야 하는 경우가 있습니다. 그런 경우에는 보통 또는 를 이용하여 바로 태그를 닫는데 이렇게 되면 에 걸어둔 스타일이 적용되어 빈칸에 적용된 스타일만 덩그러니 나타나게 됩니다. 이를 아예 공백으로 만들기 위해서..

이번의 목표 01. border-spacing 을 사용해보자 지난 시간에는 태그의 셀 사이의 간격을 없애는 방법을 알아 보았습니다. 이번에는 테두리와 셀 사이의 간격을 조절하는 방법을 알아볼 것입니다. 이를 위해서는 border-spacing 을 이용합니다. border-spacing 을 사용하여 간격의 값을 설정할 수 있습니다. 예시) border-spacing: 10px; 이때에 0px을 설정하는 것으로 border-collapse:collapse 와 같은 기능을 할 수도 있습니다. 하지만 collapse와 다른점은 테두리(border)가 겹치는 곳은 두꺼워 진다는 것입니다. 그렇기 때문에 간격을 없애고자 할 때에는 border-collapse를 사용하는 것이 더 낫습니다. 01. jsp 코드 02...

이번의 목표 01. border-collapse를 사용해보자 태그를 사용하며 자세히 본 사람들은 이미 눈치챘겠지만, table 안의 각 셀 사이에는 공백이 있습니다. 이 공백을 없애기 위해서는 border-collapse 를 사용할 수 있습니다. border-collapse:collapse; 는 셀사이의 공백을 없앱니다. border-collapse:separate; 는 디폴트 값이므로 별도로 입력하지 않아도 됩니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 표(table)의 테두리 사이의 간격 제거 예제 table border-collapse collapse table border-collapse collapse table border-collapse collapse 표(table)의 ..