본문 바로가기

전체 글48

[날마다 3분 CSS] CSS 선택자 #가상클래스 선택자 시작 가상(Pseudo) 클래스는 클래스, 또는 태그명 선택자 뒤에 콜론(:) 을 붙여서 표시하는 특별한 요소의 상태, 또는 요소의 순서를 기준으로 자식 요소를 선택하는 방법을 기술한 것이다 또한, 가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다. 자주 사용하는 가상 클래스 선택자의 종류 :hover 마우스의 포인트가 올라간 HTML요소에 대한 상태를 정의한다. p:hover, a:hover, .class:hover 과같이 선택자 뒤에 :hover을 붙여 사용한다. 아래 예시에서 a태그 요소에 마우스를 올리면 글자 색깔이 빨간색으로 바뀌게 된다. 💫예시 a:hover { color: red; } :active act.. 2022. 10. 19.

[날마다 3분 CSS] CSS 선택자 #복합 시작 아파트를 건설할때 골격을 세우고 인테리어 설계도를 통해 각 집의 호수마다 집의 디자인을 입히는 것 처럼 CSS 선택자란 HTML로부터 웹컨텐츠의 구조(골격)를 형성하고 시각적인 디자인과 레이아웃( 디자인 )을 표현하기위해서는 각 집의 호수, 한마디로 디자인 할 위치를 선택해주는 설계도가 있어야한다. 이때, 설계도가 CSS 선택자이다. 선택자의 종류 일치 선택자 일치 선택자(Basic Combinator)는 입력되어있는 CSS속성을 모두 동시에 만족하는 요소를 선택하여 CSS속성을 적용한다. 선택자가 span.red 인 경우에는 태그가 이면서 red라는 클래스를 가지고 있어야 적용이 됩니다. 정확히 명시할 때 사용합니다. 💫예시 span.red { color: red; } 자식 선택자 자식 선택자(C.. 2022. 10. 13.

[날마다 3분 CSS] CSS 선택자 #기본 시작 아파트를 건설할때 골격을 세우고 인테리어 설계도를 통해 각 집의 호수마다 집의 디자인을 입히는 것 처럼 CSS 선택자란 HTML로부터 웹컨텐츠의 구조(골격)를 형성하고 시각적인 디자인과 레이아웃( 디자인 )을 표현하기위해서는 각 집의 호수, 한마디로 디자인 할 위치를 선택해주는 설계도가 있어야한다. 이때, 설계도가 CSS 선택자이다. 선택자의 종류 전체 선택자 전체 선택자(Universal Selector)는 HTML 페이지 내부의 모든 요소( 태그 )에 같은 CSS속성을 적용한다. 아래와 같이 작성하면 모든 요소의 글자 색상을 파란색으로 나타낸다. 💫예시 * { color: blue; } 하지만 전제 선택자( * ) 를 사용면 HTML 문서안의 모든요소를 모두 읽어내야하기 때문에 페이지 로딩의 속.. 2022. 10. 10.

[날마다 3분 CSS] CSS 선언 방식 - 내장/링크/인라인/@import 시작 CSS작성하고 HTML 문서에 포함시키는 방식은 크게 4가지 방식으로 이루어져 있습니다. 내장방식 인라인방식 링크방식 @import 방식 내장방식 HTML의 헤더 요소에 작성 하며.태그로 스타일을 작성하는 방식 이 방식은 대부분의 프로젝트에서 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 자주 사용되지 않는 방식입니다. .. 인라인방식 요소의 style 속성에 직접 스타일을 하는 방식. ... ... CSS우선순위가 지나치게 높기때문에 공통기능에 대해서 CSS파일로 따로 관리하는 경우 인라인 방식으로 쓰여진 요소는 덮어쓰기가 불가능하며 변경이 불가능하기 때문에 유지보수에 어려움이 있다. ( 권장하지 않는 방식. ) 링크 방식 HTML의 헤더 요소에 작성 하며 태그로 CSS문서를.. 2022. 10. 10.

이전 1 ··· 7 8 9 10 11 12 다음

티스토리툴바