HTML 기초5 HTML/CSS - CSS Variable 1. Color - CSS에서는 색상이 매우 중요한 요소이다. IDE자체에서 제공하는 색상도 많지만 제한적이라는게 사실이다. 그렇다면 어떻게 다양한 색상을 구현할 수 있을까? CSS에서 색상을 표현하는 방법은 3가지가 있다. 1) 16진수 표현법 - 색상을 16진수로 표현 2) RGB 표현법 - 색상을 R(red), G(green), B(blue)의 비율로 표현 3) RGBa 표현법 - 색상을 R(red), G(green), B(blue)의 비율과 alpha(투명도)를 표현 2. CSS Custom Properties - variable(변수) - CSS에서도 변수를 사용할 수 있다. 어떻게 사용하고 왜 사용하는지 알아보자. - 예를 들어, 토마토 색상을 메인으로 하는 웹사이트를 제작한다고 해보자. 그렇.. 2020. 8. 27. HTML/CSS - State & 속성 선택자(selector) 1. State - 어떤 웹사이트를 개발자 도구를 통해 살펴보면 확인할 수 있는 가장 중요한 selector(선택자)는 state이다. - 위의 사진에서 보이는 것처럼 state에는 active, hover, focus, visited, focus-within이 있다. 이를 버튼을 통해 살펴보자. 1) active - 버튼을 클릭했을 때 작동 Hello 2) hover - 마우스 커서를 버튼 위에 올렸을 때 작동 - hover가 작동되면 default border가 적용되기 때문에 설정해 놓았던 둥근 테두리가 없어진다. 그러므로 hover가 작동할 때의 테두리 모양을 따로 적용해야 한다. 3) focus - 입력란에 커서가 놓여있게 하는 기능으로, 사용자를 입력란으로 유도한다. - Tab키를 눌렀을 때,.. 2020. 8. 26. HTML/CSS - Pseudo selectors(선택자) 1. Pseudo selectors (선택자) - CSS에서 특정 엘리먼트를 선택하기 위해서 아이디는 #아이디명으로 클래스는 .클래스명으로 명시한다. 아이디는 고유값으로 1개의 엘리먼트만 선택되지만, 클래스는 해당 클래스명을 가진 모든 엘리먼트가 선택된다. 상황에 따라 특정 클래스만을 선택하고 싶은 경우가 발생할 수 있다. 이럴 때 사용하는 기술이 pseudo selector이다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected eleme.. 2020. 8. 25. HTML/CSS - Position (relative&absolute) 1. Position - 웹 사이트를 만들 때, 여러가지 요소를 사용한다. 이 요소들을 조금씩 개발자가 원하는 위치에 배치하기 위해서 사용하는 속성중 하나가 position이라는 속성이다. 사용할 기본 구조는 아래 사진과 같다. 1) position: fixed; - fixed속성값을 사용하면 스크롤을 내려도 요소의 위치가 고정되어있게 된다. - fixed 속성값을 이용하기 위해서는 알아야 할 중요한 것이 있다. 바로, layer가 달라지는다는 것이다. 예시) 두개의 div태그가 있다. 1번 태그는 일반적인 div이고 2번 태그는 fixed 속성값을 적용한 태그이다. 그러므로 스크롤을 움직이면 1번 div는 제자리에 있고 2번 div는 고정된 자리에 그대로 위치한다. 하지만, 2번 div는 1번div의 .. 2020. 8. 24. HTML/CSS - Block & Inline 1. Blocks and In-lines - HTML의 태그들은 크게 Block과 In-line으로 분류되고 어떻게 정렬되느냐의 차이가 있다. Blocks: HTML 요소간의 정렬이 수직으로만 가능하다. 즉, 요소 옆에 다른 요소를 배치할 수 없다. ex) div, p태그 등 In-lines: HTML 요소간의 정렬이 수평으로 가능하다. 즉, 요소 옆에 다른 요소를 배치할 수 있다. ex) span태그 등 ex) 1개의 div와 3개의 span태그를 이용하여 아래와 같이 요소를 생성해보겠습니다. - 위의 사진을 보면 div옆에 공간이 많은데 불구하고 span태그가 div태그 아래에 배치되어있는 것을 볼 수 있다. 왜 그런 것일까? - div태그는 Block형태의 태그이기 때문에 수직정렬만 가능하다. 눈으.. 2020. 8. 18. 이전 1 다음
