웹사이트 : 구조 + 스타일 + 동적인 내용 이 합쳐진 결과물,제품이다. 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당. LIKE 기획자실제 화면에 표시되는 방법(색상, 크기, 폰트 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담
html의 기본 태그, css 초기화
html와 css의 개요
CSS의 선택자, 공백 선택자, 가상 클래스 선택자, 가상 요소 선택자, 선택자 우선순위
요소의 가로 / 세로 너비기본값(요소에 이미 들어있는 속상이 값), auto : 브라우저가 자동으로 너비를 계산. 이때 브라우저는 해당 요소가 block 요소인지 인라인 요소인지 기타 어떤 특성을 가지고 있는 지에 따라서 그 요소가 가지고 있는 가로 너비를 다르게 화
CSS의 단위
요소의 외부 여백, 내부 여백, margin, padding
요소의 테두리 선을 지정하는 단축 속성
요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성, 부모의 속성으로 넣어줌.기본값, visible : 넘친 내용을 그대로 보여줌hidden : 넘친 내용을 잘라냄scroll : 넘친 내용을 잘라냄, 스크롤바 생성auto : 넘친 내용이 있는 경우에만
CSS 크기 계산, box-sizing > 요소의 크기 계산 기준을 지정 기본값, content-box: 요소의 내용(content)으로 크기 계산 border-box: 요소의 내용 + padding + border로 크기 계산 border 와 padding으로
글자의 기울기기본값, normal : 기울기 없음italic : 이텔릭체글자의 두께(가중치)기본값, 400 : 기본 두께bold, 700 : 두껍게100 ~ 900 : 100단위의 숫자 9개, normal과 bold 이외 두께글자의 크기기본값, 16px: 기본 크기단위
요소의 위치 지정 기준position을 통해서 요소의 위치의 기준!을 먼저 정해주고 위치를 설정!기본값, static : 기준 없음relative : 요소 자신을 기준absolute : 위치 상 부모 요소를 기준 fixed : 뷰포트(브라우저)를 기준position과
1차원 레이아웃, Flex Container + Flex Items, 정렬: display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-itemsFlex Container의 화
전환의 전 상태와 후 상태의 중간 상태를 부드럽게 만드는 것요소의 전환(시작과 끝) 효과를 지정하는 단축 속성transition-property transition-duration (단축형으로 작성시 필수 포함 속성!) transition-timing-functio
요소의 변환 효과 transform: 변환함수1 변환함수2 변환함수3 ...;transform: 원근법 이동 크기 회전 기울임; px 단위translate(x, y) : 이동(x축, y축)translateX(x) : 이동(x축)translateY(y) : 이동(y축)
Document Object Model, Application Programming Interface즉, HTML의 object model, 예를 들어 div, span, input 요소들 API, 웹사이트가 동작하기 위해서 입력하는 프로그래밍 명령HTML을 제어하는