쿠카의 개발일지

padding과 margin CSS 속성중에 요소의 여백을 결정하는 속성들에 대하여 알아봅니다. margin 축약 속성이며, 요소의 테두리 외부에 투명한 공간을 확보한다. 값은 1개부터 4개까지 지정할 수 있다. CSS h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */ h4 {margin: 10px;} /* all four margins are 10px */ 속..

.css 파일을 보면 꺽쇠 > 를 종종 보곤 합니다. 이 친구가 등장했을 때는 어떤 역할을 하는지 간단한 예제를 통해 알아보겠습니다. 우선 다음과 같은 html 코드 블럭이 있다고 가정하겠습니다. 이 상황에서, 다음과 같은 css 코드로 꾸며준다면 어떻게 될까요? 하위 선택자 사용 결과는 "안녕1", "안녕2" 모두 빨간색으로 표현됩니다. "아이디가 test인 요소 내 모든 p 요소들의 색상을 빨강으로 해줘"라는 의미가 되기 때문입니다. 반면, 다음과 같은 css 코드로 꾸며주면 "안녕1"만 빨강으로 표현됩니다. 자식 선택자 사용 이렇게 되는 이유는 #test와 p 사이의 꺽쇠(>) 때문입니다. 꺽쇠가 추가됨으로 위 css 코드는 #test 요소 내 p 요소들 중에 자식인 p 요소에 대해서 빨강색을 적용..

HTML 태그 정의 및 특징 태그는 HTML 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용합니다. 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 , 요소와 함께 사용됩니다. 브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다. 요소는 요소의 자식 요소로써, 반드시 모든 , , 요소 다음에 위치해야 합니다. 또한, 요소는 반드시 하나 이상의 요소를 포함하고 있어야 합니다. 와 , 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만,..

table 태그의 기본 구조 table 태그는 단독으로 사용되진 않는다. 자식 요소로 thead, tbody, colgroup, caption, tr, th, td 등의 여러 태그들과 함께 쓰인다. 가장 기본적인 구조는 하나 이상의 tr, th, td 태그들과 함께 구성이 된다. 과목점수 수학 100점 국어 80점 과목 점수 수학 국어 100점 80점 위의 소스는 가장 기본적인 구조인 tr, th, td 태그만 사용해서 적용한 모습이다. 과목 점수 수학 100점 국어 80점 위와 같은 소스라면 thead 영역에 tbody의 각 영역들에 대한 제목을 tbody 영역에는 thead의 제목에 대한 정보나 데이터가 노출될 수 있도록 한다. 1. tr 태그 tr태그는 table 태그에서 필수요소이며 th, td로..