본문 바로가기

CSS33

CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 CSS에서는 선택자를 이용하여 적용할 요소를 선택할 수 있다. 속성선택자, 클래스선택자들에 대해서는 이전 문서에서 설명했었고 그 외의 선택자들에 대해 설명하고자 한다. 더 많은 선택자들은 W3School에서 볼 수 있다.상위요소 하위요소{}하위선택자로 어디에 있든 상관 없이 조건에 맞으면 스타일이 적용된다 (ex) div p{} - div안에 있는 모든 p태그들)상위요소>하위요소{}자식선택자로 부모 요소의 자식 요소에만 스타일이 적용된다. (ex) .div1>p{} - div1 부모클래스 안에 있는 모든 p태그들)최상위요소>상위요소>하위요소{}이런식으로 선택자를 연쇄적으로 사용할 수 있다. 이렇게 사용할 경우 적은 클래스로도 타켓팅이 가능하다.최상위요소.상위요소>하위요소{}선택자를 중첩해서 사용하는 방법.. 2024. 7. 7.
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.
HTML5의 문서 구조화 HTML5이전까지는 웹페이지의 구조를 표현하는 태그가 없었기 때문에 div태그나 table 태그를 이용하였지만 문서의 구조 파악이 어려웠다. 이를 개선하기 위하여 HTML5에서는 웹 문서를 구조화할 수 있도록 시맨틱 태그(레이아웃 표준 태그, Semantic tag)들이 추가되었다.  코딩쥐의 공부방 홈 태그 방명록 분류 전체보기 HTML CSS .. 2024. 7. 7.

티스토리툴바