본문 바로가기
반응형

전체 글53

HTML Table Padding & Spacing | 셀 공간 조절 ​HTML 표는 padding과 spacing 기능을 통해, 셀 사이의 공간을 조절할 수 있다.  ​셀 padding은, 셀의 가장자리와 셀 내용 사이의 공간을 말한다. default 값으로, 0으로 맞춰져 있고, padding을 더해주기 위해선, CSS의 padding 속성을 사용 하면 된다.  padding 값을 좀 더 세밀하게 조절하고 싶다면, 아래와 같은 padding 속성을 이용하면 된다. padding-toppadding-bottompadding-leftpadding-right ​cell spacing은 셀과 셀 사이의 빈 공간을 말한다. default 값으로, 2 pixels 이 기본 적용되고, 이를 변경하려면, table 요소에서 CSS의 border-spacing 속성을 사용하면 된다.b.. 2022. 8. 18.
HTML Table Header | 테이블 헤더 구조 | 텍스트 정렬 | 셀병합 Collspan/ Rowspan | 테이블 제목 HTML Header 구조는 이렇다. 한 덩어리의 태그는 1열을 의미하고, 여러 열을 표시하고 싶은 경우 태그를 밑으로 차곡차곡 쌓으면 된다. table header는 default 값으로, 굵은 글씨체 + 센터 위치로 맞춰지며, header 의 위치는 를 어디에 위치 시키는가에 따라 달라진다.  ​Header 의 텍스트 위치를 center 가 아닌, 왼쪽 or 오른쪽 정렬을 해주고 싶다면 CSS의 text-align 속성을 사용 하면 된다.  ​가로 셀 병합은 요소 안에 colspan 속성을 사용 하면 된다. 세로 셀 병합은 요소 안에 rowspan 속성을 사용 하면 된다.  ​전체 테이블에 제목을 달아주려면, 태그를 사용하면 된다. 태그의 위치는 항상 태그 바로 밑에 와야한다.  ​ 2022. 8. 17.
HTML Table Size | 테이블표 크기 조절하기 디스플레이 화면에 테이블표를 맞추고 싶다면, 태그 안에, table style="width:100%"> 와 같은 코드를 넣어주면 된다.  테이블 자체에서 특정 열의 길이만 조절하고 싶다면, 태그 안에다가 style을 넣어주면 된다. 위치는 : 이거나, 퍼센테이지로 width의 value 값을 주는 경우, 상위 태그에서 width를 100% 설정해놔야 원하는 값으로 디스플레이 될 수 있다. (빨강 화살표) 테이블 열 (table row = tr) 의 높이를 재설정 하고 싶다면, tr style="height:200px"> 이런식으로, 태그에 style을 입혀주면 된다.  size 값은 퍼센테이지나 px 값으로 주면 된다. 2022. 8. 16.
HTML Table borders | 테이블표 서식 꾸미기 위와 같은, table border를 만들려면, CSS를 사용하면 된다. table, th, td 요소에 CSS의 border 특성을 추가해주면 된다.  한줄 짜리 테이블 border를 만들고 싶다면, 위와 같은 CSS의 border 코드 작성 후 border-collapse 에 value 값을 collapse 준 코드를 하나 더 짜면 된다. 테이블 표 cell 란에 색상을 넣어줄 수도 있다. 테이블 표의 색상을 지정해주고 싶다면, border-color 특성을 이용해서 색상을 지정해 줄 수 있다.  테이블표에, shape 을 둥글게 주고 싶다면, border-radius 특성을 이용하면 된다.​바깥 테두리의 테이블 박스를 걷어내고 싶으면, table 을 걷어내고, th, td 로만 감싸주면 된다.  다.. 2022. 8. 15.
HTML Tables | 테이블 기본 서식 각각의 테이블 칸은 태그로 시작해서 로 닫힌다. td 는 테이블 데이터를 나타낸다. 와 사이의 content는 테이블 칸 안의 내용이 된다. content 에 들어갈 수 있는 HTML 요소는 : 텍스트, 이미지, 리스트, 다른 테이블 등이 있다.  각 테이블의 행은, 로 시작해서 태그로 끝난다. tr 은 테이블 행을 나타낸다. (table row) 테이블에 카테고리명 (Header) 를 만들고 싶은 경우, 태그 대신, 로 써주면 된다. (table header)기본적으로, 태그 안에 있는 텍스트는 굵고, 가운데 정렬되어 표시된다. 변경하고 싶으면 CSS를 사용하면 된다. 2022. 8. 14.
HTML Favicon | 웹브라우저 탭 아이콘 만들기 **Favicon 은 브라우저 탭의 타이틀 텍스트 왼쪽편에 표시된 아이콘 그림 이미지를 말한다.  Favicon 이미지는 어떤 그림이나 모두 사용 가능 하지만, 작은 이미지 이기 때문에, 심플할수록 좋다. 아래 링크와 같은 사이트에서 나만의 favicon도 만들어 볼 수 있다.  favicon.ico GeneratorPreview Favicon in original size:www.favicon.cc  Favicon 을 나의 웹사이트에 추가하기 위해서는, 등록할 이미지 파일을 웹서버의 root directory (계층적 파일 시스템에서 최상위 디렉토리)에 저장 하거나 root directory에 폴더를 생성해 폴더 안에 이미지 파일을 저장해준다.통상적으로 favicon 이미지를 저장하는 이름은 : "fa.. 2022. 8. 13.
반응형