본문 바로가기

Frontend/CSS31

CSS를 이용해 오디오와 비디오를 넣어보자 HTML5이전에는 웹 페이지에서 오디오와 비디오를 실행시키기 위한 표준안이 없어서 플래시나 외부 플러그인에 의존했어야 했다. HTML5에서는 이러한 불편함을 해소하기 위하여 표준안을 만들었다.  audio태그를 이용하기 위해서는 controls를 반드시 삽입해야한다. 오디오를 위의 방식과 같이 삽입할 수 있지만, 브라우저마다 지원하는 오디오 타입이 다르기 때문에 다른 방식으로도 적는다. source  src="오디오위치.ogg" type="audio/ogg"> source  src="오디오위치.wav3" type="audio/wav">Video비디오의 경우에도 브라우저마다 지원하는 타입이 다르기 때문에 다른 방식으로도 적는다.   src="비디오위치.ogv" type="video/ogv">  src="비.. 2024. 7. 7.
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.
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.

티스토리툴바