티스토리

shaking blog

검색하기

블로그 홈

shaking blog

88240.tistory.com/m

shaking 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

[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.. 공감수 1 댓글수 0 2019. 6. 27.
[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 공감수 0 댓글수 0 2019. 6. 27.
[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.. 공감수 0 댓글수 0 2016. 6. 9.
[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;.. 공감수 0 댓글수 0 2016. 2. 5.
[CSS] CSS로 소문자를 모두 대문자로 바꾸기 CSS로 소문자를 모두 대문자로 바꾸려면 text-transform 스타일을 쓰면 된다.text-transform :uppercase 공감수 0 댓글수 0 2016. 2. 1.
[CSS] 텍스트 줄바꿈 관련 CSS - white-space, word-break, text-overflow 1. white-space : 글자 공백 처리[ 예시 텍스트 ]여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파- normal : 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식. 지정된 넓이의 끝에서 자동으로 줄바꿈- pre : 입력한 칸 수대로 줄바꿈도 엔터친 그대로 보여좀. 넘어가는 부분에서 강제 줄바꿈 되지 않음- nowrap : 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식. 넓이가 지정되있어도 자동으로 줄바꿈을 하지 않는다. 2. word-break : 글자가 넘칠 경우 처리 방식. 텍스트가 들어가는 블럭 요소의 넓이에 맞춰 줄바꿈 (강제 줄바꿈 방지, 텍스트길이 제한 등에 사용)- normal : 기본값, 단어 단위로 끊어서 줄바꿈 (단어 단위로 줄바꿈되어 오른쪽 공간.. 공감수 1 댓글수 0 2016. 1. 27.
[CSS] 미디어 쿼리 웹을 만들다보면 PC 모니터의 크기도 모자라서 모바일까지 가세해 요즘 웹화면을 보는 방식이 매우 다양해졌다. 따라서 이런 다양해진 화면 크기에 따라 유동적으로 웹화면이 변화되도록 하기 위해서 CSS에 '미디어 쿼리'라는 방법을 쓴다고 한다. 우선 미디어 쿼리는 크롬, 파이어폭스, 오페라, 사파리, 익스플로러에서 모두 지원해주니 화면별로 크기를 맞췄건만 브라우저별로 안되는 CSS 스타일이 있을까봐 걱정할필요는 없다느거 ㅎㅎㅎ 단, IE 9 버전 부터 지원된다는점...! 1. 미디어 쿼리 사용법 @media mediaType and|not|only (조건문) { css... } 위처럼 사용 된다. 1) media type : media type 에 들어가는 옵션은 다음과 같다 - all : 기본값. (med.. 공감수 0 댓글수 1 2016. 1. 26.
[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.. 공감수 0 댓글수 0 2015. 8. 11.
[CSS] 일반 구조 선택자 :first-child - 첫 번째 위치하는 자손을 선택:last-child - 마지막에 위치하는 자손을 선택:nth-child(수열) - 앞에서 수열 번째 있는 자손을 선택:nth-last-child(수열) - 뒤에서 수열 번째에 있는 자손을 선택 공감수 0 댓글수 1 2015. 7. 9.
[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 를 선택하고 싶을때 ~ 를 사용한다 공감수 0 댓글수 0 2015. 7. 9.
[CSS] 자손 선택자, 후손 선택자 선택자 종류중 자손과 후손 선택자가 있다. 자손 선택자의 선택자 형태는 "선택자A > 선택자 B" 처럼 쓰며, 선택자 A의 자손에 위치하는 선택자 B를 선택한다. 후손 선택자의 선택자 형태는 "선택자A 선택자 B" 처럼 쓰며, 선택자 A의 후손에 위치하는 선택자 B를 선택한다. 예를들어 다음과 같이 html 이 작성되 있을 경우 TITLE list 1 list 2 list 3 이때 div 의 자손 선택자는 h1, ul 이며 후손 선택자는 li 들을 말한다. 따라서 h1을 선택할때 .container > h1 { 스타일 } 라고 쓰며 li를 선택할 때는 .container li { 스타일 } 라고 쓰면 선택할수 있다. 공감수 3 댓글수 0 2015. 7. 9.
[CSS] 문자열 속성 선택자 1. 선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그를 선택 2. 선택자[속성&=값] : 속성 안의 값이 특정 값으로 끝나는 태그를 선택 3. 선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그 선택 1 선택자에 대한 예는 다음과 같다. 예를 들어 다음과 같이 박스가 1 ~ 5개가 있다. box 1 box 2 box 3 box 4 box 5 이때, 다음과 같이 했을 경우 div[class^=box] { background-color: red } div 중 class 명이 box로 시작하는 div에 백그라운드 색상을 빨강으로 하라는 것이므로, class 가 box_1, box_2, box_3 인 box1, 2, 3만 배경이 빨간색으로 바뀐다. 다음 2 선택자에 대한 예가 다음.. 공감수 0 댓글수 0 2015. 7. 9.
[CSS} 양쪽 정렬 : justify 양쪽 정렬 할 경우 text-align: justify 공감수 0 댓글수 0 2015. 7. 8.
[CSS] before, after, content - content 속성은 속성에서 지정한 문자열 또는 이미지를 넣을때 사용 - before 은 요소 내용 앞에 적용 - after 는 요소 내용 뒤에 적용 할 때 사용한다. 예를 들어서, #div 요소 내용 앞에 따옴표를 추가 div:before { content: '“'; } #div 요소 내용 뒤에 따옴표를 추가 div:after { content: '“'; } 만약 이미지를 추가하고 싶다면 다음처럼 사용하면 된다 div:before { content: url( "path/test.png" ); } 공감수 0 댓글수 1 2015. 6. 30.
[CSS] box-sizing #CSS .box-ex1 { width: 500px; margin: 20px auto; } .box-ex2 { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; } #HTML 박스 1 박스 2 box-ex1 보다 box-ex2 가 같은 사이즈의 width 이면서도 사이즈가 훨씬 더 크다. 이유는 padding과 border-width 때문. 이처럼 일정하지 않은 너비값 조절 해법이 만족스럽지 않았던 사람들은 box-sizing 이라는 새로운 CSS 프로퍼티를 만들었다고 한다. 즉, box-sizing를 지정하면 패딩과 테두리가 더는 너비를 늘리지 않도록 할 때 사용된다. 쓰는 방법은 다음과 같다 -webkit-box-sizing: b.. 공감수 0 댓글수 0 2015. 6. 30.
[CSS] if IE 명령어 예제 //ie8 브라우저 일때 ie8.css를 적용해라 //ie7 브라우저 일때 ie7.css를 적용해라 //ie6 브라우저 일때 ie6.css를 적용해라 //ie8 브라우저 일때 //ie7 브라우저 일때 //ie6 브라우저 일때 //ie8미만 브라우저 //ie8이하 브라우저 //ie8초과 브라우저 //ie8이상 브라우저 //ie브라우저가 아닐 경우 //ie브라우저일 경우 공감수 0 댓글수 0 2015. 4. 29.
[CSS] ie에서 background opacity(투명도) 넣는 방법 background:rgb(120, 20, 0); background: transparent\9; background:rgba(120, 20, 0,0.6); //rgb는색상, 0.6이 opacity값임(1에 가까울수록 불투명해지며 0에 가까울수록 투명해진다) filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6c800000,endColorstr=#6c800000); zoom: 1; filter에 startColorstr=#6c800000,endColorstr=#6c800000를 살펴보면시작 그라데이션 색상과끝 그라데이션 색상을 입력받음 6c 가 opacity 값으로써 숫자가 높을수록 불투명해진다 (반대로 당연히 숫자가 작을수록 투명도가 높.. 공감수 0 댓글수 0 2015. 4. 29.
[CSS] !important 활용 important 사용법 : { 속성 : 속성값 !important; }중요하다는 표시로 어떤 경우에나 이것이 우선 적용 되도록 하고 싶을 때 사용한다. 예를들어서 CSS를 다음과 같이 했을 경우 * { color: #000 !important } .white { color: #fff } Helloworld CSS는 절차지향(순차지향)적인 언어이기때문에 모든 텍스트의 색상을 검정으로 적용하기를 제일 상단에 해놨지만, 제일 하단에 white란 클래스 일경우에는 텍스트 색상을 하얀색으로 적용하라고 제시해놨기 때문에 Helloworld는 하얀색으로 나와야함. 하지만 important를 사용하므로써 (어떤 경우에도 우선 적용되기때문에) Helloworld는 검정색으로 나올것이다. 공감수 0 댓글수 0 2015. 3. 4.
[CSS] CSS로 삼각형 그리기 CSS로 위 이미지처럼 깃발의 꼬리 부분 처럼 삼각형 만드는 방법은 다음과 같다 .flag-tail { border-color: red red transparent red; border-style: solid; border-width: 0px 150px 150px 150px; height: 0px; width: 0px; position:absolute; } 공감수 0 댓글수 0 2015. 2. 10.
[CSS] 배경 이미지 가운데 정렬 div { background: url('/img.gif') no-repeat; background-position: center; } 공감수 0 댓글수 0 2015. 2. 10.
[CSS] 스프라이트 만들어서 이미지 관리하기 - N-MET 웹사이트를 만들때 아이콘을 사용할 때 용량이 아무리 작더라도 한번 요청하는데 시간이 들기때문에 많은 그림파일을 로딩해야한다면 느려질수 밖에 없다.따라서 웹사이트 로딩속도를 빠르게 하는 여러방법이 있는데 그 중에 CSS Sprites라는것에 대해 알아보고자 한다.스프라이트는 이미지를 최소화하여 사용하는 것으로 다음처럼 아이콘을 한 이미지에 모두 몰아 넣고, CSS로 한 아이콘 부분만 잘라(?) 보여주는 식을 말한다. (혹여나 이미지 도용방지를 위해 빨간색으로 칠한점 참고해주세요) 그렇다면, 저렇게 만들기위해서 이미지 편집 툴을이용해 아이콘들을 하나하나 붙이고,CSS로 또 하나하나 위치를 찾아 아이콘을 표현할것인가? 우리에겐 네이버에서 만든 N-MET이 있다.아이콘들을 모두 불러오면 저렇게 자동으로 아이콘들.. 공감수 0 댓글수 0 2013. 10. 25.
[CSS] position 설명 (relative, absolute) position에는 3가지 속성이 있다. relative, absolute, fixed 이 세가지 속성 중 2가지 relative, absolute를 다뤄보겠다. relative : absolute를 쓸 때 영역을 잡아주는 역할 absolute : left, top, right, bottom 값으로 전 화면을 아무런 제약 없이 쓸 수 있는 것 즉, relative를 부모라고 하고 absolute를 그 부모의 자식이라고 가정했을 때 absolute를 이리저리 돌아다니지 못하도록 부모인 relative가 absolute를 돌아다닐 수 있는 영역을 제한해 둔다고 생각하면 쉽다. 그 예로 다음과 같이 소스를 짰을 때, relative라는 클래스 안에 absolute라는 클래스를 만들고 css로 relative로.. 공감수 4 댓글수 0 2013. 10. 9.
[CSS] 박스 모서리 둥글게 하는 방법 모든 모서리 둥글게 -webkit-border-radius:5px; -moz-border-radius:5px; 왼쪽 위 모서리 둥글게 -webkit-border-top-left-radius:10px; -moz-border-radius-topleft:10px; 왼쪽 아래 모서리 둥글게 -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomleft:10px; 오른쪽 위 모서리 둥글게 -webkit-border-top-right-radius:10px; -moz-border-radius-topright:10px; 오른쪽 아래 모서리 둥글게 -webkit-border-bottom-right-radius:10px; -moz-border-radius-bo.. 공감수 0 댓글수 0 2013. 9. 26.
[CSS] CSS 투명도(opacity) css에서 투명도 조절하는 방법 filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;- 1번째 라인에 filter는 IE 10 이하 브라우저에서 적용되는 투명도. 0 ~ 100 사이의 값을 입력하면 된다- 2번째 라인은 IE이외의 브라우저에서 적용되는 투명도. 0 ~ 1 사이의 값을 입력하면 된다- 3번째 라인은 firefox일경우 적용되는 투명도 0 ~ 1 사이의 값을 입력하면 된다 공감수 0 댓글수 0 2013. 9. 26.
[CSS] Table TD 넓이 고정 테이블 크기와 관계없이 TD 크기 고정시키기 참고 페이지 : http://blog.naver.com/hyunhackshin?Redirect=Log&logNo=110020528548 공감수 0 댓글수 0 2013. 8. 23.
[CSS] font-size 폰트 사이즈에는 고정단위인 px(pixels)과 유동단위인 %(percentages), em(ems) 두가지 타입이 있다. 고정단위인 px는 해상도 및 텍스트 확대, 축소시 고정크기이기 때문에 변화가 없지만 유동단위인 %, em은 확대 축소가 가능하다. 즉, 화면 크기에 따라 유동단위는 폰트 사이즈가 변한다는 것인데 %는 화면의 비율의 퍼센트치로 계산이 된다는걸 어림잡아 알수 있고... 그렇다면 em 계산법은 어떻게 될까. 1em = 16px 이다. 따라서 만약 12px의 크기를 하고싶다면 ? 12px / 16px = 0.75em이 된다 em은 소수점 3자리까지 가능하며 간편하게 폰트사이즈를 확인할 수 있는 사이트도 많이 있으니 검색해서 사용하면 편하다. 추천 사이트는 : http://pxtoem.com.. 공감수 0 댓글수 0 2013. 7. 11.
[CSS] 하이퍼링크의 점선 테두리 없애기 링크를 선택하고 난 뒤 IE나 firefox에서는 점선이 나오고 Chrom에서는 노란띠가 나온다. 꼴뵈기 싫을경우 예전같으면 링크마다 onFocus="blur()"를 했지만, 세상이 참~ 좋아진 결과 다음과 같이 CSS를 넣기만 하면 문제가 해결된다. *:focus { outline: none; } 또는, a { outline: none; select-dummy: expression(this.hideFocus=true); } 여기서 outline이란 테두리의 border를 감싸고있는 또다른 라인이다. 그것을 none또는 0으로 주면서 라인을 없애겠다고 스타일을 적용해주면 된다. 공감수 0 댓글수 1 2013. 2. 1.
[CSS] 페이지 내에 항상 스크롤바가 있게하기 홈페이지를 만들다 보면 미세한 1픽셀의 차이로 디자인을 수정해야할 때가 많다. 특히 페이지 이동할때 화면이 덜컥덜컥 거리는 듯한 느낌이 받을때, 제일 먼저 스크롤바를 의심하라. 어떤 페이지는 길게 내용이 있어서 스크롤바가 생기지만 어떤 페이지에서는 내용이 짧아 스크롤바가 생기지않는다면 페이지 이동시 화면이 덜컥 거린다는 느낌을 받았을 것이다. 이럴때 처리하는방법? html { overflow-y:scroll; }위의 소스를 홈페이지가 포함하고 있는 css나 head안에 style을 적용하면 된다. 공감수 5 댓글수 0 2013. 1. 29.
[CSS] box-shadow CSS3에서부터 포토샵에서 그림자나 쉐도우 넣듯한 효과를 CSS로 직접 낼수 있다.하는 방법은 다음과 같다 .box { box-shadow : 가로오프셋거리, 세로오프셋거리, 블러, rgba(x,x,x,x); }box-shadow는 4개의 인자를 받는다.1. 가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어저 있는지 지정한다.2. 세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어저 있는지 지정한다.3. 블러 : 그림자의 번지는 정도를 지정한다.4. 그림자의 색상을 지정한다. 공감수 0 댓글수 0 2013. 1. 28.
[CSS] table크기 css로 고정하기 전에 올린글은 텍스트가 길때 깨지는현상을 강제개행하도록 하는 방법이었고, 이번 방법은 테이블이 크기가 고정되지 않고 겁나 움직여서 짜증날때 강제로 크기를 고정하는 방법이다.간단하다. 다음 테그를 넣으면된다. style="table-layout: fixed" 공감수 0 댓글수 0 2013. 1. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.