본문 바로가기

개발40

선택자 우선순위 CSS를 다음과 같이 작성하면 모든 선택자가 div 요소를 선택할 수 있게 된다. 그렇다면 어떤 내용의 스타일이 div 요소에 적용이 될까?? 이때는 선택자 우선순위를 고려해야 한다. 각 선택자 마다 점수가 다르게 적용되며 점수가 가장 높은 선언이 우선되어 적용된다. 만약 점수가 같다면 가장 마지막에 작성된 CSS가 적용된다. 그렇다면 점수를 계산하는 방식은 어떻게 될까? 아래에서 살펴보자 먼저 전체를 선택하는 전체 선택자(*)은 0점. 태그 선택자는 1점 Class 선택자는 10점 ID 선택자는 100점 태그 내에 선언되는 인라인 선언은 1000점 !important를 표기하면 무한대의 점수를 받게 된다. 무한대지만 수로 나타내기 위해서 999999999999점이라고 표기했다. body 태그는 전체 요.. 2023. 1. 4.

스타일 상속 예제를 보면 animal이라는 클래스에 해당하는 요소들에 대해 글자색을 빨간색으로 적용하겠다고 명시하고 있다. HTML의 요소 중에 class가 animal인 요소는 내용이 동물인 div 요소 하나 뿐이지만, 실제 화면에 출력된 결과를 보면 동물, 호랑이, 사자, 코끼리 모두에 빨간색이 적용된 것을 확인할 수 있다. 이는 "스타일 상속" 때문인데, animal 클래스의 하위 요소들 모두에게 스타일이 상속되어 적용된 것이다. 하지만 모든 CSS 속성들이 상속되는 것은 아니다. 자동적으로 상속되는 속성들을 보면 모두 글자/문자와 관련된 속성들이며 그렇다고 모든 글자/문자 관련 속성들이 자동 상속되는 것도 아니다. 우리가 자주 사용하는 속성들은 대부분 다 자동적으로 상속이 되며, 자동적으로 상속되지 않는 CS.. 2023. 1. 4.

속성 선택자 속성 선택자임을 나타내는 기호는 대괄호( [ ] ) 이다. 속성의 이름으로 선택하는 선택자 속성에 부여되어 있는 값도 같이 명시를 해주어 요소를 찾도록 하는 선택자 2023. 1. 4.

가상 요소 선택자 가상 요소 선택자에는 before와 after 두 개가 있으며, 가상 요소를 만들어서 선택자로 선택된 그 요소 내부의 앞이나 뒤에 삽입하는 구조이다. 가상 요소를 나타내는 기호는 :: 이다. 1. before 가상의 인라인 요소를 만들어서 선택자 ABC가 선택한 요소의 내부의 앞 부분에 삽입한다. 삽입할 내용은 CSS의 content 속성을 이용해서 명시한다. 이때 삽입할 텍스트가 없다고 하더라도 content 속성은 반드시 명시해야 한다. 어떠한 텍스트도 삽입하지 않을 때에는 content=""; 이렇게 빈 텍스트라도 명시해야 한다. 2. after before 와 반대되는 개념으로, after 역시 가상 요소 선택자이며 선택자 ABC가 선택한 요소의 내부 뒤에 가상의 인라인 요소를 삽입한다. befo.. 2023. 1. 4.

가상 클래스 선택자 가상 클래스 선택자라는 것을 명시하는 기호는 : 이다. 1. hover 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 활성화가 되어 작성한 스타일이 적용된다. 2. active hover는 커서가 올라가 있는 동안 선택이 되었다면 active는 마우스로 클릭을 하고 있는 동안 선택된다. 3. focus focus 선택자는 선택자 ABC 요소가 포커스되면 선택한다. 포커스는 한 페이지에서 하나의 요소에만 가능하며, 포커스는 기본적으로 사용자로부터 입력을 받는 요소에만 적용이 가능하다. Ex) input 요소 그래서 div, span 등에는 적용이 되지 않지만, tabindex라는 속성을 이용해 값을 -1로 설정해주면 focus가 가능하기도 하다. 4. first-child 선택자 ABC가 형제 요소.. 2023. 1. 4.

기본 선택자 HTML 파일 내에 선언된 요소들 중에서 어떠한 요소에 스타일을 입힐지 선택하는 것이 바로 선택자이다. ● 기본 선택자 기본 선택자에는 4가지 종류가 있다. 1. 전체 선택자 * (애스터리스크)를 사용하면 모든 요소를 선택한다는 의미이다. 2. 태그 선택자 태그의 이름으로 스타일을 적용할 요소를 찾는다. 3. 클래스 선택자 클래스 속성의 값으로 선택하는 선택자이며 클래스를 의미하는 기호는 . 이다. 4. 아이디 선택자 아이디 속성의 값으로 선택하는 선택자이며 아이디를 의미하는 기호는 # 이다. 기본 선택자 4가지는 순서대로 외워두길 바란다! 2023. 1. 4.

CSS 선언 방식 CSS 문법을 적용하기 위해서는 CSS를 선언하는 것이 필요한데, 선언하는 방식에는 4가지가 있다. 1. 내장 방식 내장 방식은 HTML의 head 부분에 style 요소를 이용해서 요소의 내용으로 스타일을 작성하는 방식이다. 따로 CSS 파일을 만들지 않아도 된다는 장점이 있지만, 적용할 스타일이 많아지면 HTML 문서 내에서 한 번에 다 처리하기가 쉽지 않을 뿐더러 프론트엔드 개발에서 HTML, CSS, JS 파일을 별도로 관리하는 것이 이점이 많기 때문에 권장하지는 않는 방법이다. 2. 인라인 방식 역시 별도의 CSS 파일을 만들지 않고 요소의 style 속성을 이용해서 직접 스타일을 적용하는 방식으로 이미 적용할 요소를 정해놓은 셈이기 때문에 요소를 선택할 선택자가 없다는 것이 특징이다. 편리해 .. 2023. 1. 4.

전역 속성 앞서 태그에 특정한 기능을 더해주기 위해서 속성(attribute)와 값을 명시한다고 했다. 그렇다면 a태그에서 연결할 주소 경로를 명시하는 href 속성을 img 태그에서 이미지의 경로를 나타내는 src 속성을 대신하여 사용할 수 있을까?? 당연히 아니다. 하지만 전역 속성은 이러한 속성들과 달리 body에서 사용되는 모든 태그에 동일하게 적용될 수 있는 속성이다. 대표적인 전역 속성 몇 가지를 살펴보자 1. title 속성 => title 속성은 요소의 정보나 설명을 지정한다. => 해당하는 요소에 커서를 갖다대면 설명이 나오도록 할 수 있다. 2. stype 속성 => 요소에 적용할 스타일(CSS)을 지정한다. => link 태그를 이용해서 외부의 CSS파일을 가져와서 연결하는 방식도 있고 => s.. 2023. 1. 2.

주석 처리 코드에서 나만 알아보기 위해서 주석을 작성해야 하는 경우가 있다. 하지만 그냥 작성하면 그 내용이 웹 페이지에 출력되게 되는데 주석 기능을 이용하면 이를 해결할 수 있다. html에서는 다음과 같이 주석을 처리하며 /* 내용 */ css에서는 다음과 같이 주석을 처리한다. 그렇다면 에디터마다 주석을 처리하는 방법을 외우고 사용해야 할까?? 아니다. 단축키를 이용하면 손쉽게 사용할 수 있다. Ctrl + / 키를 누르면 주석을 작성할 수 있다. 2023. 1. 2.

이전 1 2 3 4 5 다음

티스토리툴바