JH 개발 블로그

아래와 같은 애니메이션을 만들 것이다. rec cir wrap 안에 rec 와 cir 이 있다. wrap 에다가 position: relative 로 지정한 까닭은 -> cir 이 position: absolute 로 지정해주기 위함이다. 2021.09.21 - [html , css] - CSS - 수직 가운데 정렬, position 속성 애니메이션 속성을 지정하려면 @keyframes 이름 이렇게 써야 한다. 이번엔 이런 애니메이션을 만들어 볼 것이다. lnb01 lnb02 lnb03 lnb04 lnb05 rec 전체는 wrap 으로 감싸고 있고, 그 안에 lnb 와 rec 가 존재한다. animation-direction : alternate -> 역방향으로도 진행할 수 있게 한다. 이 속성을 지정한..

이렇게 간단한 div 태그가 있다고 하자. rec 에 transition-duration : 3s 를 설정하면 변화하는데 3초가 걸리게 된다. 그래서 마우스를 올리고 있으면 빨강 사각형 -> 초록 사각형으로 3초 동안 천천히 변한다. (마우스를 떼도 마찬가지) :active 는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미. hover 와 active 를 활용하여 간단한 버튼을 만들어 보았다. 여기서는 transition-duration 을 설정하지 않았다. ▼ #wrap .rec { width: 50px; height: 40px; border-radius: 25px; background-color: pink; box-shadow: 1px 4px 0..

오늘은 flexbox 부분을 다시 복습했고 grid 에 대해서 공부 및 정리를 하였다. 특히 grid 는 5년 전 강의와 최신 강의를 둘 다 봤는데 역시 최신 기술로 인해서 좀 더 편하게 HTML, CSS 를 짤 수 있게 된 것 같다고 느꼈다. 옛날엔 하나하나 다 계산을 했구나... 내일은 rem 단위 같은 것들을 공부해야겠다. -> 유튜브 드림 코딩! 그리고 CSS 애니메이션, transition 공부해야지

item1 item2 item3 item4 item5 item6 item7 item8 item9 위의 코드로 기본 세팅을 해주자. 감싸고 있는 부모 container 에게 다음과 같은 속성을 추가하였다. .container { display:grid; grid-template-columns:4fr 6fr; grid-gap:1rem; background-color:lightgray; } 40% 60% 로 나눠진 모습이 보이며, 간격은 1rem 씩이다. %보다 fr 쓸 것을 권장한다. .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; background-color: lightgray; } repeat 를 사용해..

중간의 공백 칸은 각 2%씩 이며(11칸), 양 끝의 공백 칸은 각 1%씩(1% * 2칸 = 2%)이다. 따라서 24% 가 공백이 되겠고, 총 100% - 24% = 76% 가 칸의 공간이 된다. 초록칸은 총 12칸이다. 76% / 12 = (각 초록칸의 크기 : 6.3%) 1칸과 공백 x -> 6.3% 2칸과 공백 2% -> 14.6% 3칸과 공백 4% -> 22.9% ......이렇게 해석하면 된다. 이전 시간에 고정형 그리드는 px 단위를 썼지만 화면 창을 줄이면 컨텐츠들이 움직이지 않았다. (어떠한 액션도 없었다.) 그러나 이번에는 % 단위를 써서 가변형 그리드를 만드는 것이다. 이것은 화면 창을 줄이면 컨텐츠들이 비율을 유지하며 크기가 줄어든다. GNB1 GNB2 GNB3 GNB4 GNB5 LO..

오늘은 자기소개 웹사이트를 한번 만들어 보았다! 그리고 1년 전에 만들었던 유튜브 드림 코딩의 유동적인 상단 헤더바 만들기 영상을 다시 보고 따라 만들었다. 하나도 기억 안난다...★ 개발은 꾸준히 하지 않으면 감을 잃는 것 같다. 나 자신 좀 더 분발하자 Today 자기소개 웹 사이트 만들기 깃허브로 웹 호스팅하기 Tomorrow 유튜브 반응형 웹 만드는 방법 알아보기 자기소개 웹 사이트 최종본 만들기 그리드 사용법 공부해보기

header { } header .gnb { width:100%; background-color:#353535; } header .gnb ul { overflow:hidden; width:1000px; height:30px; line-height:30px; margin:0 auto; } /* line-height 같이 지정해야 수직 가운데로 정렬 된다! */ header li{ float:left; list-style:none; margin-left:50px; font-size:.9em; } float 속성이 너무 어렵다고 생각 되었는데 오늘 어디서 주워듣기론 새로운 기술인 flex 속성을 사용하면 더 편하게 사용할 수 있다고 한다. 순간 급 의욕이 떨어졌다.... 그래도 다음 사이트를 소스 검사 해보니..

이번 시간은 강사님이 한거 보고난 뒤 안보고 스스로 야후 사이트(언제적 야후 사이트냐....) 를 만들어보기로 했다. 강사님이 만든 것↓ header 의 경계가 살짝 헷갈렸는데 강사님은 search 창까지 묶어주었다! 상단 header_nav 부분에서 리스트와 FireFox 부분 모두 각각 div 로 묶었다. 그리고 리스트는 그대로 냅두고 FireFox 부분을 float: right 속성을 주었다. 상단 div id=header_info 부분에서 야후 로고 이미지, 검색창, 서비스 모두 div class 로 묶었다. -> div 로 다 묶어주는구나.... 또한 로고 이미지에 float : left 속성을 주고, 서비스는 float..

first second first second 코드를 안보고 맞게 잘 구현했으나 가독성이 조금 부족한 것 같다고 느껴져서 복습하자는 의미로 코드를 올렸다. 이렇게 width 와 margin: 0 auto 를 한 줄에 써주고, 각 객체의 너비와 높이도 한 줄에 쓰니까 좀 더 보기가 편안해 보였다. 그리고 overflow : hidden 속성을 "감싸고 있는 객체" 에게 꼭 써주자는 걸 명심하자! 서울시 중소기업의 지식재산 역량제고를 통한 신성장동력 창출 Seoul Intellectual Property Center 「서울지식재산센터」는 서울소재 중소·벤처기업을 대상으로 지식재산 종합컨설팅, 국내·외 특허출원 지원 등 지식재산권에 대한 One-Stop Total Solution을 제공하여 기술혁신을 통한 기..

menu1 menu2 menu3 menu4 menu5 line-height 는 행간 사이즈 조절. height : 300px 인데, line-height : 300px 로 주면 수직 가운데로 올 수 있다. body 부분이다. HTML5, CSS3 Document To. all member html5, CSS3 study is very easy html5, CSS3 study is very easy html5, CSS3 study is very easy From. SBA 서울산업진흥원 a 태그↓ _blank : 새 창에서 열림 style 부분이다. :nth-child 속성을 쓸 때 아마도 태그들을 다 포함하여 세는 것 같다. position position은 위치 값을 설정해주는 변수이다. position..