본문 바로가기

CSS🔧/css 선택자&가상클래스,공통클래스7

CSS :nth-child(n) even, 2n 짝수번째 설정 1열로 나열된 컨텐츠들을 짝수요소만 오른쪽으로 가게 재배치 공통클래스로 동알한 클래스에 :nth-chiled(even) .about_page .desc_wrap:nth-child(even) .desc_img { float: right; } .about_page .desc_wrap:nth-child(even) .txt_wrap { float: right; } 또는 공통클래스로 동알한 클래스에 :nth-chiled(2n) .about_page .desc_wrap:nth-child(2n) .desc_img { float: right; } .about_page .desc_wrap:nth-child(2n) .txt_wrap { float: right; } nth-child 는 형제요소들의 선택이 가능한 가상선택자.. 2022. 10. 28.

css :not 가상클래스 부정선택자 :not() 선택자 정의 한요소에만 적용 css 스타일을 특정 선택자만 제외하고 싶을때 사용 예시 /* input type text 중 .input_file은 제외 */ .inquiry_page .inquiry_area input[type=text]:not(.input_file) { width: 100%; height: 45px; background: #f8f8f8; border: none; padding: 0 15px; } 문의작성표에 input 타입 text 에 공통 클래스로 디자인을 주었다. /* input type text 중 .input_file은 제외 */ .inquiry_page .inquiry_area input[type=text]:not(.input_file) { width: 100%; .. 2022. 10. 10.

css 선택자 정리 선택자란 ? 무언가에 스타일을 주고자 할때 css 시트에서 대상을 정해준다. 전체선택자 *{margin: 0; padding: 0px;} * 문서무든 요소에 적용(초기화 시에만 한방에 사용) 여러요소 동시선택 h1,h2,h3,h4,h5,h6 {font-weight: normal;} ,로 분리 아이디선택자 #header 아이디선택자는 한 페이지에 한번만 사용 가능 클래스선택자 .logo 아이디 선택자 아래 .으로 구분 많은 요소에 스타일을 한꺼번에 지정하고자 할때 유형선택자 p { color: red; } 요소 이름 하위선택자 #hearder .logo .img 부모요소부터 안으로 하나씩 적어들어감 자식선택자 #container>p 탭키 한번인 요소 직계자식인 모든 요소에 적용 (직계이후 자손 불포함) 자.. 2022. 10. 9.

CSS 공통클래스 [class^=] & background 아이콘 공통 변경 섹션에 공통으로 들어가는 아이콘이 여러개 있을경우, 공통클래스 [class^=] 을 사용하여 쉽게 적용해보자. 여기 아이콘에 커서를 가져다대면 색상이 변하게끔 만들어보자. 1. 공통클래스를 이용할 것이므로 html에서 태그에 class를 지정 먼저 여러개가 들어가야하기 때문에, html 에서 img 가 아닌 css에서 background로 처리한다. html 예시 유튜브 2. 아이콘 위치잡기 .main_all_game .game .sns { position: absolute; right: 20px; top: 220px; } 먼저 아이콘이 들어갈 위치를 잡아준 다음 3. css에서 공통클래스 주기 [class^=icon_sns] { width: 20px; height: 20px; display: inlin.. 2022. 10. 2.

CSS :nth-child(n) 가상선택자 nav 설정 nth-child 란? 부모의 n번째 자식 요소 선택을 말한다. 예제 고고 상단 헤더 메인메뉴(드롭박스)를 펼쳤을때 서브 메뉴(depth02) 나오게 하기 자 이렇게 BRAND 안에 하위 메뉴들이 나올 수 있도록 ul 태그안에 li를 셋팅해준다. HTML 삽입 미리보기할 수 없는 소스 BRAND OUTBACK STORY BEEF STORY STEAK ACADEMY OUTBACK CSR PRESS CENTER 그리고 css 로 넘어가서 상단 메인메뉴에 마우스를 가따대면 하위 메뉴가 나올수 있도록 hover 를 지정해준다. #header .gnb_wrap .gnb>li:hover .depth02_wrap { display: block; } 그다음 하위메뉴 를 nth 가상 자식선택자 로 지정해준다 (mragi.. 2022. 9. 18.

css before, after 가상선택자 정리 가상선택자를 왜쓸까? HTML에서 CSS class 가 지정되지 않았을경우 가상선택자를 이용해서 꾸미는게 가능하다 (맞나..?) :before, :after 특정요소의 앞(:before) 또는 뒤(:after)에 지정한 내용 (텍스트나 이미지)를 추가할 수 있음 인라인 요소로 가짜속성이기 때문에 content="" 필수 속성으로 들어감!!! (after 줄때 html에 표기하지 않고도 css의 부모 요소에 :after 삽입) 구글정의 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있음 :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 링크로 다른 페이지로 이동한후 링크컬러 변경 a:visited {c.. 2022. 9. 4.

CSS 선택자 우선순위 점수 선택자 우선순위 css에서 같은요소가 여러 선언의 대상이 됬을때 우선적으로 적용할것을 결정 1. 점수가 높은 선언이 우선 2. 동점시 가장 마지막에 작성된 선언이 우선 !important : 10000점 / 남용금지 (인라인스타일로 적용된 내용 변경시에만 사용) 금기! 진짜 정 위급한 상활일때만 인라인 스타일 1000점 아이디 선택자 100점 클래스 선택자 10점 태그 선택자 1점 (가상요소 before, after 은 1점) .section01 + p 는 몇점일까? 클래스 선택자 10점 + 태그 선택자 1점 = 11점 추가 - 가상클래스 선택자 (:hover, :first-child, :nth-child(n), :last-child )10점 - .gnb>li:not(:first-child) 첫번째를 제.. 2022. 9. 4.

이전 1 다음

티스토리툴바