https://www.cssportal.com/style-input-range/
Style Input Range - CSS Portal
www.cssportal.com
| CSS Gradient 예시 사이트 (0) | 2021.02.09 |
|---|---|
| 86가지 css box-shadow 예시가 있는 사이트! (0) | 2021.02.03 |
| HTML부터 CSS까지 코딩 쉽게 배우는 사이트(노마드코더) (0) | 2020.11.15 |
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
그라데이션이라는 말이 더욱 친숙하실 거라 생각 되네요.
위와 같은 이미지를 마우스 클릭 및 수치 조정으로 만들 수 있는 사이트입니다.
설정을 전부 완료 후에 css 코드만 복사 붙여넣기 하면 적용이 완료됩니다.
Gradient 효과는 직접 눈으로 보면서 설정을 해야 좋다고 생각합니다.
그런데 코드를 입력하면서 하게 되면 계속 새로고침을 눌러야 하는 번거로움이 있죠.
그런 수고들이 줄어들게 됩니다.
| input type range 커스터마이징 사이트 (0) | 2021.08.14 |
|---|---|
| 86가지 css box-shadow 예시가 있는 사이트! (0) | 2021.02.03 |
| HTML부터 CSS까지 코딩 쉽게 배우는 사이트(노마드코더) (0) | 2020.11.15 |
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
css를 작성하면서 box-shadow라는 기능이 있어요.
developer.mozilla.org/ko/docs/Web/CSS/box-shadow
box-shadow - CSS: Cascading Style Sheets | MDN
box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산
developer.mozilla.org
* Mdn사이트에서 CSS box-shadow에 대해 자세히 알 수 있어요.
Mdn도 좋지만 이쁘게 디자인된 예시를 골라서 쓸 수 있다면 정말 좋겠죠?
마치 베스킨라빈36 처럼요.
그런 사이트가 실제로 있습니다.
getcssscan.com/css-box-shadow-examples
CSS Scan - The fastest and easiest way to check, copy and edit CSS
Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.
getcssscan.com
위 사이트가 그 사이트인데 정말 괜찮은 box-shadow가 86개가 있어요.
원하는 box-shadow를 클릭하면 저절로 복사가 됩니다.
그리고 기능을 추가 할 곧에 붙여넣기만 하면 끝입니다.
단순히 복사 붙여넣기가 아니라 수정을 해서 사용해도 정말 좋아요.
저도 복붙이 아닌 조금씩 수정하면서 사용하고 있어요.
| input type range 커스터마이징 사이트 (0) | 2021.08.14 |
|---|---|
| CSS Gradient 예시 사이트 (0) | 2021.02.09 |
| HTML부터 CSS까지 코딩 쉽게 배우는 사이트(노마드코더) (0) | 2020.11.15 |
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
따분한 강의가 아닌 직접 결과물을 만들어 보는 사이트를 찾았습니다.
현업 개발자의 코딩을 클론하는 방식으로 자신만의 웹 사이트를 만드는 방법을 배울 수 있어요.
유튜브 채널 '노마드코더'에서 만들 강의 사이트에요.
노마드 코더 Nomad Coders
코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!
nomadcoders.co
무료 강의도 많고 결제해서 듣는 강의에 품질도 만족스러워요.
코딩을 하다가 문제가 발생하면 댓글로 질문을 할 수 있어요.
노마드코더 개발자분이 직접 댓글을 달아주세요.
그리고 노마드코더 슬랙 커뮤니티가 있는데 그곳에서도 질문을 하면 답변을 얻을 수 있어요.
저는 우선 코코아톡 클론코딩 강의를 구입해서 들어봤어요.
아래 사이트는 제가 강의를 듣고 만든 사이트들이에요.
아래 링크를 클릭하면 각 사이트로 이동 할 수 있어요.
* 카카오톡 클론코딩은 링크 클릭 후 나온 웹 사이트 가로 사이즈를 줄여야 보입니다.
코스 커리큘럼도 다 잘 나와있어요.
이 외에도 사용하는 언어, 프레임워크 등
상세하게 나와있어요.
그리고 가장 맘에드는 챌린지 서비스에요.
전부 무료로 진행되고 챌린지에 참석하면 다양한 과제들이 매일 날라와요.
강의를 듣고 나만의 방식으로 과제를 수행하면서 실력을 쌓을 수 있어요.
그리고 과제를 진행하면서 모르는게 있으면 노마드코더 슬랙 커뮤니티에 직접 물어봐서 해결 할 수 있어요.
코딩을 입문 하시는 분이라면 노마드코더 사이트를 추천드려요.
* 이 리뷰는 해당 사이트로부터 아무것도 받지 않은 리뷰입니다.
| CSS Gradient 예시 사이트 (0) | 2021.02.09 |
|---|---|
| 86가지 css box-shadow 예시가 있는 사이트! (0) | 2021.02.03 |
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
| 초보자가 HTML공부, 실습하는 가장 쉬운 방법 (0) | 2020.10.22 |
Reset.css는 각 브라우저에 적용된 css 기본값을 초기화하는 것입니다.
reset.css를 적용하지 않으면 각 브라우저에서 다른 결과로 보일 수 있습니다.
그래서 reset.css는 필수적으로 입력 해주시는게 좋습니다.
입력하는 방법도 크게 어렵지 않습니다.
CSS까지 끝마치고 웹사이트를 업로드 했는데 클라이언트에게 각기 다른 결과로 보일 수 있습니다.
힘겹게 간격을 맞췄는데 이러면 정말 힘이 빠지죠.
그렇기 때문에 Reset.css를 필수로 입력 해주시는게 좋습니다.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
우선 위 태그를 복사합니다.
원하는 폴더에 reset.css 파일을 만들고 안에 복사한 태그를 붙여넣기 합니다.
마지막으로 위 태그를 기존 작업 하는 CSS파일에 @import 하면 끝입니다.
| 86가지 css box-shadow 예시가 있는 사이트! (0) | 2021.02.03 |
|---|---|
| HTML부터 CSS까지 코딩 쉽게 배우는 사이트(노마드코더) (0) | 2020.11.15 |
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
| 초보자가 HTML공부, 실습하는 가장 쉬운 방법 (0) | 2020.10.22 |
| HTML을 무료로 배울 수 있는 사이트 및 강의 (0) | 2020.10.21 |
html을 작성하시다 보면 <head> 영역에서
<meta charset="utf-8">을 보셨을 거예요.
대부분 꼭 넣어야 하는 태그라고 명시를 해요.
그런데 왜 꼭 넣어야 하고 무엇을 의미할까요?
<meta chae <meta charset="utf-8"> 태그는 html 파일의 인코딩을 알려주는 태그에요.
말이 조금 어렵죠?
쉽게 말해 브라우저에게 text를 어떻게 그려달라는지 말해주는 것이에요.
위 태그가 없으면 한글, 특수문자 들이 깨져서 나올 수 있어요.
웹브라우저, 컴퓨터의 HTML파일을 웹브라우저에서 표시될 수 있도록 변환하는 처리작업을 얘기해요.
파일의 정보 형태가 어떤 언어로 되어 있는지에 대한 지정이 필요한데 이것을 문자 코드셋(위키백과로 이동)이라고 해요.
위 사진처럼 된 글을 보셨을 거에요.
내가 입력하는 html파일의 글씨가 이런 외계어(?)같이 보일 수 있어요.
그렇기 때문에 꼭 위 태그를 입력 해주셔야 해요.
| HTML부터 CSS까지 코딩 쉽게 배우는 사이트(노마드코더) (0) | 2020.11.15 |
|---|---|
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
| 초보자가 HTML공부, 실습하는 가장 쉬운 방법 (0) | 2020.10.22 |
| HTML을 무료로 배울 수 있는 사이트 및 강의 (0) | 2020.10.21 |
| HTML 이란? (0) | 2020.10.21 |
HTML을 무료로 가르쳐 주는 사이트 및 강의가 상당히 많습니다.
antstudy.tistory.com/13?category=806979
HTML을 무료로 배울 수 있는 사이트 및 강의
요즘 다양한 사이트에서 HTML을 무료로 배울 수가 있습니다. 무료라고해서 저품질의 강의가 아닌, 현업에서 종사 하거나 했던 분들이 강의를 올립니다. 생활코딩(클릭 시 링크로 이동) "생활코딩"
antstudy.tistory.com
하지만 배우기만 하고 아무것도 하지 않으면 자신의 것으로 만들 수가 없습니다.
그래서 배운 후 바로 실습을 해보는 것이 정말 중요합니다.
그런데 초보자들이 직접 실습을 하는건 쉽지가 않습니다.
단순히 연습 사이트에서 타이핑을 하고 결과를 보는건 꾸준히 하는게 힘듭니다.
이런 문제를 해결 할 방법은 바로
입니다.
위의 빨간 네모칸을 보면 HTML을 활용해 블로그 글을 쓰는 공간이 있습니다.
HTML 모드로 바꿔서 글을 쓰면서 직접 연습을 할 수 있습니다.
가장 좋은점은 내가 원하는 주제로 글을 쓰면서 연습 할 수 있다는 것 입니다.
원하는 주제로 글을 쓰기 때문에 꾸준히 연습을 하는데 부담감을 덜게 됩니다.
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
|---|---|
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
| HTML을 무료로 배울 수 있는 사이트 및 강의 (0) | 2020.10.21 |
| HTML 이란? (0) | 2020.10.21 |
| Html 무료로 연습할 수 있는 사이트 (0) | 2020.08.21 |
요즘 다양한 사이트에서 HTML을 무료로 배울 수가 있습니다.
무료라고해서 저품질의 강의가 아닌, 현업에서 종사 하거나 했던 분들이 강의를 올립니다.
"생활코딩"은 모든 강의가 무료로 되어 있습니다.
단계별로 강의가 잘 나눠져 있고, 초보자도 쉽게 이해할 수 있게 만들었습니다.
위 사이트에는 HTML강의 외에도 CSS, 자바스크립트, 데이터베이스 등 다양한 강의가 있습니다.
아무래도 강의로 공부를 하면 시간이 더 들어가는 경향이 있습니다.
위 사이트는 텍스트로 HTML을 배울 수 있습니다.
빠르게 읽어보고 필요한 부분만 실습을 하면서 배우기 좋은 사이트입니다.
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
|---|---|
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
| 초보자가 HTML공부, 실습하는 가장 쉬운 방법 (0) | 2020.10.22 |
| HTML 이란? (0) | 2020.10.21 |
| Html 무료로 연습할 수 있는 사이트 (0) | 2020.08.21 |
축약된 문장을 풀어보면 의미를 쉽게 알 수 있습니다.
참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 접근 할 수 있는 텍스트입니다.
여기서 하이퍼(Hyper)란 건너 편의, 초월이라는 의미를 가지고 있습니다.
태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어의 한가지
즉 클릭 했을 때 다른 사이트로 넘어갈 수 있는 링크(하이퍼텍스트)의 구조를 표시하는 언어입니다.
HTML은 다양한 태그들로 블록을 쌓아 웹페이지를 구성하는 형태입니다.
HTML은 CSS나 JavaScript을 배우기 전에 필수로 배워야 하는 언어입니다.
HTML이 기본 바탕을 그려주는 것이기 때문입니다.
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
|---|---|
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
| 초보자가 HTML공부, 실습하는 가장 쉬운 방법 (0) | 2020.10.22 |
| HTML을 무료로 배울 수 있는 사이트 및 강의 (0) | 2020.10.21 |
| Html 무료로 연습할 수 있는 사이트 (0) | 2020.08.21 |
Html을 무료로 연습할 수 있는 사이트가 있습니다.
위 사진에서 빨간색으로 표시한 곳을 선택하면 HTML 테스트 및 연습을 하는 사이트가 나옵니다.
클릭을 하면 위와 같은 사이트가 나오면서 쉽게 연습을 할 수 있습니다.
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
|---|---|
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |
| 초보자가 HTML공부, 실습하는 가장 쉬운 방법 (0) | 2020.10.22 |
| HTML을 무료로 배울 수 있는 사이트 및 강의 (0) | 2020.10.21 |
| HTML 이란? (0) | 2020.10.21 |