post-thumbnail

[CSS] Grid

Flex(플렉스)가 1차원을 위한 레이아웃 시스템이라면 Grid(그리드)는 2차원(행과 열)을 위한 레이아웃 시스템입니다.Flex와 마찬가지로 Item들을 포함하는 부모요소를 Container라 부르며 Container에 display: grid;를 설정해줌으로써 컨테

2021년 10월 5일
·
0개의 댓글

[CSS] Flexbox

Flexbox는 CSS3에서 처음 등장한 개념으로 Flexible Box Layout을 의미합니다. container와 item이라는 개념을 이용하여 가로 정렬, 세로 정렬 등 레이아웃을 지정해줄 수 있는 속성을 말합니다. Flexbox 등장 이전에는 요소들을 정렬하는

2021년 10월 5일
·
0개의 댓글

[CSS] animation

animation은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜주는 속성입니다.비슷한 속성으로 transition이 있는데요. transition과는 아래와 같은 차이가 있습니다.💡 transition과의 차이 1\. transition의

2021년 10월 5일
·
0개의 댓글

[CSS] transition

어떤 요소를 A라는 상태에서 B라는 상태로 어느 정도 시간차를 두고 애니메이션과 같이 변하게 할 수 있는데 transition이라는 속성을 이용해서 이러한 효과를 보여줄 수 있습니다.버튼에 마우스를 올렸을 때 색상이 서서히 Fade in 되면서 바뀌는 효과를 주고 싶을

2021년 10월 5일
·
0개의 댓글

[CSS] transform

transform은 요소에 회전, 크기 조절, 이동 효과를 부여할 수 있는 속성입니다. 비슷한 속성 및 함수로 transition, translate()가 있습니다.원래 형태가 있는 요소를 transform이라는 속성을 이용해서 크게, 작게, 회전, 이동시킬 수 있습니

2021년 10월 4일
·
0개의 댓글

[CSS] 색상과 배경

CSS에서는 색상을 지정하는 방법 중에 일반적으로 사용하는 3가지 방법에 대해 소개하려고 합니다.red, blue, green, transparent와 같이 키워드로 미리 지정된 값을 사용할 수 있습니다.color picker처럼 - 모든 색상에 red, blue이런식

2021년 10월 1일
·
0개의 댓글

[CSS] 레이아웃

ex) span영역의 크기가 내부 컨텐츠 크기로 정해집니다.width, height로 크기를 변경할 수 없습니다.margin, padding의 top, bottom을 지정할 수 없습니다.여러 요소가 가로 배치됩니다.ex) div영역의 크기를 width, height로

2021년 10월 1일
·
0개의 댓글

[CSS] 박스 모델

박스 모델이란❓ 크기 - width, height 크기 - max-width, min-width, max-height, min-height 여백 - margin 여백 - margin collapsing 여백 - padding 테두리 - border-style, bor

2021년 9월 30일
·
0개의 댓글

[CSS] 단위와 값

화면을 구성하는 가장 기본이 되는 단위로 과거에는 모니터의 1dot == 1pixel을 의미했으나 레티나와 같은 디스플레이에 따라 1dot != 1pixel일 수도 있습니다.pixel은 해상도에 따라 다른 크기를 갖게 됩니다.다른 절대 길이 단위도 있으나 실제로는 px

2021년 9월 30일
·
0개의 댓글

[CSS]폰트 관련 속성

요소의 폰트 사이즈를 변경해 줄 수 있는 속성입니다.요소의 폰트 스타일(이탤릭체)를 변경해 줄 수 있는 속성입니다.italic의 경우 필기체로 표시하는 폰트도 있습니다.상속받은 값을 무시하고 싶을 때는 font-style: normal을 사용합니다. HTML 태그 중에

2021년 9월 30일
·
0개의 댓글

[CSS] 선택자

선택자란? CSS 규칙을 만들 때 어떤 HTML 요소를 선택할지 정의하는 것을 말합니다. JavaScript에서도 HTML에 동적인 요소를 추가할 때 선택자를 사용하므로 중요한 개념입니다. Type Selector (태그 선택자) tag를 선택하여 해당되는 모든 ta

2021년 9월 29일
·
0개의 댓글
post-thumbnail

CSS란?

CSS

2021년 9월 29일
·
0개의 댓글

[HTML]전역 속성

전역 속성 (Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 표준에 명시되지 않은 요소에도 지정할 수 있습니다.스타일을 지정할 때 한 가지만 지정해할 때 쓰는 이름입니다.한 페이지에는 고유한 id 하나만 사용할 수 있습니다.\

2021년 9월 29일
·
0개의 댓글

[HTML]메타데이터

데이터의 데이터를 말합니다. 메타데이터는 필수 정보는 아니지만 검색엔진 등에 제공하기 위해 데이터를 정보자체에 포함하여 브라우저가 원하는 정보를 빠르고 쉽게 찾을 수 있게 하기 위한 것입니다.일반적으로 author, copyright, keyword, laungage

2021년 9월 29일
·
0개의 댓글
post-thumbnail

[HTML]form 요소

form이란❓ 다른 요소들이 사용자에게 정보를 제공하기 위함이라면 form 요소는 사용자와의 인터랙션이 들어가는 부분입니다. 입력된 정보가 유효한지 검증하는 부분은 JavaScript의 영역입니다. action 속성 action 속성은 폼 데이터(form data)를

2021년 9월 29일
·
0개의 댓글
post-thumbnail

[HTML]임베디드 요소

img는 빈 요소로 사용되며 포함하고자 하는 이미지의 경로를 src로 반드시 지정해줘야 합니다.절대경로와 상대경로로 입력이 가능합니다.이미지의 주소가 잘못되었거나 서버에 문제가 있어 읽어올 수 없는 경우 alt 속성이 이미지를 대체하여 표시됩니다.각각 이미지 픽셀 기준

2021년 9월 28일
·
0개의 댓글
post-thumbnail

[HTML]목록과 표

목록 - ul, ol, li ol (ordered list) 순서 있는 목록으로 1,2,3 ... 차례로 순서가 붙는 목록을 만들 때 사용합니다. 순서 있는 목록은 <ol>로 목록의 내용은 <li>로 만듭니다. Mix flour, baking

2021년 9월 28일
·
0개의 댓글
post-thumbnail

[HTML]구조를 나타내는 요소

div 태그는 특정 구역을 나누어 웹사이트의 레이아웃을 만들 때 사용합니다.div는 순수한 블럭 컨테이너로서 아무것도 표현하지 않습니다.div 자체는 아무런 의미를 가지지 않으며 특정 구역을 묶어서 스타일링을 쉽게 하기 위한 목적을 가집니다.span도 순수한 인라인 컨

2021년 9월 28일
·
0개의 댓글
post-thumbnail

[HTML]텍스트 요소

1. 제목 - h1 ~ h6(heading) HTML은 제목을 표현할 수 있는 태그를 제공합니다. 가장 큰 태그 부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있습니다. 페이지당 하나의 ``만 사용하는 것이 바람직합니다. 검색 엔진들은 각 웹 사이트의 내

2021년 9월 28일
·
0개의 댓글
post-thumbnail

VS Code 단축키

![](https://images.velog.io/images/zhunhe/post/a0053f01-0f36-448f-970c-38c637009035/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-28%20%E1%84%8B%...

2021년 9월 28일
·
0개의 댓글