HTML & CSS22 선택자(Selectors) CSS , 우선순위 class = . div.box.active = div인데 class가 .box이자 .active인 요소 .box, .active = class가 .box 이거나 .active인 요소 id Selector # => id selector는 #aaa { } 문서상에서 id 값은 단 한개만 존재 해야한다. 겹치면(x) 자손 선택 (자식포함) "공백" 자식만 선택하고 싶을 경우 > 형제(sibling)들을 선택하고 싶을 경우(1) ~ + active class 다음에 오는 모든 li 만 바꿔주고싶을 때 (2)active class 다음에 오는 li 만 바꿔주고싶을 때 + 구조적 가상 클래스 (Structural Pseudo-classes) *pseudo['수도'] 가상 태그:first-child { } 태그:l.. 2021. 4. 3. How to use CSS CSS 를 작성하는방법. 1. 태그를 사용하는 방법. 2.inline 방식을 사용하는 방법 (비추xxxxxx) 악마같은 방법 요소에다가 직접적으로 스타일을 때려박음. 유지보수 측면에서 어려움. 3.link 태그를 사용해서 내가 작성한 CSS 파일 import. (권장) ★ 2021. 4. 3. Sectioning tag *nav *article *section *aside 반드시 문법적으로 첫줄에 헤딩 태그 작성하자. 비록 헤딩으로 작성할게 없어도. (우리눈에 보이지 않게 처리 할 수 있으니까). xxx ... 태그는 문서에 하나만 사용가능. Sectioning tag h1뿐만 아니라 바로 header 태그 가능. 2021. 4. 2. Table 우리의 눈에는 보이지 않게(완성된 그림에서 thead 가 존재 하지 않으니까 그리고 의미론적으로 맞게 마크업을 하는게 맞으니까) , 하지만 스크린리더기로는 읽을 수 있게 해야한다. 2021. 4. 1. ARIA 프론트엔드 개발자에게 있어서 이렇게 마크업을 하는 것이 가장 중요하다. 시각장애인이 스크린리더기로 Previous 에 마우스 커서를 올렸을 경우 aria-label (아리아 레이블) 에 의하여 "Go to previous page" 음성지원이 된다. (훨씬 더 정확하게 메세지 전달을 할 수 있다.) 디자인 시안이 전부 한국어 이면 lang ="ko" aria-hidden = "true" 스크린 리더기로 읽었을 경우 읽지말아라. 정보 컨텐츠로써 가치가 없다고 판단하여서 사용. 스크린 리더기 같은 경우 만약 aria-label 이 없다면 30min 만 읽을 것이다. 사용자가 헤깔 릴 수 있을 것이다. 그래서, Posted 30 minutes ago. .sr-only 우리의 눈에는 보이지 않지만 정확하게 전달.. 2021. 3. 31. image,overflow : hidden img 같은 경우 부모의 width 사이즈가 얼마던 간에 width를 무시를한다. (자기 본디 사이즈를 찾아가는 성격) 그래서 width : 100% 주자. (부모의 width 100%를 따라가겠다) display : inline 임에도 불구하고 width, height 주는 것 이 가능하다. if) 부모의 width 300 height 200 img 본디 사이즈가 400 400 이라고 가정하고 width 100% , height auto 라면 아래의 사진 처럼 된다. 이럴 경우 부모의 요소에 overflow : hidden 을 사용하자 자식의 요소가 넘쳐나면 그 요소는 자른다. img 태그를 사용 할 경우 반드시 src ="" alt ="" 속성을 반드시 추가하자 alt 에트리뷰트는 설정한 이미지가 나.. 2021. 3. 31. html mark up * tip 최소한의 서로 다른 성격의 단위로 쪼개보자 (덩어리 들로 나누자) 태그가 정보컨텐츠로써 어떠한 역할을 하는가? 2021. 3. 31. 이전 1 2 3 4 다음
