본문 바로가기

Programming/HTML+CSS37

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.
block 형식의 태그와 inline 형식의 태그 - block 형식 : block 형식으로 공간을 분할함. 한줄 차지. - inline 형식 : 한줄 안에서 차례차례 위치하는 형식 block형식 태그 inline 형식 태그 div 태그 span 태그 h1 ~ h6 태그 a 태그 p태그 input 태그 목록 태그 글자 형식 태그 테이블 태그 form 태그 2012. 11. 29.
select 태그 select 태그는 여러개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소 태그 이름 설명 select 선택 양식을 생성합니다. optgroup 옵션을 그룹화합니다. option 옵션을 생성합니다. select 태그의 multiple 속성을 이용하면 다중 선택이 가능하다. option태그 Multimedia Tag Connectivity Device Access Animation 3D Transform 2012. 11. 29.

티스토리툴바