온풀투데이

사용자 동작에 반응하는 가상 클래스 1. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용 2. :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용 3. :hover 가상 클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용 웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정 4. :active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용 링크나 이미지 등 웹 요소를 활성화했을 때(누르고 있을 때)의 스타일 지정 5. :focus 가상 클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때의 스타..

연결 선택자 1. 하위 선택자 : 지정한 모든 하위 요소에 스타일 적용하기 section p { color: blue; } section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정함 2. 자식 선택자 : 자식 요소에만 스타일 적용하기 section > p {color: blue; } section 요소 안에 포함된 p 요소 중 자식 p 요소에만 파란(blue) 글자 색을 적용함 하위 선택자와 달리 손자 요소에는 스타일이 적용되지 않음 3. 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용하기 h1 + p { text-decoration: underline; } 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용됨 4. 형제 선택자 : 형제 요소에 스..

캐스케이딩(Cascading)의 의미 CSS에서 'C'는 캐스케이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻 스타일 간의 충돌을 막기 위한 방법이 '위에서 아래로 흐르며 적용되는 방법' 이 방법에는 두 가지 원칙이 있음. 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다. 스타일 우선순위 CSS 선언의 중요성은 스타일이 어디서 선언되었는가에 따라 달라진다. 아래 순서는 가장 중요한 것부터 차례로 나열한 것이다. 사용자 스타일 시트의 중요 스타일 - '사용자'가 그들에게 맞게 구성해 놓은 스..

style을 사용하는 이유 HTML로는 웹 사이트의 내용을 나열, CSS로는 웹 문서의 디자인을 구성한다는 것이 웹 표준의 시작 내용과 디자인이 구분되어 있기 때문에 사이트의 내용을 수정해야 할 때도 디자인에 전혀 영향을 미치지 않고 내용만 수정 가능하다. 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꾸어 완전히 다른 느낌의 문서로 만들 수 있다. style 형식 p{text-align:center;} /* 텍스트 단락을 중앙에 정렬 */ 'p' : 선택자 / 'text-align' : 스타일 속성 / 'center' : 값 css 주석 /* 주석 내용 입력 */ 내부 스타일 시트 태그 안에서 스타일 정보를 정의 태그 안에 스타일 정보 작성 외부 스타일 시트 h1 { text-a..