Category – CSS3
5 posts tagged with "CSS3" (See all categories)

CSS3 icon
iOS input box inner shadow

21.11.20181 Min Read — In CSS3

iOS 에서 input box를 보면 안쪽 상단에 shadow 가 있는걸 알게 보게 되었다. 난 넣은 적이 없는데... 찾아보니 iOS 에서 기본적으로 설정되어 있는 테마를 기반으로 넣고 있다고 한다. 다음과 같이 css 에 추가 해주면 기본 설정되어 있는 속성이 삭제 된다. 여러 가지 속성들이 있는거 같은데 지금은 모든 설정을 쓰지 않을거고 input…

CSS3 icon
justify-content property

04.11.20182 Min Read — In CSS3

justify-content flex blox를 사용했을 때 자식 요소의 정렬을 정해주는 설정이다. Values 자식 요소들이 앞쪽 기준으로 나열된다. (default…

CSS3 icon
flex-direction property

24.10.20181 Min Read — In CSS3

flex-direction flex container 내부에 자식 요소들을 어떻게 배열할 것인지를 설정하는 속성 값이다. values 값으로는 row, row-reverse, column, column-reverse 4개를 가질 수 있다. row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따른다고 한다. column 혹은 column…

CSS3 icon
CSS Property Word Wrap

19.10.20111 Min Read — In CSS3

마크업 작업을 하다보면 한글은 자동으로 줄바꿈이 되는데 영문(띄어쓰기 안된경)인 경우 줄바꿈이 되지 않고 박스 밖으로 쭉 나가는 경우가 있다. 진짜 그런지 함 확인해 보자. 한글인 경우 영문인 경우 위와 같이 영문인경우 줄바꿈이 제대로 이루어지지 않아서 박 밖으로 삐져 나가는 경우가 생겨서 놀라는 일이 생긴다. 요런 경우 css 속성중에 word-wrap…

CSS3 icon
CSS Webkit Hack

17.10.20111 Min Read — In CSS3

마크업 작업을 하다 보면 드물지만 webkit(chrome, safari)만 다르게 보일때가 있다. 이런 경우 css 에서 처리 해줄수 있는 방법이 이 없을까 하다가 검색해서 나온것이 media query 를 이용한 것이였다. 사용 방법은 다음과 같다. 직접 CSS 파일에 입력할 경우 Webkit 용 CSS 파일을 따로 만들어서 include 시킬 경우