가끔 가다 써먹는 CSS 가상클래스(::before)를 이용한 디자인 (::after도 가능은 하겠지만 아직 디자인적인 요소로 사용한 적이 없어서......거의 clear:both 용도로만.....) 아래 이미지는 이해를 돕기위한 이미지 이며 실제로 사용하기 위해서는 폰트색깔이든가 사이즈는 알아서 조정하면 될듯 싶다. css 구문 content {position:relative} --> 내용 전체를 감싸주고 있는 박스 content:before {content:""; position:absolute; height:100%; width:1px; left:50%; background:#000} --> content 첫 가상요소를 잡아주는 내용으로 전체 중 가운데 검은색 라인을 표시 title {margin:..

쿠쿠 작업장(home page)/css 2021. 1. 25. 14:50

반응형을 많이 만들다 보니 세로 정렬에 대해 궁금해지던차에 편법을 이용한 가로 정렬이 가능함 height 사이즈가 정해져 있다면 모를까 정해져 있지 않은 상태에서의 세로정렬은 transform 을 이용하여 가능하다 예시 테스트 라는 박스를 만들어 주고 css를 아래와 같이 주었을때 세로 정렬이 가능해 진다. 위와 같이 한다면 세로 정렬이 된다. 응용방법은 많다. 예를 들어 가로 정렬시에 많이 쓰이는 'margin:0 auto' 대신에 'left:50%; transform:translateX(-50%)' 사용할 수도 있다. 가로 세로 동시 정렬을 하고 싶을때는 'top:50%; left:50%; transform:translate(-50%, -50%)' 이런식으로 활용이 가능하다. 'transform' 속..

쿠쿠 작업장(home page)/css 2019. 4. 9. 14:44

오로지 css 만으로 accordion 효과 만들기 그냥 jquery를 써도 되지만 심심해서가 아니라 퍼블을 하다보니 매번 jquery를 가져와서 css 수정하는게 귀찮기도 해서 간단히 css만으로 만들수 있지않을까 해서 만들어봄 실제 거래처 질답(Q&A)부분에 적용시켜 사용중인 부분이다. 우선은 html 구조 질문1 답1 질문2 답2 질문3 답3 위와 같이 radio 버튼을 이용한 아코디언 효과를 만들 예정 이다. 다음은 css 구조 .qna_tabs {margin:0; padding:0; list-style:none} .qna_tabs input[type=radio] {display:none} .qna_tabs label {display:block; cursor:pointer; background:#..

쿠쿠 작업장(home page)/css 2019. 4. 5. 15:35

요즘은 홈페이지 대세가 반응형 인지라 ㅜ,.ㅡ 반응형에 맞게끔 작업을 하려면 %를 이용한 사이즈 작업을 해줘야 한다. 하지만 width는 %로 사이즈 정리를 해준다지만 height는 ??????? 물론 미디어 쿼리 를 이용해 각 해상도 마다. width 값 과 height 값을 주어도 되지만 그런 귀찮은 일을 피하고자.....편법으로 위와 같이 %로 사이즈를 주는 방법은 라고 주면 된다. test 위와 같이 안에 내용이 들어갈 경우 test position 값으로 해결해주면 된다. test 마지막으로 안에 내용을 가운데 정렬을 할 경우 test 이렇게 해주면 된다. 단, height값이 없을 경우 100%로 인식하게 된다. 텍스트만 넣을 경우 에는 width 값 대신 text-align:center을 넣..

쿠쿠 작업장(home page)/css 2019. 2. 13. 19:08

vertical-align 속성 (요소의 세로 맞춤 설정) vertical-align:baseline (기본값 입니다.) vertical-align:length (요소를 지정된 길이 만큼 올리거나 내리며 음수 값이 허용됩니다.) 사용예) vertical-align:50px (기준선에서 50px 위에 위치)테스트 입니다. 적용 vertical-align:-50px (기준선에서 50px 아래에 위치)테스트 입니다. 적용 vertical-align:% (line-height 기준 백분율로 요소를 올리거나 내리며 음수 값이 허용됩니다.) 사용예) vertical-align:50% (line-height 기준 50% 위에 위치)테스트 입니다. 적용 vertical-align:-50% (line-height 기준 ..

쿠쿠 작업장(home page)/css 2017. 12. 14. 15:15

:nth-child() 자식선택자 li:nth-child(1) {background:#000000}인경우 첫번째에 스타일을 먹여라 li:nth-child(odd) {background:#000000}인경우 홀수만...... li:nth-child(even) {background:#000000}인경우 짝수만...... li:nth-child(3n)인경우 3의 배수 li:nth-child(3n+a)인경우 a번째 부터 3의 배수 li:nth-child(-n+a)인경우 a번째 부터 그앞의 자식을 선택 :nth-last-child()nth-child 와 같은 형식이나 출발점을 위에서 부터가 아니라 아래에서 부터 계산해라...... 위에서 쓰는거와 같지만 아래는 특정요소를 지정하여 쓸수 있다. 위에는 부모요소내 모..

쿠쿠 작업장(home page)/css 2015. 12. 4. 14:49

Property Description color 텍스트 컬러 지정 direction 텍스트 쓰기 방향 지정 (예.direction: rtl;// 오른쪽 에서 왼쪽으로) letter-spacing 텍스트 사이간격 line-height 텍스트 줄 간견 text-align 텍스트 가로 정렬 text-decoration 텍스트 꾸미기 밑줄, 이탤릭 등 text-indent 텍스트 첫 문자 띄워쓰기 text-shadow 텍스트 그림자 text-transform 텍스트 회전 unicode-bidi 텍스트를 여러언어를 지원하기 위한 것 vertical-align 텍스트 세로 정렬 white-space 텍스트 공배처리 word-spacing 텍스트 단어사이 간격

쿠쿠 작업장(home page)/css 2015. 4. 18. 13:04

css3 box-sizing 브라우저 지원 익스플로러 8이상크롬 10.0 이상 4.0 -webkit-firefox 29.0 이상 2.0 -moz-safari 5.1 이상 3.1 -webkit-opera 9.5 이상 div1,div2 같은 경우 일반적인 css 사용 예시이다. .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } 비교 사용예시 (width:300px; height:100px) 비교 사용예시 (width:300px; height:100px) 아래의 같은 경우 box-sizing 를 적용한 모습이다...

쿠쿠 작업장(home page)/css 2015. 4. 15. 15:25