'웹 언어 배우기/CSS' 카테고리의 글 목록

웹 언어 배우기/CSS (11)

CSS 생략기호 만들기(한줄, 멀티)

웹 언어 배우기/CSS 다한(dahan) 2020. 6. 23. 16:00

박스 형태나 한정된 width 값을 가지고 있을 때 CSS로 생략 기호를 만들 수 있습니다. See the Pen css 생략기호 1줄 / 멀티 by Cho-YoungHo (@choyoungho-web) on CodePen. CSS에서는 한줄과 멀티의 형태로 생략기호를 만들 수 있습니다. 공통적인 코드는 다음과 같습니다. width:300px; overflow: hidden; text-overflow: ellipsis; overflow 속성은 width 값과 height 값을 넘어간 글자에 대해서 숨기거나 스크롤이 생기게 할 수 있습니다. text-overflow 속성은 overflow된 내용을 사용자에게 어떻게 전달할지 지정합니다. 기본값은 clip으로 잘린 채 아무 것도 없습니다. 반면 ellipsi..

CSS 가상 요소 before, after 의미

웹 언어 배우기/CSS 다한(dahan) 2020. 5. 29. 07:00

가상 요소 CSS에서 제공되는 가상 요소 중 before 요소와 after 요소를 사용하면 HTML에서 사용하지 않아도 페이지에 내용을 삽입할 수 있습니다. 흔히 사용하는 곳에는 메뉴에서 선을 표시하거나 생성된 콘텐츠가 요소 콘텐츠보다 앞에 혹은 뒤에 위치하기를 원할 때 사용합니다. 사용법 가상 요소를 사용하기 위해서는 필수로 있어야 하는 것이 content입니다. 이것은 문자열, 이미지, 카운터, 공백을 입력할 수 있지만, HTML 코드는 입력할 수 없습니다. 다음의 예를 살펴보겠습니다. See the Pen pseudo element, ::before, ::after by Cho-YoungHo (@choyoungho-web) on CodePen. 문자열의 경우 텍스트를 기준으로 앞에서 나타나게 하려면..

css를 이용해서 hover dropdown 메뉴 만들기

웹 언어 배우기/CSS 다한(dahan) 2019. 9. 29. 07:30

자바스크립트를 사용하지 않고 css를 이용해서 버튼에 갖다대면 서브 메뉴가 나오는 dropdown 메뉴를 만들어보겠습니다. dropdown 메뉴 만들기 See the Pen hover dropdown menu by Cho-YoungHo (@choyoungho-web) on CodePen. 버튼에 초록색 배경에 하얀색 글자를 적용했고 버튼 선을 없앴습니다. 또한 마우스를 버튼에 갖다대면 #3e8e41의 배경색이 적용됩니다. dropdown 클래스에 인라인 블록 요소를 줘서 버튼에 갖다대면 서브메뉴가 나오도록 했습니다. 만약 inline-block을 주지 않으면 button에 위치한 너비가 100%가 되어 버튼 바깥쪽에 갖다대도 서브메뉴가 나옵니다. 서브메뉴는 기본적으로 나오지 않게 하고 마우스가 버튼에 갖..

selectbox 화살표 꾸미는 방법

웹 언어 배우기/CSS 다한(dahan) 2019. 9. 21. 07:00

CSS에서 selectbox는 네이티브로 꾸미기가 까다롭습니다. 네이티브 즉, 자체 지원으로 기본적으로 커스터마이징을 할 수 없도록 되어있습니다. 그래서 화살표를 직접 꾸미기것이 아닌 없애고 새로운 화살표를 만들어야 합니다. 이미지를 삽입해서 꾸며도 되지만 저는 화살표를 만들겠습니다. 오른쪽 화살표 꾸미는 방법 크롬으로 보면 화살표가 그나마 이쁘게 보이지만 IE로 보면 체크박스형태로 표현된것을 볼 수 있습니다. 크롬, IE 할거없이 화살표를 없애고 커스터마이징으로 직접 꾸미는 방법을 알려드리겠습니다. selectbox 화살표 꾸미기 예제 Example select: select { appearance : none ; -webkit-appearance : none ; } select::-ms-expand ..

CSS 이미지 가운데 정렬 하는 2가지 방법

웹 언어 배우기/CSS 다한(dahan) 2019. 9. 20. 07:00

이미지뿐만 아니라 모든 태그는 기본적으로 왼쪽 정렬이 되어있습니다. 가운데 정렬을 하기 위해서는 웹 표준인 text-align:center을 쓰는 것이 일반적이지만 상황에 따라 다르게 표현해야 할 때도 있습니다. 그 방법에 대해 알아보겠습니다. 이미지 가운데 정렬하는 방법 부모 요소가 있는 경우 Example text-align: div { display : block ; text-align : center ; } img { display : inline; } 직접 해보기 text-align은 left, center, right, justify 속성 값을 가지고 있습니다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있습니다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻입니..

border-collapse / 표의 테두리와 td의 테두리 사이의 간격 처리 속성

웹 언어 배우기/CSS 다한(dahan) 2019. 8. 22. 10:57

border-collapse : 표의 테두리와 td의 테두리 사이의 간격을 어떻게 처리할 지 정하는 속성이다. 속성값에는 기본값인 separate, collapse, inital, inherit이 있다. border-collapse 속성값 separate : 표의 테두리와 td의 테두리 사이에 간격을 둔다. 이때, border-spacing 속성으로 간격의 크기를 나타낼 수 있다. collapse : 표의 테두리와 td의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. inital : 기본값 설정 inherit : 부모 속성의 속성값을 상속받는다. border-collapse 속성 예제 Separate 속성값 a b c aa bb cc Collapse 속성값 a b c aa bb cc

html 폰트 크기에 비례하는 rem 단위 "font-size 속성"

웹 언어 배우기/CSS 다한(dahan) 2019. 1. 15. 07:00

웹 표준이라는 말을 들어보셨나요? 이 용어는 W3C가 지정한 표준안을 지켜 웹사이트를 제작하는 것을 말합니다.이렇게 작성하면 어떤 운영체제나 웹 브라우저 상에서도 비교적 같은 디자인과 기능을 구현하는 데에 목적이라고 할 수 있습니다. 웹 표준이란? 반응형 웹을 만들 때 중요한 반응형 폰트 크기에 대해 알아보겠습니다. px x em x rem 단위 px, em, rem은 상대 단위와 절대 단위로 나뉠 수 있습니다. px와 em은 오래전부터 있었지만, rem은 최근에 만들어진 단위입니다. px : 크기가 고정된 단위em, rem : 사용자가 브라우저 설정에 따라서 폰트의 크기가 달라지는 단위 px rem 즉, 사용자가 브라우저의 폰트 크기를 키웠을 때 px는 바뀌지 않고 rem은 바뀝니다.오늘날에는 일반적으..

css float 속성 이해하기

웹 언어 배우기/CSS 다한(dahan) 2018. 12. 31. 07:00

float 속성은 css에서 정렬하기 위해 사용되는 속성입니다. 이뿐만 아니라, 다단의 레이아웃을 구성할 때, 이미지 슬라이더 등에서도 활용할 수 있습니다. 위 사진과 같이 이미지 옆에 글을 쓸 때에서도 사용할 수 있습니다. 이와 비슷하게 display 속성에도 이같이 응용할 수 있는데 이 둘의 차이점은 여백입니다. float 속성 사용법 float : none | left | right none : 기본 속성으로 적용되지 않는다는 의미의 속성값left : 적용된 태그에 대해서 왼쪽 정렬 하는 속성값right : 적용된 태그에 대해서 오른쪽 정렬 하는 속성값 top menu aside footer

1
2

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바