본문 바로가기

Programming/HTML & CSS & JavaScript48

CSS 3일차 - 2일차 정리 및 수정 # CSS 2일차 수정 및 정리      f. 속성명|="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 속성값 뒤에 하이픈(-) 붙은 요소 반환 )         - [속성명|="속성값"] 표현식, 태그명[속성명|="속성값"] 예>   a[href|="naver"]{       }      g. 속성명~="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 공백이 포함된 값 목록에 존재하는 요소 반환 )         - [속성명~="속성값"] 표현식, 태그명[속성명]~="속성값"] 예>   a[href~="naver"]{       } 6. 의사코드 (의사 클래스 (pseudo class ) 와 의사 요소 (pseudo elements))   1) 개념    - 이름안에 어떤 기능인지를 내포하고 있음. .. 2024. 4. 24.
CSS 2일차 - Box Model, box-sizing, margin, padding, border 7. Box 모델 1) 개요 - CSS 상에서 모든 요소( tag )는 box 로 인식한다. 2) 구성요소 Hello world Hello2 Hello3 가. content - 요소의 실제 내용 ( 텍스트, 이미지 등.. ) - 안쪽 여백 다. border - padding 과 content 를 둘러싼 영역 라. margin - 바깥쪽 여백 ==> 크롬 개발자도구에서 확인이 가능하다. ==> 웹브라우저에서는 300px 너비를 맞췄는데 실제 Box Model 에서는 284px 로 보인다. ==> 블럭(block) 레벨은 실제 Box Model 의 너비가 숫자로 보이고 인라인(inline) 레벨에서는 실제 Box Model 의 너비는 auto로 지정되어 보인다. 이유는 블럭레벨은 기본적으로 전체너비를 확보하.. 2024. 4. 23.
CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소 f. 속성명|="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 속성값뒤에 하이픈( - ) 붙은 요소 반환 ) - [속성명|="속성값"] 표현식, 태그명[속성명|="속성값"] a[href|="naver"] { pw 2024. 4. 23.
CSS 1일차 - 선택자 5. CSS 선택자 * DOM 트리 계층구조 - 개별적인 요소를 노드(node) 라고 부른다. element node: tage 의미 text node: 리터럴 값 의미 attribute node: 속성의미 nodelist: 같은 부모의 자식의 모임(배열로 받음) html head body | | title div p span a - href link | | | script div "다음" "daum.net" style | p | "hello" 1) 개념 - DOM 의 요소를 접근(선택)하는 방법. 2) 문법 가. 전체선택자 - * 표현 - DOM 트리에 있는 모든 태그가 선택됨. ex) Hello Hello2 daum world 나. 태그선택자 - 태그명으로 표현 만약에 여러개 표현할떄는 ,(쉼표) 지.. 2024. 4. 22.

티스토리툴바