본문 바로가기

개발/HTML, CSS, JS34

배치(3) CSS에서 배치와 관련해서 position 속성을 사용한 요소는 display라는 속성이 자동으로 변경될 수 있다. position 속성의 값으로 absolute, fixed 를 가지는 요소는 display 속성이 자동으로 block 으로 변경된다. position 지정 속성이 absolute로 바뀌는 것과 번외로 span 요소의 display 속성 값이 자동적으로 block으로 변경되어, 원래는 인라인 요소이지만 가로 세로 너비를 지정할 수 있게 된다. 이러한 경우에는 따로 display: block; 이라는 값을 지정해주지 않아도 됨. 2023. 1. 8.

배치(2) 만약 요소를 뷰포트를 기준으로 배치하고 싶다면, 이전 글에서 작성한 대로 position을 absolute로 작성한 후 모든 부모 요소들의 position을 static으로 작성해야만 할까?? 아니다. fixed 속성 값을 사용하면 부모 요소가 어떤 position 값을 가지고 있든 뷰포트를 기준으로 요소를 배치하게 된다. 그리고 뷰포트를 기준으로 요소를 배치하기 때문에 스크롤을 내리더라도 계속 같은 위치에 배치되어 있는 것을 볼 수 있다. 그렇기 때문에 스크롤을 내려도 항상 사용자에게 보여져야하는 요소들은 position: fixed를 이용해서 배치하면 되겠다. 만약 여러 요소들이 겹쳐지게 되면 어떤 요소가 위로 올라오게 될까? 1. 먼저 position 속성이 부여된 요소가 제일 위로 올라오게 된다... 2023. 1. 8.

배치(1) 우리는 position이라는 속성을 통해 요소를 원하는 위치에 배치할 수 있다. 이때 top, bottom, left, right 라는 속성을 통해서 떨어진 정도를 지정할 수 있는데 이때 어디를 기준으로 해서 요소를 배치할까?? 1. relative 요소 자신을 기준으로 요소를 배치한다. relative라는 속성 값을 부여한 다음 위치를 배치하게 되면, 원래 자신의 위치를 기준으로 배치된다. 이때 배치 전 원래 요소가 존재했던 자리는 비어있는 상태로 유지가 된다. 그래서 2번이 있었다는 사실을 모른 채로 요소의 배치를 보게 되면 1번과 3번이 붕 떠서 떨어져있기 때문에 왜 그 사이에 공간이 발생했는지 알 수 없다. 그렇기 때문에 실제에서 relative 속성을 사용해서 요소를 배치하는 경우는 잘 없다. .. 2023. 1. 8.

선택자 우선순위 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.

이전 1 2 3 4 다음

티스토리툴바