https://studiomeal.com/archives/533

CSS의 display 속성에 대해 알아보도록 하자.

삼각형과 사각형을 활용하여 말풍선을 만들어보려고 한다. 참고로 삼각형은 화살표로 쓰일 예정 🙂

오늘은 nth-of-type() 속성에 대해서 알아보려고 한다 :) :nth-of-type() CSS 는 동일한 유형(태그 이름)의 형제 간의 위치를 기반으로 요소를 찾는다.

기존 웹 서비스에서 띄어주고 있는 팝업의 크기가 작아 사용성이 떨어진다는 피드백을 받았다. 팝업 크기를 full screen으로 띄워주면 좋을 것 같아 수정 작업을 진행했다.

요소를 투명하게 만드는 속성인 opacity 에 대해 소개하고자 한다.

긴 단어를 처리하는 방법에 대해서 알아보자. 많은 방법이 있겠지만 CSS의 word-wrap 속성에 대해 소개하고자 한다.

hover 관련한 CSS를 추가하는 작업을 해야 했다. 테스트를 위해서 개발자 도구를 사용하려고 했지만, 동시에 함께 클릭할 수 없었다.

css 애니메이션을 수정해야 하는 일이 생겨 css 애니메이션에 대해 알아보는 시간을 가졌다. ✌CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 한다. 키 프레임(keyframe)에는 특정한 시간에 해당 요

UI에 데이터 목록을 표시하던 도중 글자수가 긴 컬럼에 대해 '...' 처리(tooltip)를 해야 했다.

vh = viewport heightvw = viewport width현재 실행 중인 스크린 크기에 맞춰 상대적 크기를 반환해준다. 스크린 크기 height = 1000px, width = 800px 라면 1vh = 10px / 1vw = 8px 이 된다. vh는 wi

요즘 youtube 사이트를 클론해보고 있다. 위 캡쳐화면에서 채널정보와 구독버튼을 나란히 오른쪽, 왼쪽 정렬을 하고 싶었다. 하지만 잘 안되더라..🤨 역시 CSS의 길은 멀고도 험난하구나.. 그렇다면 구글링을 하자!!!!

하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다. @media를 사용하여 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 css 블록을 적용할 수 있다. 미디어 쿼리란? 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화

overflow 속성은 요소의 박스에 내용이 더 길때, 어떻게 보일지 선택하는 속성이다. overflow 속성을 이용해서 가로 또는 세로 축만 스크롤바를 생성 시킬려면 어떻게 해야 할까? 바로 overflow-x 와 overflow-y 속성을 사용 하면 된다.overf

요소의 박스에 내용이 더 길 때, 어떻게 보일지 선택하는 속성이다. 위 속성은 상속되지 않는다. visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다.scr

서론 현재 나는 스프링과 JPA 기반 웹 애플리케이션 개발 강의를 복습 중이다. 복습을 하면서 약간의 스타일링과 기능을 추가적으로 구현하려고 한다. 기존 웹 애플리케이션은 검은색 네비바에 버튼같은 경우는 부트스트랩의 primary 색상을 이용하고 있다. 나는 이번 사

visible이 붙어있는 것은 opacity:1 지정함, 불투명도가 1이여서 눈에 보이도록 함. 원래는 opacity의 값이 0이다. opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대이다.스크롤을

index.htmlgoogle font 사용scroll되어서 올라가는 부분, global-width 공통인 부분, 화면 전체의 폭을 결정해줌style.cssbox-sizing: border-box : 내부 패딩이나 보더가 width, height 에 포함되도록 한다.

or순서는 상우하좌 입니다. 시계방향으로 돌아감. 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고 운데, 5px 가 좌우 margin 이다. margin: margin-top margin-bottom;margin: ma

공부를 하던 도중 해당 속성을 이용했더니 깔끔하게 중앙정렬이 되었다. 그래서 그 원리가 궁금했다. 😙😙여기서 0값은 위 아래 여백을 주지 않는다는 의미이다. 즉, margin: ;에서 값은 좌우위아래 여백을 뜻하고, 여기에 '0'이 놓여졌으므로 좌우 위 아래 여백을