본문 바로가기

Frontend145

CSS의 선택자(selector) - 4. :target, :not 선택자 관련 글(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택(3)속성선택자(4)가상클래스, 가상요소선택자:target가상선택자 중 하나로 target은 링크 태그()에 사용되어 최종 목적지의 CSS를 활성화시킬 수 있다. id를 사용하여 a태그와 요소를 연결한다.  첫번째 링크 두번째 링크 첫번째 선택 링크 두번째 선택 링크 :not();not셀렉터는 단독으로 사용할 수 있으며 특정 요소가 아닌 모든 요소를 선택할 때 사용된다. 전체 초기화를 한 다음에 not을 사용하여 속성이 변경되면 안되는 항목들에 대해 예외를 주는 방식으로 사용한다. p태그입니다 h2태그입니다 p태그입니다 .. 2024. 7. 7.
CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) 선택자 관련 글(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택(3)속성선택자가상 클래스 선택자 요소:가상클래스{}위치 가상클래스불특정위치에서 순서를 찾아 들어갈 경우 요소를 특정 지을 수 있는 선택자이다. :root최상단에 위치했다는 뜻으로, 속성 선택자 없이 혼자서 사용이 가능하다. 문서 전체에 할당되는 css를 작성할 때 사용한다. :first-child | :first-of-type부모 요소의 가장 첫번째 요소 / 타입의 가장 첫번째 요소 (ex) div>p:first-child : div 부모 밑에 있는 모든 p요소들 중 가장 첫번째 요소):last-child | :last-of-type부모 요소의 가장 마지막 요소 .. 2024. 7. 7.
CSS의 선택자(selector) - 2. 속성선택자 선택자 관련 글(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택속성선택자(attribute selector)에 대해 이전 글에서 간단하게 말하고 넘어갔다. 속성선택자의 경우에는 속성값에 조건을 붙여서 선택할 수 있는데 이에 대해서 설명해보고자 한다. 속성 선택자의 경우 특정 속성에 접근하기 위해서 사용하는데 대부분 input을 사용할 때 쓰인다. 셀렉터[readonly]{}해당하는 셀렉터에 readonly 속성이 있으면 스타일을 적용한다는 뜻이다.셀렉터[value="문자"]{}해당하는 셀렉터의 value 속성이 정확히 "문자"일 때 스타일을 적용한다는 뜻이다.셀렉터[title~="문자"]{}해당하는 셀렉터의 title 속성에 .. 2024. 7. 7.
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.

티스토리툴바