Hello, World

position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 가진다. static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다. relative: 원래 있던 위치를 기준으로 좌표를 지정한다. fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정. inherit: 부모 태그의 속성값을 상속 좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용 position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다

선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다. 사용방법 .some-box:hover{ background-color: red; } input.no-border:focus{ border: none } .container-box:last-child{ margin-right: 0; }  대표적인 종류 :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child ..

복합선택자 일치 선택자(Basic Combinator) : 두 가지 조건을 동시에 만족하는 요소 선택 > span.orange{/*일치 선택자, span태그의 orange 클래스*/ color:red; } 자식 선택자(Child Combinator) : ~의 자식 요소 -를 선택 *자식요소 : 특정 요소 바로 아래에 속한 요소 > ul>.orange{/*ul의 자식요소중에서 orange 클래스*/ color: red; } 후손(하위) 선택자(Descendant Combinator) : ~의 후손(하위) 요소 -를 선택 (띄워쓰기 사용) *후손요소 : 특정 요소 이하의 모든 요소 div .orange{/*div의 후손요소중에서 orange 클래스*/ color: red; } 사과 딸기 오렌지 당근 토마토 ..

* : 전체 선택자 -> 모든 요소를 선택 *{color:red;} -> 모든요소에 적용 tag 선택자 : 태그 이름선택자-> 태그이름 요소를 선택 span{color:red;} -> span 태그 .name : 클래스 선택자 -> class 속성의 값이 name인 요소를 선택 span.name{color:red;} ->span 태그중 class값이 name인 요소 #name : id 선택자 -> id 속성값이 name인 요소를 선택 span.num_1{color:red;} -> span태그중 id 값이 num_1인 요소

CSS > 실제화면에 표시되는 방법(색상,크기,폰트,레이아웃등)을 지정해 콘텐츠를 꾸며 주는 시각적인 표현을 담당 홈페이지에 살을 붙여줌 CSS 기본문법은 아래와 같다 선택자 { 속성: 값; 속성: 값; } 이런식으로 작성하면 된다. main.html Hello! World! main.css span{ background-color: wheat; } 이렇게 작성이 되어있을경우 이렇게 나온다!