본문 바로가기
반응형

Style3

알면 득이 되지만 잘 사용하지 않는 inline styles 그리고 !important inline styles 그리고 !important CSS로 스타일링을 하는 방법에는 크게 3가지가 있습니다. 별도의 CSS파일을 만들어서 html 문서에 태그를 사용해서 불러다가 사용하는 방법이 가장 일반적이고, html 문서의 head 태그 안에다가 태그를 이용해서 직접 작성하는 방법도 간간히 사용되고, 태그가 적용되는 라인에 같이 사용하는(inline) 방법도 존재합니다. 가장 강력한 것, 즉 가장 우선 순위가 높은 방법은 인라인으로 스타일을 적용하는 방법이긴 한데, 실무에서는 가장 최후에 사용하는 방법으로 자리잡고 있습니다. 왜냐하면, 스타일을 유지보수 해야하는 경우라면 웹문서를 직접 열어야 해서 가장 번거롭기 때문이죠. 그리고 웹문서를 위한 코딩은 시멘틱(semantic) 하게 작성되는 것을 표.. 2023. 1. 22.
CSS 상속(Inheritance)에 대하여 CSS 상속이란? CSS 상속이란 구체적으로 스타일을 지정하지 않은 하위의 엘리먼트 요소들에 대해, 상위 항목(부모 엘리먼트)에 지정된 스타일이 적용되는 형태를 말합니다. 마치 자식이 가만이 있어도, 부모로부터 유전자 또는 재산(?)을 상속 받는 것과 비슷하기 때문에, 코딩의 세계에서는 상속(Inheritance)라는 용어를 사용하고 있습니다. 이번 포스팅에서는 CSS 상속의 동작 형태에 대해서 살펴보고 정리를 해둡니다. 상속은 상위요소(부모, 조상)로부터 받는다 인간세계나 코딩의 세계 둘 다 동일합니다. 상속은 자식 세대가 아니라, 부모세대로부터 받게 됩니다. 예제 코드는 다음과 같이 간단하게 만들어보았습니다. Hello 즐코딩 즐거운 코딩생활, 즐코딩 Lorem ipsum, dolor sit amet.. 2023. 1. 21.
CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 HTML 문서에는 일반적으로 CSS를 이용해서 스타일링을 합니다. CSS는 스타일링을 위한 목적으로 만들어진 마크업 언어이기도 하니까요. 그런데, JavaScript를 이용해서도 HTML 문서를 스타일링 할 수가 있습니다. 왠지 같은 기능을 서로 하는 것 같은데, 그럴만한 이유는 다 존재합니다. 우선은 CSS와 Javascript가 같은 스타일링을 하는 데 있어 어떻게 서로 다른 모습을 띄는 지 살펴봅시다. 아래와 같은 간단한 샘플코드를 준비해보았습니다. JavaScript Stydy 글자 크기 변경하기 글자 크기를 변경하는 스타일링으로 간단하게 비교해보겠습니다. CSS 경우 Javascript의 경우에는 CSS는 font-si.. 2023. 1. 14.
반응형