JH 개발 블로그

오늘은 위처럼 생긴 검색창을 만들어 볼 것이다. div 태그 안에는 input 태그, img 태그가 들어있다. .search { position: relative; width: 300px; } input { width: 100%; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12px; font-size: 14px; } img { position : absolute; width: 17px; top: 10px; right: 12px; margin: 0; } 부모 태그를 relative 를 하고, input 태그를 width: 100% 를 주어서 부모 공간을 꽉 차게 만든다. 그 후 돋보기 이미지를 부모 태그 안으로 배치하기 위해서는 position:..

이런 효과를 만들고 싶어 구글링하다 보니 어떤 외국 사람이 만든 게시물에서 도움을 얻었다. 출처 : https://webdesign.tutsplus.com/ko/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287 CSS 그리드 이미지 갤러리 제작하기 (Blur 효과와 인터랙션 미디어 쿼리 이용) 이 튜토리얼에서 다수의 일반 섬네일 링크를 가져와서 흐린 hover 효과를 이용한 반응형 CSS 그리드 갤러리로 변신시키겠습니다. 터치 스크린 사용자들도 놓치지 않도록 훌륭한 CSS 트릭도 사용합 webdesign.tutsplus.com 내가 만들 결과물은 아래와 같다. 전부 다 마라탕으..

아래와 같은 애니메이션을 만들 것이다. 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..

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..

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..

margin 과 padding margin 은 바깥 쪽의 여백을 뜻한다. (그림2 의 베이지색과 같음.) 그림 3은 빨간 선으로 사각형이 그어져 있는데 이는 사각형의 원래 크기라는 것이다. 따라서 padding : 10px 은 원래 크기에서 확장시킨 것을 의미한 것이다. 여기서 주의할 것은!! 그림 3에서 내용물을 쓰면 빨간 선 내부에 써지는 것이다. ※ 원래 float : left 를 하면 그 아래에도 속성이 따라 적용되는데, 감싸고 있는 애에게 overflow: hidden 을 주고 안에 들어있는 것들을 float : left 를 하면 그것에만 속성이 적용된다. box-sizing 속성 border 사이즈는 바깥 쪽으로 형성된다. 그러나 border 속성을 주고 그 다음 box-sizing: bord..

CSS3 단위 글자 크기는 px, %, em 단위가 있다. %는 100%가 디폴트.. (100%보다 크면 글자 크기 커진다.) 1em 이 디폴트값 (16px 정도) 2em -> 2배 여기는 간단하게 정리할 부분만 정리하고 넘어가겠다! #content1 p span { display:block; color:#00ff21; font-weight:normal; font-size:50%; } span은 원래 라인 구조지만 dispaly : block 으로 지정하면 아래로 글자가 이동한다. font-size: 50% 는 원래 크기보다 반으로 줄어들게 만드는 속성이다. url() background-image 속성의 속성값으로 많이 사용된다. 이 경우 배경 이미지의 경로를 나타낸다. 해당 이미지는 저작권 보호를 받..