Helloworld!/CSS 검색 결과

해당 글 31건

[CSS] deep selector

부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용 CSS 에서 사용 하는 방법 .parent-class >>> .child-class { /* ... */ } // 1번째 사용 방법 .parent-class[data-v-f3f3eg9] .child-class { /* ... */ } // 2번째 사용 방법 SCSS 에서 사용하는 방법 .parent-class { // 1번째 사용 방법 : 이 방법은 deprecated 될 예정이라 2번째 사용 방법으로 사용하자 & /deep/ .child-class { background-color: #000; } } .parent-class { // 2번째 사용 방법 &::v-deep .child-class { backgr..
Helloworld!/CSS 2019. 6. 27. 14:05

[CSS] Flex Div 안에 이미지 사용시 IE Bug

IE 에서 flex div 안에 이미지를 넣고 flex 크기에 따라 이미지 크기도 가변되도록 넣어놓았을 시 resizing 이 안되는 버그가 있다. 예를들어 이미지 원본 사이즈가 500px * 500px 인 이미지가 300px * 300px 인 이미지로 resizing 되면서 다음 그림 처럼 위아래 여백이 발생을 한다. 위와 같은 현상이 일어났을 때 방면으로 이미지를 감싸고 있는 flex div 에 다음과 같이 css 로 min-height 값을 넣어주면 해결된다. min-height: 1px; 참고 사이트 : https://github.com/philipwalton/flexbugs/issues/75
Helloworld!/CSS 2019. 6. 27. 13:44

[CSS] padding 값으로 인해 anchor 위치가 달라졌을 경우

bootstrap의 navbar를 페이지 제일 상단에 들어가다록 홈페이지를 만들었을 경우 body에 navbar의 공간을 공백을 준 뒤 body의 내용이 나오도록 해야한다. 이럴 때 body 스타일에 padding-top 값을 navbar 공간만큼 넣어주는데 예를 들어 다음과 같다 //... 그런데 여기서 anchor(a) 태그를 써서 책갈피 형태로 페이지 제일 하단에서 페이지 제일 상단으로 보내는 방법을 쓰려하는데 body에 있는 padding-top 값 때문에 원래 지정해놨던 anchor 위치보다 아래로 보여진다. 이럴 땐 다음과 같이 하면 된다 //... 참고 사이트 : http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to..
Helloworld!/CSS 2016. 6. 9. 15:03

[CSS] Div 가운데 정렬하는 방법

css의 postion 을 써서 div 박스를 가운데하려고 하는데 은근 복잡하고 막상 뜻대로 잘 안돼서 할때마다 항상 버벅인다. 이번에도 그래서...ㅎㅎㅎ 방법을 찾으려고 검색하다가 명쾌하게 정리해놓은 사이트가있어서 메모한다. 다음은 wrap이라는 div안에 center_box 라는 div를 wrap이라는 div를 기준으로 가운데 정렬하려 하는 예시이다. - html test - css .wrap { width: 100%; position: relative; background: red } .center_box { width: 300px; hegiht: 200px; position: absolute; background: blue; top: 50%; left: 50%; margin-top: -100px;..
Helloworld!/CSS 2016. 2. 5. 15:37

[CSS] 텍스트 줄바꿈 관련 CSS - white-space, word-break, text-overflow

1. white-space : 글자 공백 처리[ 예시 텍스트 ]여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파- normal : 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식. 지정된 넓이의 끝에서 자동으로 줄바꿈- pre : 입력한 칸 수대로 줄바꿈도 엔터친 그대로 보여좀. 넘어가는 부분에서 강제 줄바꿈 되지 않음- nowrap : 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식. 넓이가 지정되있어도 자동으로 줄바꿈을 하지 않는다. 2. word-break : 글자가 넘칠 경우 처리 방식. 텍스트가 들어가는 블럭 요소의 넓이에 맞춰 줄바꿈 (강제 줄바꿈 방지, 텍스트길이 제한 등에 사용)- normal : 기본값, 단어 단위로 끊어서 줄바꿈 (단어 단위로 줄바꿈되어 오른쪽 공간..
Helloworld!/CSS 2016. 1. 27. 09:45

[CSS] 미디어 쿼리

웹을 만들다보면 PC 모니터의 크기도 모자라서 모바일까지 가세해 요즘 웹화면을 보는 방식이 매우 다양해졌다. 따라서 이런 다양해진 화면 크기에 따라 유동적으로 웹화면이 변화되도록 하기 위해서 CSS에 '미디어 쿼리'라는 방법을 쓴다고 한다. 우선 미디어 쿼리는 크롬, 파이어폭스, 오페라, 사파리, 익스플로러에서 모두 지원해주니 화면별로 크기를 맞췄건만 브라우저별로 안되는 CSS 스타일이 있을까봐 걱정할필요는 없다느거 ㅎㅎㅎ 단, IE 9 버전 부터 지원된다는점...! 1. 미디어 쿼리 사용법 @media mediaType and|not|only (조건문) { css... } 위처럼 사용 된다. 1) media type : media type 에 들어가는 옵션은 다음과 같다 - all : 기본값. (med..
Helloworld!/CSS 2016. 1. 26. 17:43

[CSS] Spin animation - loading

CSS3 에서 애니메이션이라는 속성을 쓰면 플래쉬처럼 움직이는 객체를 만들 수 있다.다음 예시는 요즘 흔히 보는 로딩화면에서 쓰이는 원형이 움직이는 애니메이션을 CSS3로 구현한 예시이다.HTML은 다음과 같이 div 태그에 클래스명을 spinner 라고 넣어주고CSS로 동그란 모양과 색상, 애니메이션을 입혀주면 된다. HTML CSS .spinner { width: 50px; height: 50px; margin: 0 auto 1rem; border: 3px solid #EAEAEA; border-radius: 50%; border-left-color: transparent; border-right-color: transparent; -webkit-animation:spin 1000ms infinite..
Helloworld!/CSS 2015. 8. 11. 11:52

[CSS] 동위 선택자

선택자 A + 선택자 B : 선택자 바로 뒤에 위치하는 선택자 B 를 선택 선택자 A ~ 선택자 B : 선택자 A 뒤에 위치하는 선택자 B 를 선택 Header 1 Header 2 Header 3 Header 4 일때 h1 + h2 { color : red } 로 하면 Header 1과 Header 2만 텍스트 색이 빨간색으로 변한다. h1 ~ h2 { color : red } 로 하면 Header 1과 Header 2,3,4 모두 텍스트 색이 빨간색으로 변한다. 즉, h1 바로 뒤에있는 h2 단 하나만 선택하고 싶을때 + h1 뒤에있는 모든 h2 를 선택하고 싶을때 ~ 를 사용한다
Helloworld!/CSS 2015. 7. 9. 16:57