지금, 개발하기/CSS29 HTML/CSS] CSS 우선순위는어떻게 정해지나요? 1탄 CSS 우선순위 규칙 CSS는 Cascading Style Sheet의 줄임말입니다. Style Sheet는 이해가되지만 앞에 붙은 Cascading은 조금 의아하지 않나요? 오늘 배울 'CSS 우선순위 규칙'에 대한 힌트가 바로 여기 'Cascading'에 담겨있습니다. 'Cascading'은 '떨어지는 폭포'라는 뜻으로 위에서 부터 아래로 흐른다는 뜻입니다. 즉, 한 요소에 CSS 스타일이 여러개 적용되어 있을 때, 여러 스타일 중 위에서부터 아래로 우선 순위가 정해진다는 의미입니다. 어떤 상황인지 잘 아직 이해가 안가시죠? 예를 들어보겠습니다. 제가 웹페이지에 '안녕'이라는 글자를 출력해 보겠습니다. 이때, 이 안녕하는 글자에는 여러가지 스타일이 적용되어 있습니다. 먼저, 브라우저에 있는 기본 텍스.. 2021. 5. 27. HTML/CSS] CSS에도 상속이 있나요? 상속이란 부모(상위)요소에 적용된 값을 자식(하위)요소가 물려받는 것을 의미합니다. 상속이라는 개념이 없다면, 우리는 부모 밑에 딸린 자식들에게도 같은 매번 속성을 적용해야하는 번거로운 작업을 해야했을 겁니다. 그런데 '상속' 덕분에 우리는 부모에게만 속성을 적용하기만 하면되는 편리함을 누릴 수 있습니다. 예시를 통해서 '상속'을 쉽게 알아볼까요? 아래 예시에서 우리는 태그와 태그, 태그에 한번에 모두 같은 색을 적용할 수 있습니다. 그 이유는 이 태그들이 모두 content 클래스의 자식들이기 때문입니다. 부모인 content 클래스에 색상을 변경해 보겠습니다. 사이트 이동하기 내가 가고 싶은 사이트는 구글! 고고~! Here .content { color: olive; } 상속 덕분에 부모인 태그에만.. 2021. 5. 25. HTML/CSS] 가상클래스(Pseudo-class)란? 우리는 앞서 여러가지 선택자들을 공부했습니다. 그런데 코딩을 하다보면 앞에서 배운 선택자들로 지정하기 어려운 경우가 생깁니다. 예를 들어, 커피 메뉴판을 만들었는데 메뉴판의 몇번째 커피명이라든지, 커피콩 설명단락의 첫번째 글자 등에 스타일을 주고 싶은 경우가 있습니다. 이런 경우리 클래스 이름 앞에 콜론(:)을 붙여 가상 클래스를 만들어서 사용할 수 있습니다. n번째 자식 :first-child 첫 번째 자식 요소 선택 :last-child 마지막 자식 요소 선택 :nth-child(n) n번째 자식 요소 선택 :nth-last-child(n) 끝에서부터 n번째 태그 요소 선택 예시 1번 예시 2번 예시 3번 예시 4번 예시 5번 예시 6번 /* 첫번째 자식 요소 선택*/ .pseudo p:first-c.. 2021. 5. 24. HTML/CSS] 자식 선택자, 직속 자식 선택자 이번에는 연결 선택자인 '자식 선택자'와 '직속 자식 선택자'에 대해서 알아보도록 하겠습니다. 자식선택자(Children selector) 자식 선택자는 부모 요소에 포함된 자식들에게 스타일을 적용시킬 때 사용합니다. 우리는 아래 예제에서 content클래스를 부모로 가지고 있는 자식 요소들 중 b태그에 스타일을 적용시켜 보겠습니다 부모명 자식명 ... {} 자 기 소 개 안녕하세요 제 이름은 지금입니다 제 나이는 20살입니다 저는 코딩을 좋아합니다 .content b { font-size: 20px; color: green; } 직속자식 선택자(Direct children selector) 직속 자식 선택자는 말그대로 바로 아래에 있는 직속 자식에게만 적용이 됩니다. 그래서 아래 예제를 보면 conte.. 2021. 5. 22. 이전 1 2 3 4 5 6 7 8 다음
