본문 바로가기

Frontend145

CSS에서 display를 사용해서 테이블을 만들어보자 이전 글 중에서 태그를 이용하여 테이블을 만드는 법에 대해 설명했었다. 이번에는 display를 사용하여 테이블을 만들어보고자 한다. display의 table 속성을 사용하면 행, 셀 등의 요소를 자유롭게 스타일링 할 수 있다는 장점이 있다.display: table;태그와 동일안 역할을 한다. display: table-row;태그에 해당된다.display: table-cell;태그에 해당된다.  내용 내용 내용 내용 내용 내용  Empty-cellsempty-cells: show | hide;테이블에 빈 셀이 있을.. 2024. 7. 7.
CSS에서의 배치 방법 CSS에서의 배치란 HTML태그가 출력되는 위치를 정하는 것을 의미한다. 가장 기본적인 배치의 경우 블록태그와 인라인태그를 기준으로 정한다. 블록태그는 블록박스로 다루며, 한 줄을 전부 차지하여 옆에 다른 태그를 배치할 수 없다. 인라인태그(img, br, sup, span, label, input, textarea, button)는 인라인박스로 다루며 컨텐츠가 크기의 기준이 되어 옆에 다른 태그가 올 수 있다. Display display를 이용하면 디폴트 박스 유형을 무시하고 HTML 태그의 박스 유형을 다르게 지정할 수 있다. display: none;으로 설정할 경우에는 해당 영역이 유지되지 않고 화면에서 사라진다. (*visibility: hidden;의 경우에는 영역이 유지된다.)display.. 2024. 7. 7.
HTML5의 문서 구조화 HTML5이전까지는 웹페이지의 구조를 표현하는 태그가 없었기 때문에 div태그나 table 태그를 이용하였지만 문서의 구조 파악이 어려웠다. 이를 개선하기 위하여 HTML5에서는 웹 문서를 구조화할 수 있도록 시맨틱 태그(레이아웃 표준 태그, Semantic tag)들이 추가되었다.  코딩쥐의 공부방 홈 태그 방명록 분류 전체보기 HTML CSS .. 2024. 7. 7.
CSS3의 박스모델 Box ModelCSS3는 HTML의 요소를 콘텐츠(content), 패딩(padding), 테두리(border), 여백(margin)으로 구성된 사각형 박스로 다룬다.컨텐츠(content)HTML태그의 텍스트나 이미지 부분패딩(padding)컨텐츠를 직접 둘러싸고 있는 내부 여백테두리(border)padding 외부의 외곽선외곽선(outline)border의 바깥쪽에 그려지는 여백선으로 크기에 영향을 끼치지 않는다. 여백(margin)박스의 맨 바깥 영역으로 테두리 바깥 공간으로 인접한 태그와 만나는 공간Box Style박스의 스타일을 width, height, padding, margin을 통해서 제어할 수 있다. width | heightwidth와 height은 컨텐츠 영역의 width와 heig.. 2024. 7. 7.
CSS에서 배경에 이미지를 넣어보자 이전 문서에서 배경에 그라데이션을 넣는 방법에 대해 작성했었다. 이번에는 배경에 이미지 혹은 색상을 넣어보는 방법에 대해 적어보고자 한다.  background-color배경에 색깔을 지정할 수 있다. 텍스트에 색깔을 지정하는 것과 같이 RGB, HSL 등을 통해 지정이 가능하다.background-image: url('이미지주소');배경에 이미지를 불러올 수 있다. 기본적으로 이미지를 삽입하게 되면 브라우저의 크기에 따라 이미지가 반복해서 출력이 된다.background-repeat: repeat-x | repeat-y | no-repeat;배경의 반복을 설정할 수 있다. repeat-x는 x축으로 반복, repeat-y는 y축으로 반복, no-repeat는 반복하지 않는다는 뜻이다.background.. 2024. 7. 4.
CSS에서 배경에 그라데이션을 넣어보자 점진적으로 색을 낼 수 있게 하는 그라데이션은 linear-gradient, radial-gradient, conic-gradient의 3가지 방법이 있다. 이 중에서 linear과 radial gradient에 대해 알아볼 예정이다.  background: linear-gradient (방향, 시작색, ... ,끝색); 색상이 수직이나 수평 또는 대각선 방향으로 색이 변하는 형태로 방향의 경우에는 각도를 사용해도되며 (0deg, 45deg, 90deg 등...) 방향을 나타내는 to down, to up, to left, to right를 사용해도 된다.background: repeating-linear-gradient(방향, 시작색 너비정도, ... , 끝색 너비정도); repeating을 사용하면 .. 2024. 7. 3.

티스토리툴바