Opacity
-
<HTML/CSS> Transition 3 : Sub-Menu 만들기 - Display와 Opacity 이용컴퓨터 알아가기/HTML CSS 2022. 9. 17. 19:30
CSS 애니메이션 기초는 Rock's Easy Web을 기본으로 공부를 하고 있습니다. 다음과 같이 홈페이지를 보면 Sub-Menu가 위에서 아래로 내려오는 동작을 본 적이 있는데 역시 이러한 기능도 transition의 속성을 이용하여 만듭니다. 1. HTML 기본 구성 list태그를 이용하여 기본 구성을 작성합니다. 브라우저상 다음과 같이 기본 형태만 보이게 됩니다. 이제부터 CSS를 이용하여 SubMenu가 흘러내리도록 효과를 줄 수 있도록 하겠습니다. 2. CSS 기능구현 CSS 애니메이션 효과를 위해서는 단계별 접근이 필요합니다. 기본적으로 다음과 같은 기초단계에서 시작해 보겠습니다. 관련되서 브라우저는 다음과 같이 보일겁니다. main은 검은색(#666), main ul은 회색 (#333) 그..
-
CSS 기본 : Color (Color, Background-Color, Hex, RGB, HSL, Opacity and Alpha)컴퓨터 알아가기/HTML CSS 2021. 4. 5. 19:30
이제는 CSS의 스타일링에서 중요한 색(Color)에 대해 알아볼 시간입니다. 색에 대하여 구체적으로 알아보기전에 기본적으로 스타일 방식을 고려할 다음 2가지가 있습니다. 1. Foreground Color Foreground Color는 요소에 영향을 미치는 색입니다. 예를 들어 타이틀 글자의 색을 파란색으로 만드는 것을 말합니다. 속성의 이름은 color로 나타냅니다. 2. Backgroud Color Background Color는 말그대로 배경색을 지정해 줄 수 있는데 속성의 이름은 그대로 background-color로 나타냅니다. 다음 CSS 예에서 태그의 글씨는 빨간색이고 태그의 기본영역이 되어 있는 배경색은 파란색입니다. ▒ Hexadecimal Color 방식 (16진번 색 방식) 색을 ..