본문 바로가기

열심히 그리고 잘하기.28

HTML - 14. Table 1. 첫 번째 테이블 목록을 표현했을 때 항상 or 과 의 조합이 필요했듯이, 테이블을 표현하기 위해 여러 태그들의 조합이 필요하다. 조합들은 , , , , , 등이 있다. 테이블은 항상 태그로 감싸 져 있다. 태그 내에 행도 만들고, 열도 만들게 되는 것이다. 한 행을 시작할 때는 로 시작한다. tr은 table row의 줄임말이다. 각각의 셀은 태그 내에 태그를 사용한다. tb는 table data의 줄임말이다. Row 1, column 1 Row 1, column 2 Row 2, column 1 Row 2, column 2 위 코드의 결과 사진이다. 대신에 선은 css에서 추가해 준 것이다. 2. 두 번째 테이블 두 번째 테이블에서는 테이블 열의 제목을 다뤄보겠다. Dog Cat Canine Fel.. 2020. 6. 15.
HTML/CSS - 13. List 1. List 목록을 표현하는 태그는 이다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap, Search까지 목록 아이템 하나하나를 태그로 감싸주고 목록 전체를 태그로 감싸준다. 은 ordered list라는 의미이다. 을 쓸 경우 안에 있는 목록들 앞에 자동으로 numbering을 해준다. 그 반대인 태그도 있다. 태그는 unordered list라는 의미로, 숫자 없는 목록(굵은 점)을 표현해준다. 여기서 주의할 점은 아무 스타일도 넣고 싶지 않다고 태그만 사용해서는 안된다. 목록은 항상 이나 태그로 감싸야한다. ul의 굵은 점이 마음에 들지 않는다면 css를 적용하여 삭제할 수도 있다. 삭제하.. 2020. 6. 15.
CSS - 12-1. margin auto 1. 레이아웃 div { background-color: yellow; margin-bottom: 20px; } .has-width { width: 150px; } inline, block 성질을 앞에서 다뤘는데 거기에 더해 margin의 값(설명)을 하나 더 추가하겠다. block 속성은 원래 좌우 끝 다 차지하는데 width가 부여되면 늘어나지 않게 된다. 이때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있다. .center { margin: 20px auto; } 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼쪽, 오른쪽에 주는 margin이라는 뜻이다. 위 코드에서 처럼 왼쪽, 오른쪽을 auto로 설정할 경우 좌우의 나머지 공간을 균등하게.. 2020. 6. 14.
CSS - 12. Block vs Inline 1. Block vs Inline 대부분의 HTML element(이하 요소)는 block 요소이다. 예를 들어, , , , , , , 등이 모두 block 요소에 해당하는 태그들이다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여 넣을 수 없다는 뜻이다. block 요소와 성질이 반대인 inline 요소도 있다. , , 태그 등이 inline 요소이다. inline은 말 그대로 inline요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다. 첫 번째부터 네 번째까지는 태그 같은 block 요소이다. 노란색 영역이 해당 요소가 차지하는 영역이다. 텍스트는 짧은데 그 이상으로 영역을 차지하고 있는 걸 볼 수 있다. block 요소들은 이런 식으로 항상 새 줄에서 .. 2020. 6. 14.

티스토리툴바