컴퓨터 알아가기/HTML CSS
-
<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) 그..
-
<HTML/CSS> Transition 2 - 마우스를 올리면 요소의 크기와 위치 변화컴퓨터 알아가기/HTML CSS 2022. 9. 16. 19:30
지난시간 마우스를 올리면 글씨색이 변한다던가 사이즈가 변하는 기초적인 transition 기능을 이해해 보았습니다만, 이번시간에는 사이즈가 변하면서 위치가 이동되는 내역을 이해해 보도록 하겠습니다. HTML상 클래스명이 squre인 태그를 만들고 다음과 같이 칼라가 회색인 네모박스를 만들어 봅니다. 이번에는 간단한 CSS 영역이므로 HTML상 같이 사용하도록 하겠습니다. 브라우저상 다음과 같이 나옵니다. 이 네모박스를 마우스를 올려 놓았을때 왼쪽으로 100px 움직이면서 크기는 두배로 늘어나는 애니메이션 기능을 공부하고자 하는데 transition 기능을 사용하면 됩니다. 필요한 기능을 고민해 보면 다음과 같이 정리할 수 있습니다. ① 마우스 올리는 기능은 hover ② 크기 2배인 경우는 hover시 ..
-
<HTML/CSS> Transition 1 - 글자색과 크기 변환컴퓨터 알아가기/HTML CSS 2022. 9. 15. 19:30
자바스크립트를 공부하면서 CSS의 애니메이션 기능을 잠깐 익히고 갈 필요가 있습니다. 그 중에서 가장 기초적인 내용으로 마우스 기능인 hover 기능을 통하여 마우스를 갖다 대었을 경우 색이나 크기가 변환하는 과정을 공부하도록 하겠습니다. 기본적으로 마우스 기능인 hover를 사용하면 마우스를 해당 영역에 올리는 것 만으로도 활성화가 됩니다. 모양을 보기 편하게 하기 위해서 마우스를 위에 올렸을 때 손가락 표시가 나오는 pointer 기능도 같이 사용합니다. Transition 기능은 글자인 태그, 문장인 태그, 버튼내에 있는 글자크기, 영역을 지정하는 태그의 크기 변화 등 다양하게 사용할 수 있습니다. Transition 기능은 일종의 애니메이션 기능으로 변환되는 시간을 설정하면 됩니다. CSS에서 명..
-
CSS 움직이는 공 만들기 (상하좌우 움직이는 공)컴퓨터 알아가기/HTML CSS 2022. 5. 4. 19:30
이제는 재미로 공이 바닥에 튕겼다가 다시 중력에 의해 내려오는 모양을 만들어 보려고 합니다. 이를 응용하여 최종 로또추첨기에서 뽑혀지는 총 7개의 공이 움직이면서 1초의 간격을 두고 나타날 수 있게 해보는게 목적입니다. VS Code 편집기를 이용하여 연습해 보도록 하겠습니다. 기본적인 HTML과 CSS가 필요하겠죠. 1. 기본 HTML 포맷만들기 아래 그림과 같이 기본 포맷안에 CSS연결과 JS연결할 경로를 세팅해 줍니다. 이럴경우 태그내 태그의 id를 활용하도록 합니다. 태그는 다음과 같이 간단합니다. 물론 자바스크립트에서는 태그를 선택해야 겠지요. 2. CSS 꾸미기 여기서는 색을 직접 반영하여 진행하며 원의 크기도 지정합니다. 순서는 색, 원모양 만들기, 애니메이션 적용 스킴을 id내에 지정해 주..
-
CSS : Readonly 속성컴퓨터 알아가기/HTML CSS 2022. 2. 15. 20:30
여기저기 자바스크립트에 대한 내용을 보면 가끔 생소한 속성이나 명령어 함수등이 보입니다. 그럴경우 공부를 다시 해볼 생각으로 그 부분만 별도로 찾아서 문법에 대한 정리가 필요할 것 같습니다. 오늘은 태그에서 자주 사용되고 있는 readonly 속성에 대해 좀 더 알아보고자 합니다. ▒ CSS : Readonly 우선 다음과 같은 기본 HTML안에 기본 태그에서 알아 보도록 하겠습니다. 위 그림을 보면 태그에서 read-only 속성에 걸리는 태그에 read-only 속성을 걸어놓고 background-color를 지정해 줍니다. 이후 태그에서 태그안에 readonly 속성을 지정해 주면 됩니다. 만일 backgroud-color가 필요없으면 태그에서 CSS를 사용하지 않고 태그에서만 사용하면 됩니다. r..
-
CSS Transition : Hover, Transition duration, Transition delay, Timing function, Transition 단축속성값, Transition 단축조합컴퓨터 알아가기/HTML CSS 2021. 5. 21. 19:30
CSS Transition 즉 CSS 전환은 한마디로 시각적으로 변환되는 것을 말합니다. 예를 들어 마우스를 올리면 색이 변하는 것처럼요. 다음 CSS와 브라우저를 기준으로 예를 들겠습니다. 하나의 태그로 나타내면 브라우저는 다음과 같습니다. ▒ Hover Hover는 CSS 변환에서 가장 쉽게 볼 수 있는 속성입니다. 마우스를 올렸을때 Hover를 사용한 속성값을 표시해 줍니다. 사용법은 지정하고자하는 이름에 콜론 ":" 과 함께 hover라고 표시해 줍니다. 다음 CSS는 trans 클래스에 hover를 사용하여 위 그림의 Orange색을 연두색계열로 바꾸어 주는 코드입니다. 그리고 나서 Hello!에 마우스를 대보면 다음과 같이 색이 변합니다. ▒ Transition Duration (전환 시간) ..
-
CSS Grid Layout : Align items, Align content, Justify self, Align self, Grid auto rows, Grid auto columns, Grid auto flow컴퓨터 알아가기/HTML CSS 2021. 5. 20. 19:30
지난 시간까지는 justify-items와 justify-content 속성에 대해 이해를 해봤습니다. 이제부터는 Grid Layout을 공부해보도록 하겠습니다. ▒ Align items와 Align content속성 이제는 items와 content속성을 같이 봐야 할 것 같습니다. Grid 영역내에 어떻게 변하는지 지난 시간 기준으로는 items는 Box item에 직접 영향을 미치고 content는 전체 Grid에 전체 영향을 미쳤습니다. 이제 Align items와 Align content를 같은 개념으로 보면 상하로 변동이 있을겁니다. 다음 브라우저를 기준으로 설명해 보겠습니다. 상기 브라우저에 대해 잠깐 설명하면 이동하는 위치를 보기 위해서 태그 높이를 더 주었습니다. 상기 그림은 Defaul..
-
CSS Grid Layout : Justify items, Justify content컴퓨터 알아가기/HTML CSS 2021. 5. 19. 19:30
Grid Layout을 이해하기 위해서는 축 개념을 바로잡고 있어야 합니다. 지금까지 x축과 y축의 이해를 높혔습니다만 한가지 반드시 기억해야할 점은 Row는 행이라는 뜻인데 무조건 수평으로 나뉘는 개념으로 이해하시면 됩니다. 수평으로 나눈다라는 것은 높이를 수평으로 계속 자른다라는 개념이고 Column은 그 반대 개념이겠죠? 이 개념이 이해되기전에는 어떠한 진도도 나가지 않는게 나중에 훨씬 더 빨리 진도가 나갑니다. ▒ Justify items 속성 justify-items 속성은 수직축을 중심으로 좌우로 위치를 조정하는 속성입니다. Flexbox와 같은 개념입니다. 속성값으로는 Grid의 왼쪽 기준인 start, 오른쪽 기준인 end, 중앙배치인 center, 해당 Grid까지 확장하는 stretch..