컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

JSTL 중 Core에 해당하는 태그는 가장 많이 쓰이는 태그들을 모아뒀다. 일반적으로 자바의 fo each, if, switch 등의 기능을 태그만으로 구현 가능하도록 만들었다. 사실 Core에 해당하는 태그는 많긴한데 여기서는 가장 많이 쓰이는 자바의 for each, if, switch에 대응하는 태그 3개만 알아볼 것이다. : 자바의 for each 태그를 이용하면 편리하게 java의 for each 기능을 이용할 수 있다. 예를 들어서 아래와 같이 리스트를 다른 jsp 페이지로 전달하는 코드가 있다고 생각해보자. 첫번째 jsp 파일 기존에는 리스트에 있는 요소들을 출력하기 위해선 자바를 이용해야 했다. 하지만 를 자바 코드 없이도 손쉽게 출력이 가능하다. 아래와 같이 items에 전달된 리스트를..

JSTL이란? JSP 페이지에서 자바 코드 사용없이도 데이터를 출력해서 코드를 간결하게 만들기 위한 것이다. 자바 대신 EL을 이용해서 전달된 데이터를 출력하는 것에 대한 이미 포스팅한 적이 있다. 하지만 이러한 EL도 한계는 존재한다. 간단한 연산이나 데이터 출력은 EL로도 가능하지만 조금 더 복잡한 계산의 경우는 힘들다. 결국 JSP의 HTML 코드에서 완벽하게 자바 코드없이 돌아가게 하기 위해 만들어진 것이 JSTL이다. JSTL은 개발에서 많이 쓰이는 기능들을 태그들을 모아서 만든 라이브러리다. 태그 라이브러리의 종류 JSTL태그 라이브러리는 크게 5개로 나뉜다. 종류는 5가지로 나뉘지만, 실제로 사용하게 되는 것들을 대체로 Core, Function, Formatting이다. 이름 설명 Core..

visibility 1번 박스 2번 박스 3번 박스 visibility는 해당 요소의 공개 여부를 결정하는 속성이다. visibility를 속성으로 부여하고 속성값으로 'hidden'을 주면 해당 요소는 화면에서 숨겨진다. 하지만 눈에는 보이지 않지만 실제로는 공간을 차지한다. 예시에선 visibility가 hidden된 box2가 눈에 보이진 않지만, 위치는 차지하게 된다. z-index 1번 박스 2번 박스 3번 박스 각종 요소를 배치하다보면 해당 요소들이 겹칠 수 있다. 이때 'z-index'값을 설정하면 해당 요소들이 겹쳤을 때 어떤 요소가 앞에 올지 정할 수 있다. 'z-index'값이 높을 수록 해당 요소가 가장 앞으로 나오게 되어있다. 예시에선 3번 박스의 'z-index'값이 가장 크므로 ..

position이란? 웹 문서 안의 각종 요소들을 자유자재로 배치해주는 속성이다. position 속성을 이용하면 텍스트, 이미지 등 여러 요소를 원하는 위치에 배치가 가능하다. position의 속성값 각 요소는 position의 속성값 4개 중 한 개를 부여할 수있다. 그리고 해당 요소는 right, left, top, bottom을 이용해서 위치를 이동시킬 수 있다. 속성값 설명 static static은 position 속성의 기본 값. 해당 스타일이 적용된 태그의 위치에 고정. 요소들의 위치를 옮길 수 있는 top, left, right, bottom 등은 사용 불가 relative static 속성과 마찬가지로 해당 스타일이 적용된 태그의 위치에 나타남. 하지만 static과 달리 고정이 아님..

웹페이지 구성시 CSS를 활용하면 더욱 다양한 레이아웃을 구성할 수 있다. box-sizing 첫번째 박스입니다. 두번째 박스입니다. 세번째 박스입니다. 웹 문서에서 여러 요소 배치시 요소의 너비를 계산해야 한다. 하지만 'width' 속성을 이용할 경우 'content'영역의 너비만 적용된다. 'box-sizing'을 이용하면 'content+padding+border'합쳐서 한 번에 너비를 지정할 수 있다. 속성값을 'content-box'로 주면 콘텐츠 영역만 너비 값으로 사용한다. 속성값을 'border-box'로 주면 콘텐츠 영역+패딩영역+테투리까지 너비 값으로 사용한다. float 속성 박스 입니다. 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. 본문입니다.본문입..

HTML 문서 내에 목록을 만들 때 목록 앞에 오는 불릿을 CSS로 바꿔줄 수 있다. 'list-style-type'을 속성으로 주고 다양한 속성값을 줘서 불릿 모양을 바꿀 수 있다. 리스트 { list-style-type: 속성값; } 국어 수학 영어 국어 수학 영어 속성 값을 다양하게 줘서 불릿을 바꿀 수 있다. 속성 값을 다음과 같다. 속성 값 설명 예시 decimal 1로 시작하는 십진수 1, 2, 3, 4, 5 ...... 10, 11 decimal-leading-zero 앞에 0이 붙는 십진수 01, 02, 03, 04, 05 ..... 09, 10, 11 lower-roman 소문자 로마 숫자 ⅰ, ⅱ, ⅲ ... ⅹ upper-roman 대문자 로마 숫자 Ⅰ, Ⅱ, Ⅲ ..... Ⅸ, Ⅹ ..

텍스트에 적용할 수 있는 스타일은 굉장히 다양하다. This is HTML, CSS

문서를 쓰다보면 하나의 요소에 여러 개의 스타일이 적용될 수 있고 그로 인해 충돌한다. 이 경우 CSS 적용 우선 순위에 따라 정해진다. 1순위. 인라인 스타일 p 태그입니다. id나 class로 스타일을 적용해도 태그에 직접 'style' 속성값을 주는 인라인 스타일이 가장 먼저 적용된다. 2순위. id 스타일, class 스타일 안녕하세요! 한 태그에 id값과 class 값이 동시에 부여되고 적용될 경우 id의 스타일을 우선 적용한다. 위 예시 같은 경우는 최종적으로 글자 색상이 'red'가 아니라 'blue'가 적용된다. 3순위. 태그 스타일 p 태그입니다. 위와 같이 일반적으로 태그를 선택자로 지정해서 스타일링 하는 경우 id와 class에 밀린다. 최 후순위로 스타일이 적용된다.