HTML+CSS (10) 썸네일형 리스트형 [ HTML + CSS ] 심심해서 만들어본 커스텀 input 한 번 만들어봐야지 생각만 하고 있다가 갑자기 삘이 와서 만들어봤다. 우선 결과물은 아래와 같다. 참고로 태그명으로 직접 접근해서 나중에 쓸때는 클래스명을 주던가 해야한다. 약간 생각해야 했던 부분은 transition 상태 유지였다. input 태그에 글자가 있으면 효과가 유지돼야 하는데 이를 어떻게 구현할 수 있을까? valid 가상클래스를 활용하면 된다. 나도 이번에 처음 알게된건데 valid는 input 태그가 유효한지 판별해주는 가상클래스다. 가령 email인 경우 input 타입이 'email'이면 HTML이 스스로 유효성 검사를 해준다. 내가 구현하고자 했던 것은 글자가 하나라도 있으면 스타일을 유지하는 것이기 때문에 단순히 input 태그에 'required' 속성을 넣어주고, input .. [ CSS ] 로딩 애니메이션 구현 위와 같은 로딩 애니메이션을 구현해보자. 굉장히 간단해서 딱히 설명할건 없다... 전체 코드는 이 글의 끝에서 확인할 수 있다. 구현 순서는 아래와 같다. 1. 정적인 점 세 개 생성 2. 애니메이션 적용 정적인 점을 생성하는 것은 생략하고, 애니메이션을 어떻게 적용해야 하는지만 살펴보자. 우선 점 세 개에 적용되는 애니메이션은 하나를 제외하고 전부 동일하다. 바로 animation-delay다. 따라서 사실상 공통적으로 적용되는 애니메이션만 구현하면 된다. 애니메이션에 사용되는 속성은 두 가지다. 뭐가 바뀌는지 자세히 보자. 정답은 '크기'와 '투명도'임을 쉽게 알 수 있다. 투명도는 0에서 1로 변하고, 크기는 작아졌다가 커지고 있다. 따라서 opacity와 transform을 사용하면 된다. @ke.. [ HTML+CSS ] box-shadow, text-shadow 1. box-shadow /* 구문 */ box-shadow: inset offset-x offest-y blur color offset-x: 수평 그림자의 offset값 offset-y: 수직 그림자의 offset 값 blur: 그림자 가장자리를 부드럽게 처리하는 정도 (default 0) color: 그림자 색 (default box color) inset: 안쪽 그림자 (optional) 💡 Tip1 그림자 색깔이 연할수록 자연스럽다! vscode에서 색에 마우스 커서를 올리면 아래 그림처럼 뜨는데 표시한 막대를 아래쪽으로 당기면서 원하는 색을 정해보자. 💡 Tip2 그림자는 겹치게 생성할 수 있다. 콤마로 이어주면 된다. See the Pen Untitled by 이찬 (@vexkruqa-the-.. [ HTML+CSS ] CSS 선택자, 가상클래스 정리 기본 선택자 1. 전체 선택자 * /* 전체 요소 선택 */ * { color: green; } 2. 태그 선택자 /* 모든 a 태그 */ a { color: red; } 3. 클래스 선택자 . /* class="spacious" 인 모든 요소 */ .spacious { margin: 2em; } /* 태그중 class="spacious" 인 모든 요소 */ li.spacious { margin: 2em; } /* 태그중 "spacious" 와 "elegant" 를 포함하는 요소 */ /* ex) class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } 4. ID 선택자 # /* id="demo" 요소 선택 */ #demo { bord.. [ HTML+CSS ] Transform, Transition, Animation 이 내용은 필요할때 검색해서 쓰면 되지만... 그래도 한번 정리해 놓으면 쉽게 사용할 수 있으므로... 귀찮아도 정리를 해보자!! [1] Transform 말그대로 '변형' 속성이다. 회전, 크기 조절, 왜곡 등의 효과를 넣을 수 있다. Transition과 Animation과 같이 쓰면 유용하다. 어떤 속성이 있는지 알아보고, 예제까지 살펴보자. 1. 3D Transform rotateX(50deg) : 3차원 평면에서, X축 기준 360도까지 회전시켜주는 속성. 괄호 안에 회전시키고자 하는 각도를 적어주면 된다. rotateY(50deg), rotateZ(50deg) : 3차원 평면에서, 각각 Y축, X축 기준으로 회전시켜주는 속성. 쉬운 이해를 위해 transition과 같이 썼다. 박스에 마우스를.. [ HTML+CSS ] float과 포지셔닝(static, relative, absolute, fixed) 오늘은 html 요소들의 위치를 옮기는 방법에 대해 알아볼 것이다. 1. Float float는 단어뜻 그대로 html 요소를 띄우는 역할을 한다. '박스 모델을 띄운다'가 정확한 표현인 것 같다. 예를 들어 아래와 같이 세 개의 div 태그가 있다고 해보자. 각 요소는 배경색으로 구분할 수 있다. See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen. 여기서 가장 상위의 박스 width를 20vw로 설정하고 'float: left' 속성을 부여해보자. 박스를 왼쪽으로 띄운다는 뜻이다. See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen. 결과 분석해보자. 원래 div 태.. [ HTML+CSS ] grid 쉽게 쓰자 grid를 배우는 이유는 레이아웃을 잡기 위해서다. 오직 한 가지 방법으로 웬만한 레이아웃은 다 구현할 수 있는 방법을 소개한다. 어떻게 보면 좀 무식한 방법일 수도 있는데.. 레이아웃이란게 한번만 윤곽을 잡으면 이후로 건드릴 필요가 거의 없기 때문에 '구현만 하면 되지 뭐' 마인드다. 근데 막상 구현해보면 생각보다 직관적이어서 '오 괜찮은데?' 라는 생각이 들 수도 있다. 아님 말고. 여기를 참고했다!! 무작정 따라하면서 익혀보자. 단계만 잘 따라가면 된다. 먼저 구현하고 싶은 레이아웃을 정하자. 간단한 것도 좋고, 굉장히 복잡한 것도 상관없다. 본인이 원하는 레이아웃을 하나 정하고 따라해보기를 바란다. 내가 구현하고자 하는 레이아웃은 아래와 같다. 1. 구역마다 div 태그를 하나 만든다. 내가 구현.. [ HTML+CSS ] Display 종류( block, inline inline-block, flex) 오늘의 주제는 display 속성이다. 제목과 같이 display에는 네 가지 종류가 있다. 네 가지가 어떻게 다른지 살펴보자. 모든 내용은 스탠포드 대학교 강의자료와 MDN 웹문서를 참고했다. 스탠포드 가고싶다. 우선... box-model에 대해 먼저 짚고 넘어가자. HTML 요소들은 대부분 box-model로 이루어져 있다. box-model은 아래와 같이 생겼다. 처음에는 왜 굳이 이렇게 만들었을까 싶었지만 HTML/CSS로 간단한 웹페이지를 제작해보면 box-model의 필요성을 바로 알 수 있다. HTML에서 어떤 태그를 생성하면 기본적으로 컨텐츠는 아래와 같이 박스 안에 감싸지게 된다. 앞으로 display 차이를 쉽게 확인하기 위해 박스의 width와 height를 설정해줄텐데, 아무런 설.. 이전 1 2 다음
