본문 바로가기
반응형

HTML+CSS33

알면 득이 되지만 잘 사용하지 않는 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.
부트스트랩에서 integrity와 crossorigin은 무엇일까? 부트스트랩을 사용할 때 생기는 integrity와 crossorigin은 도대체 무엇? Bootstrap을 사용하기 위해 getbootstrap.com에 접속해서 습관적으로 부트스트랩 링크를 복사해서 붙여 넣곤합니다. 매번 아무 생각없이 붙여 넣기도 했는데, 가만 살펴 보면 integrity와 crossorigin이라는 속성이 매번 따라 붙습니다. 필요없는데 괜히 생기는 건 아닐테고... 이 참에 한번 파보기로 합니다. integrity = 진실성? corssorigin = 원산지 교차? integrity라는 단어를 영어 사전에서 찾아보면 '진실성'이라고 나옵니다. 우리가 아는 단어로는 honesty와 비슷한 의미입니다. cross origin은 단어 그대로 origin(원산지, 기원)이 cross(교차.. 2023. 1. 20.
CSS 선택자 part. 2 - 인접 선택자, 직계자손 선택자, 속성 선택자 인접 선택자, 직계 자손 선택자, 속성 선택자 이전 포스팅에서는 ID 선택자, Class 선택자, 자손 선택자에 대해서 살펴보았습니다. CSS 선택자 part. 1 - ID 선택자, Class 선택자, 자손 선택자 CSS 선택자 part. 1 - ID 선택자, Class 선택자, 자손 선택자 ID 선택자, Class 선택자, 자손 선택자 CSS 기능을 가지고 스타일링을 하는 단계로 접어들면, 선택자(Selector)라는 낯선 도구를 만나게 됩니다. 그런데 이 선택자들은 HTML 요소들에 대한 핸들링을 매 kincoding.com 이번 포스팅에서는 더 재미있는 형태로 사용할 수 있는 인접 선택자, 직계 자손 선택자, 속성 선택자들에 대해서 각각 비교해보고 정리를 해보도록 합시다. 물론 이들은 part. 1.. 2023. 1. 19.
반응형