본문 바로가기

프론트엔드235

CSS 상속 상속되는 CSS 속성 모두 글자/문자 관련 속성들(모든 글자/문자 속성은 아님 주의) font-style : 글자 기울기 font-weight: 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color : 글자 색상 text-align : 정렬 강제 상속 예제 상속되지 않는 속성을 강제로 상속받도록 설정 HTML CSS .parent{ width: 300px; height: 200px; background-color: red; } .child { width: 100px; height: inherit; /*부모요소로부터 강제 상속*/ background-color:inherit; position: fixed; /*화면에 view port를.. 2021. 4. 13.
속성 선택자 예제 HTML [ABC] : 속성 ABC을 포함한 요소 선택 [type] { color: red; } [ABC="XYZ"] : 속성 ABC을 포함하고 값이 XYZ인 요소 선택 [type = "password"] { color: red; } data 타입 추가 예제 사과 [data-fruits-name]{ color: aqua; } 2021. 4. 13.
가상 클래스 선택자 예제 준비 HTML CSS .box { width: 100px; height: 100px; background-color: orange; transition: 1s; // 속성을 서서히 변화시키는 속성 } ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택. .box:hover { width: 300px; background-color: royalblue; } ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 .box:active { width: 300px; background-color: royalblue; } ABC:focus : 선택자 ABC 요소가 포커스되면 선택 input:focus{ background-color: orange; } ta.. 2021. 4. 13.
기본 선택자 * : 전체 선택자 모든 요소를 선택 * { color: red; } ABC : 태그 선택자 태그 이름이 ABC인 요소 선택 li { color: red; } .ABC : 클래스 선택자 HTML class 속성의 값이 ABC인 요소 선택 .ABC { color: red; } #ABC : 아이디 선택자 HTML id 속성의 값이 ABC인 요소 선택 #ABC { color: red; } 2021. 4. 12.
CSS 선언 방식(link, import) link 방식: 병렬 방식(한번에 가져와서 처리) 태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식 import 방시: 직렬 방식(순서대로 처리) CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 @import url("./box.css"); 고의로 해당 CSS파일이 늦게 적용되기를 바랄 때 유용하게 사용 2021. 4. 11.
특정 태그에 데이터를 지정하는 방법 data 속성, defer 속성 data속성으로 해당 데이터 가져오는 방법 문법 사과 바나나 const els = document.querySelectorAll('div') els.forEach(el => { console.log(el.dataset.fruitName); }); 결과 defer속성 필요성: 자바스크립트가 상단에 명시되어 있는경우 body태그 부분에 태그값을 못가져와 작동을 안될때 사용 SCRIPT요소에 defer속성은, HTML 구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미가 있다. 외부에 있는 JS파일을 사용할 때만 해당 속성을 이용할 수 있다고 한다. 2021. 4. 11.

티스토리툴바