본문 바로가기
반응형

study/CSS13

선택자 03 - 속성선택자, 가상 선택자 *속성(attribute) 선택자 해당 속성이 있는것들을 바꿀수 있다. [target] { text-decoration: none; } css 기본 문법 속성 선택자 google daum naver master@abc.com li 세곳에 있는 스타일을 바꿀때 속성값 target은 li에만 있다 [속성] 대괄호 를 사용한다. [target] { text-decoration: none;} 여기서 _blank 값이 있는것에만 색깔을 주고 싶을때 [target] { text-decoration: none; } [target="_blank"] { background-color:blue; color:white; } [target="_blank"] { background-color:red; color:white; }.. 2020. 1. 24.
선택자 02 - 자식, 인접형제, 그룹선택자 *자식 선택자 css 기본 문법 선택자 선택자 제목 div의 자식은 3개 h1, h2, nav div > h2 의 > 는 div의 첫번째 자식들 중 h2들 *인접형제 선택자 div h1 + h2{ color:red; } 첫째 css 기본 문법 둘째 선택자 =====> 둘째를 선택 하고 싶을때 셋째 선택자 넷째 제목 div의 둘째인 h2만 바꿀때 div h1 + h2 로 쓴다 + 를 사용 가장 아래쪽 자식들만 선택하고 싶은 경우 div nav ~ h2 { color:red; } css 기본 문법 선택자 선택자 제목 타이틀 ======이것과 타이틀 ======이것을 바꾸고 싶다. nav 아래에 있는 h2들만 선택 하고 싶을때 div nav ~ h2 {} 로 ~ 을 쓴다. tip: 외우는 법은 div nav .. 2020. 1. 24.
선택자 01 - 태그, 전체, CLASS, ID, 자손 선택자 !!공백이 있으면 "자신" 중에 공백이 없으면 "자식" 중에!! *태그 선택자 h1 { background-color:siver; color:red; font-weight:bold; font-size:30px; } p { background:#0f0; font-size:18px; color:#fff; } css 기본 문법 선택자 Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, quis in doloremque non fugiat assumenda necessitatibus maiores, reprehenderit odit dolorum voluptatibus. Iure temporibus deserunt laboriosam sint, nesc.. 2020. 1. 24.
02 기본 문법, 단위em, rem, vw, vh , html 문서에서 원하는 요소(태그)를 선택하여 스타일 변경하기 *단위 웹 작업은 상대값이 효과적. 모니터,스크린용 - 상대값: em, ex, ox, % 작업시 내가 작업하는것과 다른 컴퓨터(해상도가 크거나 작은) 에서 보이는것을 확인해야한다. P는 블록요소라 브라우저 너비 다 사용한다. px과 %는 사용하기 편하다. ex) px로 작업을 했는데 사이트의 전체 크기를 현재보다 10% 늘려달라고 했을때 다 계산해서 20px 일때 10%줄여서 다시 다 코딩해야한다. 그런데, em으로 작성할 경우는 다르다. *em !! em 단위가 쓰여진 곳의 폰트 사이즈 배수 !! body의 기본 사이즈가 16px; 일때 em은 기본값에 곱해준다. 1.5em 일경우는 기본사이즈 16px * 1.5em 1.2em 일경우는 기본사이즈 16px * 1.2em *선택한것만 바꾸고 싶을때 선택 .. 2020. 1. 16.
반응형