본문 바로가기

Programming268

[CSS] overflow, position, flow * overflow : 엘리먼트의 내용이 영역을 넘는 경우에 표시 방법 설정 - hidden : 영역을 넘는 내용은 표시하지 않음 - scroll : 영역에 스크롤 표시 예) 동해물과 백두산이 마르고 닳도록...(생략) 남산 위에 저 소나무 철갑을 두른듯....(생략) * position : 영역의 위치 이동 - relative : 영역의 원래 위치에서 지정된 값 만큼 이동. 예) 아래에서 보는 바와 같이 첫 번째 영역은 원래 위치에서 우측 하단으로 각각 100px 이동하였지만, 두 번째 영역은 첫 번째 영역이 이동하기 전의 영역에만 영향을 받고 있음. * flow : 영역을 지정된 위치로 이동시킴, 해당 영역은 다른 엘리먼트의 흐름에서 제외됨. 그러나, 다른 엘리먼트의 내용을 가리지 않음 예) 아래에서.. 2012. 11. 30.
table 태그와 자손 선택자 주의사항 table 태그의 요소를 선택할 때는 자손 선택자를 사용하는 것이 좋지 않다. Name Region OTEP 서울 코드를 실행하면 아래와 같이 실행된다. 대부분 th 태그에 빨간색이 적용되는 것으로 예상했을 테지만, 실제로는 스타일 속성이 적용되지 않는다. 이 문제는 요소 검사를 사용해 HTML 페이지의 계층 구조를 살펴보면 원인을 알 수 있다. table 태그에 tbody 태그가 자동으로 추가되어 table>tbody>tr>th 선택자를 사용해야 색상을 적용할 수 있다. 소스코드와 실행결과가 달라 혼동되므로 table 선택자에 스타일을 적용할 때는 자손 선택자를 사용하지 않는게 좋다. 2012. 11. 30.
시맨틱 태그 HTML5에서 새롭게 등장한 시멘틱태그 HTML5의 가장 큰 특징은 웹페이지 구조를 만들어주는 태그의 등장입니다. 오늘은 지난번 HTML5의 개념정리 포스팅에 이어 HTML5로 레이아웃을 짜는 방법에 대해 자세히 알아보려고 합니다. 기존에는 div에 id 또는 class를 주어서 구조를 설계 했죠. 그런데 html5로 넘어오면서 이를 대체할 태그들이 등장했답니다. 쉽게말해서 "div 를 여러갈래로 구조화 시켜서 조금 더 짜임세 있는 코딩을 하자~!" 라는 의도로 파악하시면 좋겠네요. 다음으로 새롭게 등장한 태그들부터 하나하나 알아보겠습니다. 시맨틱태그 내용 웹 페이지의 헤더를 만들때 사용합니다. (주로 로고영역) 웹 페이지의 하단을 만들때 사용합니다. (주로 카피라이트 영역) 웹 페이지의 메뉴를 만들때 .. 2012. 11. 30.
eq, ne, empty 사용 값이 같은가? 에 대한 비교로 보통 "== ", "!=" 을 많이 사용한다 이는 jstl에서도 마찬가지면 숫자와 문자 구분은 따움표로 구만해서 사용하는데 이대신 eq, ne를 사용하는것과 list, map 같은 객체가 값이 있느냐 없느냐의 구분하는 용도로 empty 를 사용 할 수 있다. 사용법은 아래와 같다 =============================================== Sample ============================================= Ex) eq (==) 1. // null 2. // 숫자 3. // 문자 Ex) empty = // list, map 객체 등 = // 비어 있지 않은 경우 Ex) ne (!=) 1. // null 2. // 숫자 3. .. 2012. 11. 30.

티스토리툴바