반응형 CSS13 📌 CSS 가상 선택자와 기타 요소 정리! 사용자 동작에 반응하는 가상 클래스 :link - 방문하지 않은 링크에 스타일 적용 기본적으로 a 태그에서는 파란 글자와 밑줄 적용 이를 바꿀 수 있음 :visited - 방문한 링크에 스타일 적용 기본적으로 a 태그에서는 보라 글자와 밑줄 적용 이를 바꿀 수 있음 :hover - 웹 요소에 마우스 커서를 올려 놓을 때의 스타일 적용 롤오버 효과(rollover), 스포일러 :active - 웹 요소를 활성화했을 때의 스타일 적용 누르고 있을 때의 스타일을 지정(링크 클릭) :focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 tap을 눌러 초점을 이동했을 때의 스타일을 지정 ⭐ 정의 순서 무조건 link visited hove.. 2022. 9. 21. 📌 CSS 속성 선택자 정리! 특정한 속성을 사용한 요소에 스타일을 적용 태그[속성] 특정한 속성을 사용한 요소에 스타일을 적용 특정 값을 갖는 속성에 스타일 적용 [속성=값] 정확한 값만을 허용 여러 값 중 특정 값이 "포함"된 속성에 스타일 적용 [속성~=값] 띄어쓰기로 구분된 특정 단어가 있는 경우 예) [class~="button"] 의 경우에는 "flat button" 은 선택됨 "flat-button" 이나 "buttons" 는 포함 안 됨 특정 값이 포함된 속성에 스타일 적용하기 [속성 |=값] 하이픈 포함 단어별. 띄어쓰기나 하이픈으로 나뉜 단어를 체크. 🐍 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용 예) [class|="button"] 의 경우에는 "flat button" "flat-.. 2022. 9. 21. 📌 CSS 연결 선택자 정리! 하위 선택자 : 모든 하위요소에 스타일 적용 상위요소 하위요소 지정한 모든 하위 요소에 스타일 적용하기. 자손 선택자 자식 뿐만이 아니라 손자, 손자의 손자까지 모두 적용된다 자식 선택자 : 직계 자식 요소에만 스타일 적용 상위요소>하위요소 직계 자식 요소에게만 적용 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용 요소 1+요소 2 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소 가장 첫 번째 동생 요소에만 스타일이 적용 형제 선택자 : 모든 형제 요소에 스타일 적용 요소 1~요소 2 모든 형제 요소에 적용됨 예시 📥입력 다음은 제 자기소개입니다! 할 줄 아는 언어 파이썬 자바스크립트 SQL 운영중인 블로그 주제 디스코드 프로그래밍 학습과 교육 퍼즐 게임 📤출력 위와 같은 예시가.. 2022. 9. 21. 📌 CSS의 기본적인 주요 선택자! CSS 선택자는 스타일을 적용시킬 대상을 선택한다. 선택자는 섞어서 이용할 수 있다. 전체 선택자 : * * { margin : 0 0 0 0; padding : 0 0 0 0; } 문서의 여백이나 글꼴 크기 등 기본 스타일링을 초기화 할 때 🐍 주로 바깥 여백 마진(margin), 안쪽 여백 패딩(padding) 초기화시 사용 태그 선택자 : 태그명 h1 { font-weight: 300; font-size: 2.125em; color: #fff; } 특정 태그에만 적용시킴 class 선택자 : .class명 .class-name { font-weight: 300; font-size: 2.125em; color: #fff; } html 태그에서 방식으로 속성으로 설정 이 후 CSS에서 .클래스-이름 으.. 2022. 9. 21. 🎨 CSS 적용 방법 3가지! CSS 적용 방법 3가지 : 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 스타일 적용 순서 : 인라인 > 내부 > 외부 내부 스타일 시트 ... head 안 style 태그 안에 담김 외부 스타일 시트 외부에 css 파일을 만들어두고 불러옴 불러올 때는 head 안 link 태그를 이용함 가장 많이 사용하는 방식 인라인 스타일 시트 내가 보려고 정리하는 프로그래밍 간단한 스타일을 적용시킬 때 사용 문서가 복잡해지기 때문에 권장하지는 않는다. 🐍 테일윈드(Tailwind) 이용 방식 테일윈드 이용하기! 엄밀히 말해서는 Tailwind라는 외부 스타일 시트를 불러온 후 적용하는 방식 각 스타일 설정마다 클래스가 정해져 있어, 클래스 명으로 적용할 스타일을 입력하면 인라인 스타일처럼 이용 가능하다. 2022. 9. 21. 🎨 CSS 기본 개념, 문법 구조 초간단 요약! CSS란? 약어 설명 Cascading Style Sheet의 약자 Cascading : 폭포처럼 떨어져 내리는 특성(상속)을 지닌 Style Sheet : 스타일 관련 데이터가 나열된, 열거된 공간 사용 CSS는 색상이나 크기, 위치, 배열 방법등 디자인 요소를 담당 크게 문서의 레이아웃과 스타일 정의 js와 연계해 동적인 컨텐츠 표현이나 디자인 적용 가능 버전 CSS 1.0부터 CSS 4.0까지(현재) 버전 큰 의미 없다. 자동으로 브라우저에 최신 버전으로 제공 🐍 그러니 어떤 스타일 표준이 만들어지고, 그걸로 뭘 할 수 있는지만 알기, 브라우저 호환성 확인 CSS 기본 문법 CSS 구문은 선택자(Selector)와 선언부(Declaration)으로 구분 선택자 : 디자인을 적용할 HTML 요소를 선.. 2022. 9. 21. 이전 1 2 3 다음 반응형
