| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- Router
- WAI-ARIA
- codestate
- 원시자료형
- 호스트인식
- 객체지향
- condestates
- CDD
- 참조자료형
- 프로토타입
- 코드스테이스
- Prototype
- self reliance
- 회고
- 개발자
- Javascript #코드스테이츠
- css
- JS
- OOP
- JavaScript
- codestates
- cta버튼
- 자바스크립트
- css in js
- html
- 프론트엔드
- 코드스테이츠
- cta button
- 계산기
- frontend
- Today
- Total
jh.nrtv
HTML, CSS- 계산기 목업 만들기 본문
계산기 목업 만들기 (css)
버튼 입체감 만들기
box-shadow : 1px 1px 1px 1px black inset;
box-shadow 속성에서 1px 1px 1px 1px black inset 값들은 차례로 각각 다음을 의미합니다.
- h-offset: 필수, 그림자가 수평방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 오른쪽으로 떨어진 위치에서 시작하고, 음수면 왼쪽으로 떨어진 위치에서 시작합니다.
- v-offset: 필수, 그림자가 수직방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 아래쪽으로 떨어진 위치에서 시작하고, 음수면 위쪽으로 떨어진 위치에서 시작합니다.
- blur: 선택, 그림자를 흐리게 할 정도를 결정합니다. 클수록 흐려집니다.
- spread: 선택, 그림자의 크기를 결정합니다. 양수면 커지고, 음수면 작아집니다.
- color: 선택, 그림자의 색상을 결정합니다.
- inset: 선택, 그림자가 요소 안쪽에 위치하게 합니다.
볼록 효과, 오목 효과를 주는 CSS에서 가장 큰 차이는 inset의 유무입니다. inset을 포함해주면, 오목해지고, 포함하지 않으면 볼록해집니다.
그라데이션 효과
linear-gradient( direction, color1, color2, …, color3 )direction에는 그라데이션 방향을 입력합니다.
- to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
- to top : 아래에서 위로 그라데이션을 만듭니다.
- to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
- to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
- ndeg : n도의 방향으로 그라데이션을 만듭니다.
색은 여러개 입력할 수 있습니다. 입력한 순서로 설정한 방향으로 그라데이션을 만듭니다. 예를 들어
linear-gradient( to right, yellow, red )는 왼쪽에서 오른쪽으로 노란색과 빨간색 순서로 그라데이션을 만듭니다.
background: linear-gradient(to right, #6a7175, #313233);!!! -> background-color 가 아니라 background 로 해야함
동그랗게 그라데이션
radial-gradient( )
radial-gradient( )
CSS 속성 , 값 모음
https://sh77113.tistory.com/203
[CSS] 속성모음
Background (배경 이미지 관련 속성) 속 성 설 명 값 background background의 여러 가지 속성을 간단하게 한번에 선언하여 사용할수 있다. background-color background-images background-repeat background-a..
sh77113.tistory.com
CSS 폰트 적용하는 방법
HTML <head> 에 링크 붙이고 -> CSS 파일에서 font-family 붙임
https://cocoder16.tistory.com/53
[CSS] 폰트 파일 또는 무료 폰트인 구글 폰트 적용하는 방법
폰트 파일을 적용하는 방법 폰트 파일 준비하기 우선 준비한 폰트 파일을 프로젝트 폴더 내에 원하는 경로에 넣어줍니다. assets/fonts 와 같은 디렉토리명이 적절합니다. 준비한 폰트파일은 CSS 코
cocoder16.tistory.com
HTML 이미지 삽입하기
<img src="https://i.pinimg.com/564x/ed/40/fd/ed40fd3338fe353632a8c9eb474ad906.jpg">https://hyungin0505.tistory.com/15
[HTML/CSS] #7 이미지 삽입하기, 비율 조정, alt
안녕하세요 오늘은 이미지 삽입하는 방법에 대해서 알아볼게요 이미지는 라는 태그를 이용하여 삽입할 수 있습니다. 더보기 1. 삽입할 이미지 선택하기 삽입할 이미지를 선택하는 방법에는 두
hyungin0505.tistory.com
CSS 배경 이미지 삽입하기
body{
...
background-image: url("https://i.pinimg.com/564x/ed/40/fd/ed40fd3338fe353632a8c9eb474ad906.jpg");
}
//body 배경이니까 CSS의 body 태그 안에다가 해야함
//추가적으로
body{
...
background-image: url("https://i.pinimg.com/564x/ed/40/fd/ed40fd3338fe353632a8c9eb474ad906.jpg");
background-repeat: no-repeat;
background-size: 80%;
}
//반복과 사이즈 조절 가능https://m.blog.naver.com/mathesis_time/221663530512
[HTML/CSS 기초 강의] ⑱ 배경 이미지 넣기
배경 이미지 배경으로 컬러 뿐만 아니라, 이미지(사진)을 넣을 수 있습니다. 이때 사용하는 속성명은 backg...
blog.naver.com
+ !!! 동기들 사용 기술
- css sticky 스크롤 내려도 안내려가게 고정
보통 스티키 헤더 등에 쓰임
position: sticky;
https://www.daleseo.com/css-position-sticky-header/
CSS로 스티키 헤더 (sticky header) 만들기
Engineering Blog by Dale Seo
www.daleseo.com
- 육각형 만들기
버튼 사각형 틀에 점 찍어서 연결
clip-path: poligon()
CSS로 다양한 도형 만들기 - Clippy
오늘은 웹개발을 할때 활용할 수 있는 다양한 도형을 손쉽게 만드는 방법에 대해 이야기하려한다. 단순히 삼각형 정도는 width, height를 없앤 후 border만 사용하면 그나마 손쉽게 삼각형을 만들 수
happy-playboy.tistory.com
- 마우스 커서 올렸을 때 효과 주는 법
hover
https://codingbroker.tistory.com/47
[HTML, CSS] 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover
html에서 마우스 커서를 올렸을때(hover) effect를 주는 방법입니다. 금색 네모가 있습니다 <!DOCTYPE html> 해당 요소의 style에 :hover를 추가합니다 마우스 커버를 올리면(hover) 백그라운드 색상이 silver로.
codingbroker.tistory.com
transitoins: 0.5s
-> 호버 효과가 잠시 지속되도록하는 코드
- 배경 애니메이션
구글; css gradient animation
https://bashooka.com/coding/30-css-animated-gradient-examples/
30 CSS Animated Gradient Examples – Bashooka
Creativity, inspiration and strict timeline will be easier to handle when you use some of these web tools or applications as they will help you to pick the right color gradients and you can experiment without any limit. In this post I`ve collected 30 CSS A
bashooka.com
- 색상 반전css
.img: active{
filter: invert(100%);
}https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert
invert() - CSS: Cascading Style Sheets | MDN
The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function>.
developer.mozilla.org
- fontawesome -> 아이콘 삽입 사이트
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
- 코드펜
코드펜은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다. 온라인 코드 편집기이자 오픈 소스 학습 환경 기능을 하며 여기서 개발자들은 펜으로 불리는 코드 조각을 만든 다음 이를 테스트할 수 있다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
- 버튼 누르면 내려가도록 버튼들 움직이도록 ( 눌리는 효과)
button:active{
top: 3px
right : 3px
}
- 레이아웃 flex 대체 grid (중요)
[CSS] CSS Grid (그리드) 배우기
프롤로그 레이아웃을 구현할 때 flexbox를 쓰면 참 편합니다. 플박만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에는 그리드가 좋다는 소문(?)을 들었거든요.
nykim.work
- figma ; 레이아웃 만드는 툴 (중요)
https://www.youtube.com/watch?v=GsZk8s5JdWg
- css 반응형 ; vw, vh, vmin, vmax, em, rem
반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성
프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히
nykim.work
'web - HTML, CSS' 카테고리의 다른 글
| 사용자 친화 앱 - 웹 접근성 / WAI-ARIA (0) | 2023.01.02 |
|---|---|
| 사용자 친화 앱 - 웹 표준 , 크로스 브라우징 , SEO (1) | 2022.12.30 |
| HTML, CSS 활용 - [Codestates] Section1 (0) | 2022.10.30 |
| CSS 기초 - [Codestates] Section1 (2) | 2022.10.28 |
| HTML 기초 - [Codestates] Section1 (1) | 2022.10.27 |
