HTML 기초

HTML, CSS, JavaScript?⚡내가 여태 공부해온 HTML, CSS, Javascript의 정의들은 뭘까?라고 생각했을 때 한번에 비유할 수 있는건 집이라고 생각했다.HTML은 웹 문서의 기본적인 골격을 담당한다.예를 들면 밑에 있는 이미지처럼 웹페이지에

여는 태그(Opening tag):<요소의 이름>닫는 태그(Closing tag):</요소의 이름>내용(Content): 요소의 내용요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.ex) 줄바꿈 요소로 텍스트 안에

메타데이터란 데이터를 설명하는 데이터이다.책으로 데이터로 비유하자면 책 앞쪽에 저자, 발행일, 출판사, 번역가 등등 책을 설명해주는 정보들을 말한다.ex) google 예시title은 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의할 수 있다.(텍스트만

form 요소 form 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획이다. 네이버에 회원가입 폼이다. > ### form - action, method

CSS는 Cascading Style Sheets의 줄임말이다.CSS는 룰 기반(Rule-based)의 언어이다.CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.선택자 (Selector): 스타일을 지정할 HTML 요소를 선택선언 블

Type Selector

가상 요소 선택자 -> selector::\_\_가상 요소 선택자는 상태에 따라 변경이 아닌 실제로 존재하지 않는 요소를 만들거나범위를 만들어서 그곳에 스타일을 적용한다..movie::before { before element라는 가상의 요소에 스타일이 적용된다. c

상대길이 .child{ font-size: 1em; 부모 parent의 폰트사이즈인 24px로 나온다.}뷰포트 백분율길이 - vw, vh..디바이스 크기에 따라 반응형을 만들고 싶은데 유용하게 사용이 가능하다.

박스 모델은 박스가 겹겹이 쌓아져 있는 구조를 말한다.content = 콘텐츠가 표시되는 영역.padding = 콘텐츠와 테두리(border)사이의 여백.border = padding과 margin 사이의 테두리.margin = 가장 바깥 쪽 레이어로 콘텐츠와 패딩,

inline요소 : ex) span...영역의 크기가 내부 콘텐츠 크기로 정해진다margin, padding dml top/bottomblock요소 : ex) div...영역의 크기를 width, height 지정할 수 있다.width를 지정하지 않으면 가로 전체를 차

transition-property, transition-duration, transition-timing-function과transition-delay를 위한 단축 속성이다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있다.transition-dela

행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.inline-block으로 했을 경우 수평정렬이 된것처럼 보이지만 블럭 사이에 빈 공간이 생기게 된다.flexbox를 사용할

flex-item 요소의 flex-shrink 값을 설정하는 속성이다.선행조건은 flex-item 요소의 크기가 flex-container 요소의 크키보다 클 때 사용된다.1번은 크기를 유지하고 2~3번은 줄어든다.플렉스 아이템의 초기 크기를 지정한다. box-sizi

Grid 웹페이지를 위한 이차원 레이아웃 시스템이다. 콘텐츠를 행과 열에 배치할 수 있으며, 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있다. > ### Container - display grid의 행과 열이 나타난다. inline-grid

컨테이너 크기가 안에 있는 컨텐트 보다 크고 공간이 남아있어야 사용이 가능하다.startendspace-aroundspace-betweenstartendcenterspace-betweenspace-around하나의 아이템에 대한 정렬.1부터 3까지 주었을 때 3칸을 차

SASS는 CSS의 확장언어이다. CSS보다 조금 더 높은 자유도를 개발자들에게 부여.기존 CSS와는 다르게 변수, 반복문, 조건문 등을 사용할 수 있다.html 구조에 따라 네스팅 구조를 정하고 각각의 태그별로 css를 입혀주면css 파일에 저절로 변환이 된다.네스팅

채도 :색이 보다 선명할수록 채도가 높다고 말하며 회색이나 흰색 또는 검정과 같은 무채색에 가까울수록 채도가 낮다고 말한다. 채도가 높은 색을 말할 때는 흔히 '짙다'고 표현하고, 반대로 채도가 낮은 색을 말할 때는 흔히 '흐리다'는 표현을 사용한다. 예를 들어 짙은

다른 클래스의 버튼을 만들 때 번거로워지게 된다.이 때 extend를 사용 할 수 있다.이런식으로 css를 사용할 수 있다.