Web/HTML, CSS5 [CSS] Selector Reference Selector Reference Selectors are patterns used to select the element(s) you want to style. CSS에서 Selector(선택자)란 말 그대로 '특정 요소를 선택하는 요소'이다. 셀렉터로 특정 요소들을 선택해 그 부분에만 원하는 스타일을 적용할 수 있다. 선택자들을 적절하게 혼합해서 사용하는 것은 웹페이지를 디자인을 하는데 있어 중요하기 때문에 w3schools 문서를 참고해 어떤 선택자들이 있고, 어떻게 사용하는지 정리해보았다. 기본 선택자 (Selector) Selector Description Example * 모든 요소 선택 * {} .class 특정 class 요소 선택 .intro {} #id 특정 id 요소 선택 #only .. 2020. 12. 17. [CSS] em, rem em em은 현재의 글자 크기(font-size)를 정의한다. 예를 들어, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다. HTML Test CSS body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 예를들어 에 font-size를 1.2em으로 지정했다고 하자. 이 예제에서는 의 font-size인 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 되어, 결과적으로 16.8px의 크기가 된다. rem(root em) HTML Test (14 * 1.2 = 16.8px) Test (16.8 * 1.2 = 20.16px) Tes.. 2020. 12. 14. [CSS] Flex Flex flex는 레이아웃을 훨씬 효과적으로 관리할 수 있게 도와준다. 가로 혹은 세로 방향으로 요소들을 중앙 정렬하고 싶을 때, 요소들의 간격을 일정하게 하고 싶을 때, 심지어는 요소들이 배치된 순서를 뒤바꾸고 싶을 때도 flex를 사용할 수 있다. 이런 유용한 flex 기능을 사용하려면 가장 먼저 해야할 것이 있다. 바로 아래와 같은 방식으로 display를 flex로 설정해주어야 한다. 참고로 여기서 display는 요소들의 레이아웃을 어떤 식으로 설정할 지를 정하는 속성이다. display 더 알아보기 .container { display: flex; } 이제 flex 기능을 사용할 수 있게 되었다! 종류가 많고 비슷비슷해보여서 처음에는 사용할 때 굉장히 헷갈렸다. 하지만 한 번 익히고 나면 굉.. 2020. 12. 12. [CSS] :active를 활용해 버튼 누르는 효과 내기 See the Pen Calculator by kIMJUHYE (@JOOOOOHYE) on CodePen. active, hover :active 는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다. :hover 은 사용자가 마우스를 요소 위에 올리는 시점을 의미한다. 버튼을 클릭했을 때 누르는 듯한 효과를 내고싶었기 때문에 :active를 사용했고, CSS파일에서 button부분을 두 가지 상태로 구분했다. 그냥 button 부분은 평상시 상태를, button:active 부분은 마우스를 누른 순간부터 떼는 순간까지의 상태를 의미한다. 마우스를 누른 순간 box-shadow라는 그림자효과를 조절하는 식으로 누르는 듯한 효과를 내봤다. 위의 그림처.. 2020. 12. 11. [CSS] Selector, Class와 Id의 차이점 HTML과 CSS의 역할(관심사)을 구분하게 되면 구조를 파악하기도 쉬워지고, 수정하기도 편리해진다는 장점이 있다. 이렇게 파일을 구분하게 되면 HTML의 어떤 부분을 CSS에서 지목해야하는 상황이 생길 수밖에 없다. 이 때 필요한 개념이 바로 Selector이다. Selector을 사용하면 코드도 간결해지고, 나중에 속성들을 한번에 바꾸기도 편하다. '중복제거'는 모든 언어에서 마찬가지로 핵심적인 요소이기 때문에 Selector 또한 매우 중요하다..! HTML, CSS 연결하기 HTML과 CSS를 연결하는 방식은 두 가지가 있다. 둘 다 CSS 문법은 같지만, HTML파일과 합쳐서 하나의 파일로 사용하느냐 혹은 파일을 구분해서 사용하느냐에 따라 차이가 있다. 첫번째는 태그를 이용해서 HTML body.. 2020. 12. 10. 이전 1 다음 반응형
