이번의 목표 01. class 속성을 이용하여 스타일을 적용해보자 이전 시간에는 id 속성을 이용하여 스타일을 적용해보았습니다. 이번에는 class를 지정하여 각각의 class에 스타일을 적용하는 것을 해보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 id1 Selector id1 Selector id2 Selector id2 Selector id2 Selector 02. 실행 화면

이번의 목표 01. id 속성을 이용하여 스타일을 적용해보자 이전 시간에는 각각의 태그별로 일괄적으로 스타일을 적용했습니다. 이번에는 구역에 id를 지정하여 각각의 id에 스타일을 적용하는 것을 해보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 id1 Selector id1 Selector id2 Selector id2 Selector id2 Selector 02. 실행 화면

이번의 목표 01. 구역을 지정해서 스타일을 꾸며보자 지난 시간에는 * 을 이용하여 모든 객체에 일괄적으로 동일한 스타일을 적용시켰습니다. 이번에는 각각의 구역에 서로 다른 스타일을 적용하는 것을 해볼 것입니다. 01. jsp 코드 02. 실행화면 01. jsp 코드 tag Selector 서로 다른 색상 태그별로 다른 스타일을 적용 시 사용 tag를 지정해서 적용하기에 동일한 tag에 모두 적용 02. 실행 화면

이번의 목표 01. * (Universal Selector) 에 대해 알아보자 이번 글 부터는 태그에서 사용될 css 에 대해 보다 집중적으로 알아볼 것입니다. 지금까지 배워오면서 어떠한 대상을 선택할때 모든 객체를 대상으로 삼기 위해서 * 을 사용하는 것을 종종 보아왔습니다. 이번에는 이 * 모양이 jsp 내에서 무엇을 뜻하는 것인지, 무슨 기능을 하는 것인지를 알아볼 것입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 모두 같은 색상 전체적으로 동일한 스타일 적용 p태그에도 동일하게 적용 Universal Selector 02. 실행화면

이번의 목표 01. 태그를 알아보자 02. 태그에 태그를 사용해보자. 태그는 태그의 submit 과 같은 기능을 합니다. 즉, 데이터를 전송하는 기능을 합니다. 태그에는 태그를 이용할 수도 있습니다. button과 이미지의 크기를 맞추면 보다 깔끔한 디자인의 버튼을 만들 수 도 있습니다. 01. jsp 코드 02. 실행화면 01. jsp 코드 02. 실행 화면 제가한 실행 화면에서는 과 의 크기를 조절하지 않아서 이질감이 들게 되어있지만, 크기를 조절한다면 훨씬 보기 좋은 디자인이 될 것 같습니다.

이번의 목표 01. 태그와 태그의 차이점을 확인해보자. 이전에 실제 웹페이지 구축시에 태그와 태그의 기능 구분은 거의 동일하게 사용된다 했습니다. 거의 동일하게 사용되고 있지만 정확하게 두 태그가 어떻게 다른지를 알아볼 것입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 div 영역 지정, 영역 분할 div 첫번째 영역입니다. div 두번째 영역입니다. div 세번째 영역입니다. span 영역 지정, 영역 분할 span 첫번째 영역입니다. span 첫번째 영역입니다. span 첫번째 영역입니다. 02. 실행화면 실행화면에서 알 수 있듯이 아무런 속성을 사용하지 않은 는 한줄을 모두 사용하고 은 데이터 만큼한 사용합니다. 웹페이지 구축시에는 둘다 다양한 속성을 이용하여 크기를 조절하다보니 ..