CSS를 이용해서 Element를 숨기는 방법

CSS를 이용해서 Element를 숨기는 방법

Element 숨기기 Element를 숨기는 방법은 여러 방법이 있지만 그중에서 비용이 적게 들고 쉽게 할 수 있는 방법으로 CSS를 이용하는 방법이 있다. 기본적인 형태는 아래와 같다. See the Pen Untitled by JJJ (@JJJ-the-animator) on CodePen. 여기서 2번을 숨길 것이다. CSS를 이용해서 Element를 숨기는 대표적인 방법 3가지는 아래와 같다. 1. display 속성 display : none 을 이용한다. See the Pen Untitled by JJJ (@JJJ-the-animator) on CodePen. 2. visibility 속성 visibility : hidden 을 이용한다. ( 2번 자리에 마우스를 올려보세요. ) See the ..

  • format_list_bulleted HTML & CSS
  • · 2023. 8. 11.
  • textsms
CSS - animation (애니메이션)

CSS - animation (애니메이션)

최근 github 개인 페이지를 만들면서 가장 기억에 남는 CSS효과였던 애니메이션 속성에 대해서 활용도가 많을 것 같아서 정리해봤다. 쉽게 애니메이션 효과를 줄 수 있기 때문에 알아두면 좋을 것 같다. CSS3 애니메이션 애니메이션을 나타내는 CSS와 중간 상태를 나타내는 키프레임으로 이루어져 있다. CSS 애니메이션의 장점 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 된다. 보이지 않는 엘리먼트에 대한 애니메이션은 업데이트를 줄여 부하를 최소화할 수 있다. 애니메이션 적용하기 animation 속성과 이 속성의 하위 속성을 지정해야 한다. 애니메이션의 총 시간과 반복 여부를 지정할 수 있..

  • format_list_bulleted HTML & CSS
  • · 2022. 12. 19.
  • textsms
HTML - form / 데이터 수집

HTML - form / 데이터 수집

HTML-form 태그 form 태그 : 사용자가 제공하는 데이터를 서버에 저장시키기 위해 사용하는 태그 (사용자의 데이터를 수집한다.) 로그인 아직도 회원이 아니신가요? 회원가입 input 태그를 이용할 때 form 태그를 상위 태그로 사용해 데이터를 서버에서 저장한다. form태그를 쓸 때는 상위에 다른 엘리먼트로 감싸서 사용하는 것을 권장한다. form 태그의 필수 속성으로 속성 method 와 속성 action이 있다. 속성 action 과 속성 method action의 속성 값은 “링크” 이다. (button type=”submit” 과 연동해서 작동한다.) method의 속성 값은 get 과 post가 있다. (초기값은 get) get 의 특징 쿼리스트링(queryString) 형태로 전달된..

  • format_list_bulleted HTML & CSS
  • · 2022. 10. 28.
  • textsms
CSS - flex box : display flex, CSS 개구리게임 (flex 게임)

CSS - flex box : display flex, CSS 개구리게임 (flex 게임)

기존에 레이아웃을 구성할 때는 각 요소에 원하는 위치 조절 속성 ( display, position, float)을 이용하여 각 요소들을 직접 이동시켰다. 그래서 CSS에서 각 요소마다 위치를 정해주는 속성 및 속성 값을 사용하면서 코드 줄이 길어졌는데, flexbox를 이용하면 간단하게 레이아웃을 구성할 수 있게 된다. CSS - position (블럭 위치조절 3가지 방법) CSS - position (블럭 위치조절 3가지 방법) CSS 블럭 위치 조절 3가지 방법 display : inline-block 속성 float 속성 position **포지션을 쓰면 z-index를 다 써주는 것이 좋다. display : inline-block 속성 display 의 속성 값으론 inline , inlin..

  • format_list_bulleted HTML & CSS
  • · 2022. 10. 26.
  • textsms
CSS 선택자, CSS 속성과 속성값

CSS 선택자, CSS 속성과 속성값

CSS 선택자, 속성, 속성값 선택자란? 말 그대로 선택을 해주는 요소, CSS 규칙을 적용할 요소를 뜻한다. 선택자는 크게 기본 선택자, 그룹 선택자, 결합자 등이 있다. (기존에 선택자를 잘 못 이해했던 것 같다. 속성이나 속성 값은 참고!) https://baekspace.tistory.com/19?category=1126488 CSS 기초 CSS CSS : Cascading Style Sheets 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트 CSS 선택자 선택자 예시 설명 # #header{} id . .header{} class (element) body{} 엘리먼트 전체 * *{} 전체 > ul > l.. baekspace.tistory.com /*기본 문법*/ 선택자 { 속성 : ..

  • format_list_bulleted HTML & CSS
  • · 2022. 10. 21.
  • textsms
CSS란?-CSS를 적용하는 3가지 방법

CSS란?-CSS를 적용하는 3가지 방법

1. CSS란? Cascading Style Sheets HTML은 데이터를 구분해주는 정도까지만 역할을 한다. 그 데이터를 꾸며주고 모양을 만들어주는 역할은 CSS가 한다. CSS는 단독으로 사용할 수 없고, HTML이랑 같이 사용해야 한다. 2. CSS를 적용시키는 3가지 방법 1. inline 스타일로 작성하기 html 파일에서 엘리멘트 옆에 style 속성을 이용하여 작성한다. 2. 를 이용하여 작성하기 안에 태그를 이용하여 작성한다. CSS문법을 사용해야 하며, 선택자 { 속성 : 속성값 ; } 3. 외부파일을 이용하여 작성하기 ⭐️중요!!!⭐️ 안에 태그를 이용하여 작성한다. /* " " 안에는 파일을 경로로 작성하여 준다 */ 1번에 방법의 비해 2번, 3번을 많이 쓰는 이유는 선택자를 이용..

  • format_list_bulleted HTML & CSS
  • · 2022. 10. 21.
  • textsms
728x90