이레

css로 말풍선 만들기입니다. 말풍선의 뾰족함의 정도는 after의 border-radius를 조절하면 됩니다. 크기도 마찬가지 *codepen 참고 See the Pen 말풍선만들기 by jh-baek-95 (@jh-baek-95) on CodePen.

웹 접근성이란? 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킵니다. 자세한 방법에 대해선 따로 정리하겠습니다. blind css 콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우 사용합니다. 우선, 콘텐츠를 숨기는 방법 중 display:none과 visibility:hidden , font-size:0, line-height:0, width:0, height:0과 같이 화면에서 영역이 잡히지 않는 속성들이 있습니다. 이런 속성들은 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않은 속성입니다. 스크린리더는 width, height가 0인 속성들은 읽을 수 없으므로, 사이즈는 최소 1px 이상으로 해야 합니다. 아래 css는 제가 사용하..

종종 작업을 하다 보면 디자인에 맞춰 스크롤바를 커스텀해야 할 경우가 생깁니다. (티스토리도 적용가능) See the Pen 스크롤바 커스텀 by jh-baek-95 (@jh-baek-95) on CodePen.

프로젝트를 하다 보면 팝업창을 만들어야 하는 경우가 자주 있습니다. 팝업 종류에는 여러가지가 있는데, 오늘 정리할 것은 '모달 팝업'입니다. (혹은 레이어 팝업) ⭐️ modal popup 만들기 1, 딤(Dim) 배경 2, 팝업 큰틀 3, 팝업 오픈 클로즈 이벤트 만들기 1, 배경 팝업을 강조하기 위해 딤(Dim)/딤드(Dimmed)라고 하는 배경을 만들어줍니다. 스크롤이 생겨도 고정되게 position 은 fixed로 잡고 화면에 꽉 차게 하기 위해 width, height 100%으로 줍니다. 보통 팝업의 배경(Dim)은 반투명 검은색입니다. background : rgba(0, 0, 0, 0.3)으로 설정해줍니다. 0.3은 투명도이기 때문에 원하는 정도로 조절하시면 됩니다. .modal-bg {w..

css로 text에 줄 효과주기 입니다. 앞으로도 추가할 예정 1, 형광펜 효과주기 기본 mark 태그 사용 mark 태그의 컬러변경 형광펜 그러데이션 효과주기 글씨의 반절, 형광펜으로 그은듯한 효과 See the Pen Untitled by jh-baek-95 (@jh-baek-95) on CodePen. 2, 기본 text-decoration See the Pen text-decoration by jh-baek-95 (@jh-baek-95) on CodePen.

퍼블 작업을 하다 보면 화살표 아이콘을 자주 사용하게 되는데, 이미지를 사용할때도 있지만 태그를 사용해 만들기도 합니다. border 위와 옆면만 있는 박스를 만든 후 rotate를 시키면 됩니다. * codepen 참조 See the Pen after로 화살표 만들기 by jh-baek-95 (@jh-baek-95) on CodePen.

오늘은 css를 작성했을 때, 스타일이 적용되는 우선순위에 대해 정리해볼게요. 작업할 때 이런 규칙에 대해 알고 있어야 css내에서 충돌이 나지않습니다. 작업을 하다 보면 하나의 태그에 여러 가지 스타일을 주는 경우가 있는데, 이때 특정한 규칙에 따라 우선순위가 부여되는 것입니다. 순서 대로 나열해 보자면, ⭐️우선순위⭐️ 속성 값 뒤에! important를 붙인 속성 html 내에 style을 직접 지정한 속성 #id로 지정한 속성 .클래스, :추상클래스로 지정한 속성 (추상 클래스> 클래스) 태그 이름으로 지정한 속성 상위 객체에 의해 상속된 속성 이 순서입니다. 만약 모든 순서가 다 같다면 제일 나중에 선언된 스타일이 적용됩니다.

css로 정렬시키는 방법이 여러 가지 있는데, 오늘은 float에 대해서 정리해볼게요. float만의 특징이 있기 때문에, 조심해서 사용해야 합니다. 단어의 뜻 그대로 '뜨다'라는 성질이 있기 때문에 태그들이 나란히 있다가 그중 하나가 float 속성이 들어가면, 그 사이에서 붕 뜨게 됩니다. display:block 속성을 무시하는 거죠 float는 left 정렬과 right 정렬이 있는데 (inherit, none 제외) float이 설정된 요소는 브라우저가 높이를 인지를 못하는 큰 문제점이 있습니다. 이때 float 끊기라는 것을 해주면 되는데, 여러 가지 방법이 있습니다. float의 부모에게 강제적으로 높잇값 주기 -> 반응형일때 자동 높이값 설정 불가능 float의 부모에게 overflow:h..

웹폰트란? 방문자의 로컬 컴퓨터의 폰트 설치 여부와 상관없이 온라인 특정 서버에 위치한 폰트를 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. @font-face를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게 합니다. font-face 규칙은 css3에서 새롭게 추가된 규칙입니다. html 문서에서 웹폰트를 적용할 때 사용하는 규칙으로, 웹 서버에 저장되어 있는 글꼴을 내려받아 화면에 표시해 주는 방식입니다. 간단히 말해서 웹브라우저에게 다운받은 서체의 이름과 위치를 알려주는 거죠 *작성법 @font-face { font-family: src: [, ]*; font-weight: ; font-style: ; } font-family : 폰트명을 지정합니다. : 폰트의 위치를 나타내는 UR..

오늘은 일하면서 자주 썼던 input type 에 대해서 정리해볼게요. 인풋태그의 타입은 굉장히 다양하지만, 저는 아직 몇가지 타입밖에 써보질 못했어요. 제일 많이 사용하는 타입 순서대로 나열해보자면, 이렇게 5가지 정도 됩니다. 1, input type="text" 말 그대로 text 타입이다. 한줄의 입력필드가 생성된다. 2, input type="checkbox" 클릭하면 체크되고, 다시 클릭하면 체크가 풀리는 체크박스 name = 전달할 값의 이름 value = 전달한 값 checked = 선택된 상태로 표현된다. * 체크박스는 여러개 선택 가능 * label태그와 같이 쓸 경우엔 input 의 id 와 label 의 for를 동일하게 줘야한다. 그래야 라벨태그 클릭했을때 체크박스에 체크가 들어간..