Seemingly Online
close
프로필 배경
프로필 로고

Seemingly Online

  • 카테고리 (571)
    • Language (250)
      • 알고리즘 (100)
      • Java (144)
      • python (2)
      • Kotlin (4)
    • WEB (141)
      • Spring (24)
      • Spring Security (3)
      • Next.js (3)
      • TypeScript (3)
      • JavaScript (45)
      • jQuery (7)
      • CSS (25)
      • XML (3)
      • Maven (1)
      • Gradle (1)
      • JSP (1)
      • Thymeleaf (10)
      • HTML (11)
      • MyBatis (1)
      • JPA (3)
    • App (45)
      • Flutter (34)
      • Dart (4)
      • Android (2)
      • IOS (3)
      • Firebase (2)
    • Git (6)
      • GitHub (6)
    • AWS (15)
      • SCT (2)
      • Amazon Aurora (1)
      • S3 (2)
      • EventBridge (1)
      • EC2 (7)
      • EFS (1)
    • DataBase (44)
      • MySQL (19)
      • Oracle SQL (19)
      • Postgre-SQL (6)
    • OS (33)
      • Linux (27)
      • Windows (1)
      • Mac (5)
    • Tool (15)
      • DocKer (6)
      • Intellij (7)
      • VScode (2)
    • IT (17)
      • Developer-etc (13)
      • 개발상식 (4)
    • CodePen (2)
      • 캐러셀 (2)
  • 홈
  • 방명록
html/css 드롭다운 메뉴 만들기 [No JavaScript!!]

html/css 드롭다운 메뉴 만들기 [No JavaScript!!]

2024-05-281. 방법 ::after 선택자를 이용해 가상의 html 영역을 만들고 이후 해당 부분을 hover 하는 방식을 이용해 간단하게 드롭다운 메뉴를 구현할 수 있다. 코드를 살펴보자.2. html menu sub1 sub2  코드는 간단하다. 우선적으로 hover 를 진행할 메뉴를 만들고 이후 드롭다운 메뉴리스트를 만들면 된다. 위의 코드에서는 menu 클래스가 호버를 진행할 항목이고 sub_menu 가 드롭다운이 되는 메뉴이다.3. css 처음 방법에서 소개했던 것과 같이 menu 에 가상 영역 ::after를 만들고 해당 부분을 호버시에 sub_menu의 display 가 flex 가 되면서 드롭다운 영역이 나타나게 된다. .menu { position: rel..

  • format_list_bulleted WEB/CSS
  • · 2024. 5. 27.
  • textsms
[CSS] css 에서 overflow: scroll  ui 지우는 방법

[CSS] css 에서 overflow: scroll ui 지우는 방법

2024-01-11 1. 방법 /* (Chrome, Safari) 에서 제거하기 */ .your_tag_class_name::-webkit-scrollbar { width: 0 !important; } /* Firefox 에서 제거하기 */ .your_tag_class_name { scrollbar-width: none; } 메인 이미지 출처 : 사진: Unsplash의Thomas de LUZE

  • format_list_bulleted WEB/CSS
  • · 2024. 1. 11.
  • textsms
[CSS] hover 시 뒷 배경만 흐리게 하는 방법

[CSS] hover 시 뒷 배경만 흐리게 하는 방법

2024-01-02 1. 방법 아래와 같이 div 안에 텍스트가 존재한다고 가정해 보자. 목표는 내부 텍스트는 그대로 유지하고 배경 또는이미지만 blur 처리를 해보는 것이다. html Hello world css .test_div { position: relative; width: 500px; /* 슬라이드를 100% 너비로 표시 */ height: 500px; } .test_div::before { content: ""; background-color: red; width: 375px; height: 500px; filter: blur(0px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .test_div:hove..

  • format_list_bulleted WEB/CSS
  • · 2024. 1. 2.
  • textsms
[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법

[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법

2023-12-29 1. 예제 Flex를 선언한 부모 태그에서 아래와 같은 align-tems: center를 선언하게 되면 자식 태그들의 위치는 가운데로 정렬 되게 된다. 하지만 자식 태그들 중 어떤 태그는 좌측 어떤 태그는 우측에 위치시키여 하는 경우가 생기는데 이를 해결하는 방법을 알아보자. align-items: center; 아래의 코드는 세로 방향으로 flex 를 선언한 태그이다. HTML CSS .test_main_div{ border: 1px solid #C9CACA; display: flex; width: 1000px; flex-direction: column; align-items: center; } .test_div1{ width: 100px; height: 100px; margin:..

  • format_list_bulleted WEB/CSS
  • · 2023. 12. 29.
  • textsms
[CSS] CSS 배경색 지우는 방법 / 배경 투명하게 하는 방법

[CSS] CSS 배경색 지우는 방법 / 배경 투명하게 하는 방법

2021-05-10 - 코드 기존에 적용한 배경색을 지우는 코드는 아래와 같다. background-color: transparent; 지운다는 의미보다는 투명하게 바꾼다는 의미가 좀 더 맞으며, transparent 자체가 사전적인 뜻으로 투명이라는 의미를 가지고 있다. 메인 이미지 출처: Photo by Emma Harrisova on Unsplash

  • format_list_bulleted WEB/CSS
  • · 2021. 5. 10.
  • textsms
[CSS] CSS display:flex 통한 화면 구성 알아보기 (기초).

[CSS] CSS display:flex 통한 화면 구성 알아보기 (기초).

2021-05-09 - 예제 예제는 하나의 컨테이너 div 안에 3개의 div가 들어 있는 구조로 만들었다. 이 예제를 통해 display:flex의 적용 효과를 알아보도록 하자. 코드를 웹상에 나타내면 아래와 같이 나타난다. - display:flex 적용 다른 코드를 건드리지 않고 컨테이너 div에만 display:flex 속성을 부여해보겠다. 그러면 아래와 같이 내부에 있는 div 속성이 컨테이너를 기준으로 가로로 정렬된 것을 확인할 수 있다. 이와 같은 결과는 웹 관리자 도구로 보면 좀 더 쉽게 이해가 되는데, 아래의 이미지를 보자. flex 옵션을 준 결과 내부의 div 요소들은 컨테이너 div를 기준으로 inline 요소와 같이 변경되었다. 내부의 div 요소중 가장 높이가 긴 div기준(여기..

  • format_list_bulleted WEB/CSS
  • · 2021. 5. 9.
  • textsms
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • 5
  • navigate_next
공지사항
전체 카테고리
  • 카테고리 (571)
    • Language (250)
      • 알고리즘 (100)
      • Java (144)
      • python (2)
      • Kotlin (4)
    • WEB (141)
      • Spring (24)
      • Spring Security (3)
      • Next.js (3)
      • TypeScript (3)
      • JavaScript (45)
      • jQuery (7)
      • CSS (25)
      • XML (3)
      • Maven (1)
      • Gradle (1)
      • JSP (1)
      • Thymeleaf (10)
      • HTML (11)
      • MyBatis (1)
      • JPA (3)
    • App (45)
      • Flutter (34)
      • Dart (4)
      • Android (2)
      • IOS (3)
      • Firebase (2)
    • Git (6)
      • GitHub (6)
    • AWS (15)
      • SCT (2)
      • Amazon Aurora (1)
      • S3 (2)
      • EventBridge (1)
      • EC2 (7)
      • EFS (1)
    • DataBase (44)
      • MySQL (19)
      • Oracle SQL (19)
      • Postgre-SQL (6)
    • OS (33)
      • Linux (27)
      • Windows (1)
      • Mac (5)
    • Tool (15)
      • DocKer (6)
      • Intellij (7)
      • VScode (2)
    • IT (17)
      • Developer-etc (13)
      • 개발상식 (4)
    • CodePen (2)
      • 캐러셀 (2)
최근 글
인기 글
최근 댓글
태그
  • #Java8
  • #자바기초
  • #BOJ
  • #백준알고리즘
  • #backjoon
  • #자바
  • #자바알고리즘
  • #백준
  • #Java
  • #자바공부
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바