일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
- React Kakao map
- Redux
- es11
- Python
- Python #Baekjoon
- css #html
- es6
- JavaScript
- optional chanining
- Python #CodeUp
- HTML #CSS
- Template literals
- firebase
- Default parameter
- Hooks
- react
- spread operation
- BOJ
- Nullish Coalescing Operator
- nextjs
- HTML
- React #Hooks
- 카카오맵 api
- 카카오맵
- CSS
- Next
- 프로그래머스
- Today
- Total
목록전체 글 (105)
거북이개발자
0. 제목 코드업 1071 코드업 1072 코드업 1073 코드업 1074 코드업 1075 코드업 1076 코드업 1077 코드업 1078 코드업 1079 코드업 1080 코드업 1081 코드업 1082 코드업 1083 코드업 1084 코드업 1085 코드업 1086 코드업 1087 코드업 1088 코드업 1089 코드업 1090 1. 문제 codeup.kr/problem.php?id=1071 codeup.kr/problem.php?id=1072 codeup.kr/problem.php?id=1073 codeup.kr/problem.php?id=1074 codeup.kr/problem.php?id=1075 codeup.kr/problem.php?id=1076 codeup.kr/problem.php?id=1..
1. 목표 오늘은 로그인 창을 만들어 볼것이다. 목표는 밑의 사진이다. 2. HTML No Service 18:43 100% Welcome to KoKoa Clone if you have a KaKao Account, log in with your email or phone number, Find Kokoa Account or Password 위의 코드가 총 HTML의 코드이다. 자세히보면 크게 3구간으로 나뉜다고 볼 수 있다. 상태바부분, 환영하는 글 부분, 정보입력 및 링크부분 HTML만 적용했을시의 결과물이다. (1) 상태바부분 No Service 18:43 100% 이부분이다. 아이콘이 새로운 부분인데 fontawesome.com/ Font Awesome The world’s most popula..
1. 공부 목표 위와같은 카카오톡의 화면을 HTML과 CSS를 이용하여 웹에다가 똑같이 구현하려고 한다. 물론 데이터베이스와 서버 등을 하지 않기 때문에 실제처럼 작동하지 않겠지만 HTML과 CSS를 이용하여 프론트부분을 만들어 보겠다.
1. transition transition : CSS를 통해 애니매이션의 기능을 제공하고, 시간, 원하는 속도 등을 정할 수 있다. Go to home 코드를 보면 transition:background-color 10s ease-in-out; 이부분을 통해서 백그라운드컬러를 10초동안 ease-in-out가속도로 애니메이션을 만든다는것이다. 속성으로 : background-color 뿐만아니라 border-radius, all(전부) 도 가능하다. 가속도로 : ease-in-out 뿐만아니라 linear, ease-in, ease-in-out, ease-out 등등이 사용가능하다. 2. transfrom transform은 해당 태그를 회전시키거나 돌리거나 위치를 옮기는 등의 행위를 하게한다. 또한 ..
1. pseudo selectors (1) pseudo selector을 사용하면 기존의 id, class보다 좀더 정밀하게 CSS를 적용할 수 있다. 여러 코드들이 있고 대표적인것 예시 들을 보자. (1) first-child div:first-child{ background-color:tomato; } 위의 코드를 통해서 맨처음 div에만 적용이가능하다. (2) last-child div:last-child{ background-color: seagreen; } 아까와 비슷하게 마지막 div에 적용가능하게 해준다. (3) nth-child span:nth-child(even){ background-color: yellowgreen; } 이런식으로 원하는 규칙의 태그에만 적용도 가능하다. even, o..
0. 학습한것 CSS로 위치선정, 그리고 여러 선택법등을 배웠다. 1. flex 앞서 배운것 처럼 block형은 줄넘김이 기본적으로 된다. 이러한 방법을 해결하기위해서 flex를 사용할 수 있다. (1)일반적 blcok형을 쓸떄 1 2 3 4 이런식으로 줄바꾼이 나온다. (2) flex형 적용시 아래 코드처러 flex를 적용할 수 있다. body{ display : flex; justify-content: center; align-items: center; } 이와 같이 할수 있다. 또한 flex에서 여러 부가적 엘리먼트를 사용가능하다. flex-direction : 주축을 바꾼다. position: fixed : 스크롤내려도 항상 그위치에 위치시킨다. position: absolute : relativ..
0. 제목 코드업 1047 코드업 1048 코드업 1049 코드업 1050 코드업 1051 코드업 1052 코드업 1053 코드업 1054 코드업 1055 코드업 1056 코드업 1057 코드업 1058 코드업 1059 코드업 1060 코드업 1061 코드업 1062 코드업 1063 코드업 1064 코드업 1065 코드업 1066 코드업 1067 코드업 1068 코드업 1069 코드업 1070 1. 문제 codeup.kr/problem.php?id=1047 codeup.kr/problem.php?id=1048 codeup.kr/problem.php?id=1049 codeup.kr/problem.php?id=1050 codeup.kr/problem.php?id=1051 codeup.kr/problem.ph..
0. 학습한것 CSS의 개념과 CSS를 통한 여러가지 기능 그리고 각각의 기능들의 사용법을 배웠다. 1. CSS란? HTML이 뼈대라고 하면 CSS는 근육과 같은존재이다. 이말은 즉슨 HTML이 세운 뼈대에 폰트, 글자크기, 배경색, 위치 등등의 여러가지 기능을 할 수 있다. 1. CSS를 HTML에 적용방법 CSS의 적용방법은 크게 2가지가 있다. (1). 독자적 CSS파일을 만들어 HTML에 연결하는법. -재사용이 가능하고 여러장점이 있어서 이방법을 많이 선호한다. -a.css와 같은 css파일은 하나 만든뒤 HTML파일에 아래의 코드처럼 입력해서 연결해준다. (2)HTML 내에 직접 사용하는법. - (1)방법에 비해 다소 간단히 사용가능하다. - 아래의 코드와 같이 3.inline 과 block 1..