반응형 CSS20 알면 득이 되지만 잘 사용하지 않는 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. 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 HTML 소스들을 살펴보다 보면, 가끔 :hover 또는 ::after 이런 것들이 눈에 띄곤합니다. 매우 낯선 모습의 요소들이지만 HTML, CSS에서는 매우 빈번하게 사용하는 중요한 선택자들입니다. 그런데 어떤 것들은 점 하나?이고 또 어떤 것들은 점이 두개?라서 점점 더 미궁으로 빠져드는 느낌이 들기도 합니다. 헷갈리면? 이참에 정리를 해보는 거죠 뭐. PSEUDO CLASSES - 가상 클래스 'pseudo'는 어떻게 읽을까요? 발음이 매우 낯설죠. [ suːdoʊ ]라고 읽습니다. 한국식 발음으로는 [수-도]에 가깝습니다. '가상의', '가짜의' 라는 뜻을 가지고 있는데, 파파고는 '사이비의'라고 좀 더 과격하게 알려주는군요^^; 일단 세미콜론 한.. 2023. 1. 17. 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. 이전 1 2 3 4 5 다음 반응형
