목록CSS (10)

개발 공부 기록

[CSS] 버튼 디자인 해주는 사이트

www.bestcssbuttongenerator.com/ A useful tool for designing css buttons Button generator is a free online tool that allows you to create cross browser css button styles. www.bestcssbuttongenerator.com
사이트 정리/CSS 2020. 11. 5. 02:30
[CSS] BEM 방식

BEM: Block Element Modifier BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다. Block 전체를 감싸고 있는 블럭요소 Element 요소는 블럭이 포함하고 있는 한 조각 Modifier 블럭 또는 요소의 속성 사용 .block‐‐modifier {…} .block__element‐‐modifier {…} 출처 webclub.tistory.com/263 nykim.work/15
개발/CSS 2020. 9. 13. 08:22
[CSS] flex

CSS에서 요소들을 자유롭게 위치시킬 수 있는 flex에 대해 알아보자. flex는 모바일 지원율이 매우 좋다는 장점이 있다. flex 사용방법 .container{ display: flex; } display: flex; 를 설정해준다. flex container 와 item 사용법 자세하게 알아보기 heropy.blog/2018/11/24/css-flexible-box/ 함께 보면 좋은 영상 tv.naver.com/v/5012344 Flexbox로 만들 수 있는 10가지 레이아웃 NAVER Engineering | 발표자: 이민영 (N Tech Service) 발표월: 2018.9. tv.naver.com 영상 자료 - 글 정리 d2.naver.com/helloworld/8540176 flex를 연습..
개발/CSS 2020. 9. 8. 02:12
[CSS] display 와 visibility의 차이

html 태그로 만든 layer를 안 보이게 하는 방법에는 두 가지가 있다. 1. display : none ; (↔ block) > 아예 사라짐. 보이는 것뿐만 아니라 해당 공간도 존재하지 않게 됨. 2. visibility : hidden ; (↔ hidden) > 보이지만 않고 해당 공간은 존재함. width와 height 값을 주었다면 그만큼의 공간이 존재하게 된다. 위와 같은 차이가 있다고 한다. 상황에 맞춰 적절한 것을 선택하면 될 듯하다. 참고 : blog.naver.com/eroicaplus/90036328974
개발/CSS 2020. 9. 6. 21:14
[CSS] CSS generator

https://css3generator.com/ CSS3Generator by @RandyJensen Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur css3generator.com 원하는 요소를 선택하고 값을 입력하면 코드를 반환해준다. 적용 결과를 바로 확인할 수 있어 편하다.
사이트 정리/CSS 2020. 9. 5. 22:34
[CSS] 상자 그림자 만드는 사이트

https://www.cssmatic.com/box-shadow Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com
사이트 정리/CSS 2020. 9. 5. 22:29
[CSS] 삼각형 만들기

게이지바를 포인팅할 삼각형이 필요해서 삼각형 도형을 만들어보았다. HTML코드 CSS 코드 .triangle{ width: 0px; height: 0px; border-top: 25px solid transparent; border-right: 50px solid red; border-bottom: 25px solid transparent; } .triangle-2{ width: 0px; height: 0px; border-top: 25px solid transparent; border-left: 50px solid green; border-bottom: 25px solid transparent; } .triangle-3{ width: 0px; height: 0px; border-top: 50px sol..
개발/CSS 2020. 7. 8. 00:18
TISTORY 게시글에 코드 넣기

tistory에서 제공하는 코드 블럭을 통해 블로그 글에 코드를 넣는 방법에 대해서 알아보았다. 게시글 작성시 코드블럭을 선택한 뒤, 원하는 언어를 선택하고 코드를 입력한다. 확인 버튼을 누르면 아래와 같이 코드가 삽입된다. .gauge-box{ height: 100vh; width: 180px; } .gauge-p{ font-size: 24px; font-style: bold; color: white; text-align: center; } .gauge-bar{ width: 50px; height: 400px; } 만약 업로드할 코드블럭의 테마를 변경하고 싶다면, 설정 -> 플러그인 -> 코드 문법 강조 에서 원하는 테마를 선택하면 된다.
개발/기타 2020. 7. 8. 00:01
Prev 1 2 Next