본문 바로가기

Frontend146

CSS의 width와 height 속성을 알아보자 자주 사용되는 너비(width)와 높이(height)의 경우 웹 요소의 크기를 지정하기 위해 사용되는 중요한 속성이다. 이 속성들은 픽셀(px), 백분율(%), em, rem, vw, vh, cm 등등으로 크기를 지정할 수 있다. width: 값;값을 auto로 설정하게 되면, 부모 태그의 padding 전까지 맞춰서 너비가 지정된다. auto와 100%는 다른 것이기 때문에 사용 시에 유의해야한다. 최소값(min-width: 값;), 최대값(max-width: 값;) 을 설정할 수 있으며, 이를 통해 반응형 디자인을 구현할 수 있다.height: 값; height의 경우 기준이 컨텐츠 기준이다. 따라서 auto로 설정하게 되면 컨텐츠의 기준만큼 높이가 지정된다. 최소값(min-height: 값;), 최.. 2024. 7. 7.
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.

티스토리툴바