appmaster

1. 전체 선택자(Universal Selector) (요소 내부의)모든 요소를 선택 * { color : red; } 2. 태그 선택자(Type Selector) 태그 이름으로 요소 선택 li { color : red; } 3. 클래스 선택자(Class Selector) HTML class속성의 값으로 요소 선택 .hey { color : red; } 4. 아이디 선택자(ID Selector) HTML id속성의 값으로 요소 선택 #hey { color : red; } 1. 일치 선택자(Basic Combinator) 동시에 만족하는 요소 선택 span.orange { color : red; } 오랜지 2. 자식 선택자(Child Combinator) 자식 요소를 선택 (실질적으로 스타일링이 적용되는거..

1. CSS @import를 이용하여 외부문서로 CSS를 불러와 적용하는 방식 즉, 는 html에서 외부 링크를 가져오는것이지만, @import는 CSS에서 외부 CSS를 가져올때 사용하는것이다. /* common1.css */ @import url("./common2.css"); /* common2.css */ div{ color : red; font-size : 20px; } 다음과 같이 입력이 된다면, common1.css는 common2.css의 내용을 들고왔다는 것이다. @import html에서 외부 링크를 가져오는것 CSS에서 외부 CSS를 가져오는것 병렬방식 호출 직렬방식 호출 한꺼번에 호출하기 때문에 시간이 단축됨 CSS에서 작업이 끝난 후에 다음 CSS가 호출이 되기때문에 시간이 오래 ..

1. CSS 기본 문법 CSS문법은 HTML보다 더 쉽다. 아래 예시처럼 선택자, 속성, 값이 있으며 무엇을 의미하는지 이해하는 것으로 문법은 충분하다. div{ font-size : 20px; color : red; } /*다음과 같이 이해할 수 있다.*/ 선택자{ 속성 : 값; 속성 : 값; } 2.선택자의 역할 선택자는 HTML에 스타일(CSS)을 적용하기 위해서 HTML의 특정한 요소를 선택하는 사인이다. 적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고 적용할 대상(h1, p)을 선택자로 나타낸다. 제목.. 본문.. h1 { color: red; } p { color: blue; } /*빨강 글자색(CSS, color: red;)을 저기 제목(HTML, )에 적용하겠어!” ..

1. width(가로너비) 요소의 가로 너비를 지정한다. 단위는 px을 사용한다. 2. height(세로너비) 요소의 세로 너비를 지정한다. 단위는 px을 사용한다. 3. font-size(글자크기) 요소 내용(Text)의 글자 크기를 지정한다. 만약에 글자 크기를 지정하지 않았다면, 대부분 기본값이 16px로 되어있다. .box{ width : 300px; height : 200px; background : red; font-size : 30px; } 1. margin(요소의 바깥 여백) 요소의 바깐 여백을 지정한다. 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용한다. div{ margin : 10px; } 위 코드는 margin은 요소의 위, 아래, 좌, 우 모두 10px의 여..

선택자는 HTML의 특정한 요소를 선택하는 사인(sign)이다. 1. 태그로 찾기 선택자를 입력하는 부분에 적용하려는(찾으려는) 태그의 이름을 입력한다. h1{ color : red; } p{ color : blue; } 선택자를 작성하는곳에 아무런 기호 없이 우리가 알고 있는 태그의 이름만 작성하는것을 통해서 "태그들"을 찾을 수 있다. 하지만 문제는 예를들어 수많은 div가 있는데 우리가 원하는 특정 일부 div를 찾아내는데 무리가 있다. 2. 클래스로 찾기 좀 더 명확하게 원하는 요소를 찾기 위해서 '클래스 선택자'라는 것이 존재한다. .title{ color : red; } .main-text { color : blue; } "."은 클래스 선택자라고 한다. title이라는 태그를 찾는것이 아니라..

속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용한다. div{ color : red; //글자색은 빨강 font-size : 20px; // 글자 크기는 20px width : 300px; // 가로 너비는 300px margin: 20px; // 바깥 여백은 20px padding : 10px 20px; //안쪽 여백은 위아래 px, 좌우 20px position : absolute; //위치는 부모 요소 기준. }

선택자는 HTML에 스타일(CSS)을 적용하기 위해서 HTML의 특정한 요소를 선택하는 사인(sign)이다. "빨간 글자색 (CSS, color : red;) 을 저기 제목 (HTML, 에 적용하겠어!)", "파랑 글자색(CSS, color:blue;)은 여기 본문(HTML, 에 적용하겠어!)"와 같이 적용할 스타일을 속성과 값으로 나타내고 적용할 대상(H1,P)을 선택자로 나타낸다. h1{ //선택자 color : red; } p{ //태그 color : blue; }