본문 바로가기

CSS39

CSS 결합자(combinators)란? 초보자들은 흔히 특정태그를 선택하기 위해 태그 하나하나에 다른 클래스를 달아주곤 하는데, 작은 프로젝트에서나 상관없지만 큰 프로젝트일수록 비효율적이다. 특히, 협업을 하는 경우에는 더욱 더 비효율적. 태그 하나하나에 클래스를 두면 1. 만든 클래스 이름을 다 기억하지도 못할뿐더러 2. 이 클래스가 도대체 무슨 효과를 주는지 하나하나 짝지으며 찾아다녀야 한다. 그럼 어떻게 해야 할까? 결합자(combinators)를 활용해 코드를 짜는 것이다. 결합자(Combinator)는 선택자를 여러 개 결합하여 세밀하게 찾을 수 있게 한다. 결합자는 크게 네 가지로 나눌 수 있다. 결합자에 대해서 알려면 HTML의 구조에 대해서 알아야 한다. HTML의 구조 "어떤 요소 안에 어떤 요소가 있느냐"를 이해하는 것이 가.. 2023. 2. 4.
CSS에 대한 보충 설명 1. CSS를 사용하는 이유 태그 내에 style속성을 사용하여 서식을 지정하는 것은 사실 좋은 방법이 아니다. 홈페이지들은 웹문서하나가 몇천 줄로 이루어져 있고, 이를 모두 일일히 변경한다는 건 사실상 불가능하다. 한번에 일괄적으로 변경을 하기 위해서 css라는 기능이 생겨난 것 css를 사용하면 한 번의 클릭만으로 컴퓨터나 핸드폰의 테마를 변경할 수 있듯이 웹문서의 서식을 일괄적으로 지정할 수 있게 된다. 2. 아이디를 하나만 지정하는 이유 사실 HTML과 CSS에서는 하나의 웹페이지에 같은 아이디를 여러 번 사용해도 별문제 없이 동작하긴 한다. 하지만 이렇게 중복된 아이디를 가지고 자바스크립트작업을 하게 되면 오류가 발생하기 때문에, 하나의 id는 한 번만 사용하는 습관을 들여야 한다. 2023. 2. 3.
CSS란? Cascading Style Sheets의 줄임말 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 즉, 웹페이지를 꾸미는데 사용되는 언어 HTMl의 구성에 따라서 부모 요소에 디자인을 적용하면 자동으로 안쪽 자식 요소까지 디자인 적용이 된다. HTML 문서 안에서는 안에 로 공간을 만들어 작성한다. 선택자를 이용하여 특정 요소에 속성을 적용한다. 선택자(selector) 선택을 해주는 요소, 특정 요소들을 선택하여 스타일을 적용할 수 있게 해준다. 👉 무엇을 꾸민다는 것은, 일단 '선택(select)해야' 가능한 일이다. 예를 들어 firstname 이라고 이름표를 달아준 뒤, "firstname 이란 이름표가 붙은 부분의 글씨를.. 2023. 1. 20.