html & CSS

W3CHTML5WHATWGHTML Living Standard apple, google, ms , mozilla→ 웹페이지를 작성하기 위한, 구조를 잡기 위한 언어, 웹 컨텐츠의 의미와 구조를 정의hyper Text Markup Language 🔗🔗 hyper T

Cascading Style Sheets→ 스타일 레이아웃 등을 통해 문서를 표시하는 방법을 지정하는 언어⇒ 인라인⇒ 내부 참조 - ⇒ 외부참조(link file)CSS 구문은 선택자와 함께 열림선택자를 통해 스타일을 지정할 HTML 요소를 선택중괄호 안에서는 속성과

Untitled각자 값 주기상하좌우 다 주기줄바꿈이 일어나는 요소화면 크기 전체의 가로 폭을 차지한다.블록 레벨 요소 안에 인라인 요소가 들어갈 수 있음 ex\_) div / ul ol li / p / hr / form 등 줄바꿈이 일어나지 않는 요소content

본래는 이미지 좌 우 주변으로 텍스트를 둘러싸는 레이아웃을 위해 도입이미지가 아닌 다른 요소에도 적용해 웹 사이트 전체 레이아웃을 만드는 것까지 발전none left right : 요소를 좌우로 띄움Untitled선택한 요소의 맨 마지막 자식으로 가상 요소를 하나 생성

Bootstrap 홈페이지 ⇒ 빠른시작 ⇒ copy 두개 위아래로 복붙html 기본 사이즈 16pxm-1 → 4pxm-2 → 8pxm-3 → 16px (1rem)m-4 → 24pxm-5 → 48px다양한 화면 크기를 가진 디바이스들이 등장함에 따라 생긴 개념반응형 웹은

<label> : 서식 입력 요소의 캡션 (빈칸)

사용방법 : 부모태그에 flex를 주면 flexible 하게 바뀐다자식태그에 flex 속성에 값을 주면 범위를 차지한다.선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일 설정 가능ex) :hover시간을 주고 변하게 하기글꼴 종류로, <font> 태

:hover 를 하게 되면, 사진이 이동하게 된다.

background 를 바꿔주는데transition에 시간 , 내용 , 효과 를 넣어준다.캡처 : https://cubic-bezier.com/ease : 천천-빠름-천천linear : 등속ease-in : 천천-보통ease-out : 보통-천천ease-in-

display : flex 로 flexible 하게 만들기가로선 정렬startendcenterspace-between: 요소들 사이에 동일한 간격 주기space-around : 요소들 주의에 동일한 간격 주기세로선 정렬startendcenterbaseline : 컨