컴퓨터 탐험가 찰리

CSS의 특정 tag들을 선택하기 보다 쉽게 위한 개념으로, Combinator라는 것이 있다. 이것은 태그들끼리 부모-자손(descendant), 자식(Child), 인접형제(Adjascent sibilings), 일반형제(General siblings)의 복잡한 관계를 가질 때, 태그의 선택을 훨씬 더 용이하게 만들어준다. 차례대로 살펴보자. 1. Descendant Selector 자손 선택자는 어떤 tag 하위에 있는 모든 일치하는 tag를 선택한다. 단순 띄어쓰기로 구분하여, 하위의 모든 tag들에 적용된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 2-1 2-1-1 2-1-2 2-1-3 2-1-3-1 2-2 2-2-1 2-2-1-1 cs 1 2 3 div p {..

1. 필요성 html 에서 를 생성하면, 아래 그림과 같은 가장 기본적인 checkbox만 만들어진다. 해당 checkbox는 background color와 check-mark의 색깔 및 크기, text와의 위치 배열 등이 모두 정해져 있기 때문에, 각종 웹서비스에서 활용하기에 제한이 많다. 그래서 customizing을 해야하는데, customizing에 들어가는 요소들이 html/css 초보가 알기에는 어려운 요소들이 많아서 각 요소들을 하나하나 분해해서 공부해보고자 한다. 2. 구성요소 2-1. Label tag label tag는 input 과 관련된 checkbox, radio 등 사용자가 선택하여 입력을 넣는 요소가 있을 경우, 그 요소에 내용을 달아주고, 요소 뿐만 아니라 요소에 달린 내용..

1. CSS의 형태 CSS는 Selector와 Property로 구성되어 있다. -Selector의 형태 : Tag 또는 #ID 또는 .class 뒤에 {}를 붙인다. -Property의 형태 : "이름: 값;" + Tag와 ID, Class 등을 한번에 지정할 수도 있다. ex) h1 #grid { ... } 한꺼번에 여러개를 지정하기 위해서는 다음과 같이 쓰면 된다. Selector (id, class, tag){ ... } 2. CSS 써보기! Tag 내부에 CSS를 작성하여 html text들과 연결해주면 된다. + 이렇게 Tag를 적용하면, html 페이지가 여러개일 경우, Tag를 html 페이지 파일마다 똑같이 붙여넣어줘야 한다. 페이지가 엄청 많다면? 사람이 할 짓이 아니다... 그래서 h..

1. HTML HTML은 Hyper Text Markup Language의 약자로 Programming 언어가 아니다. 왜냐하면 Programming이란 순서대로 작성되는 것을 말하는데, (ex. 클래식 음악의 순서, 행사 순서 등을 계획하는 것을 프로그래밍이라고 하기도 함) HTML은 꼭 정해진 순서대로 작동하는 것은 아니기 때문이다. 단순히 어떤 Text를 Markup, 즉 각 부분이 '제목'인지, '내용'인지, '링크'인지 표시해주는 언어인 것이다. 2. CSS CSS는 Text의 사이즈, 색깔 또는 그림의 사이즈, 형태, 배경 등이 어때야 하는지 정의해주는 것이다. Design 툴이라고 보면 될 것 같다. 약자는 Cascading Style Sheet이다. Cascading이란게 폭포라는 뜻을 갖..