CSS
1.TIL #09 CSS 사용법
<style>태그를 사용하여 스타일을 적용한다.html문서 내의 <head> 태그 사이에 <style>태그를 사용해 css스타일을 적용한다.해당 html문서에만 스타일이 적용된다.우선 editor에 style.css라는 이름을 가진 파일을 만든다.그후
2.TIL #09 CSS 기초
3.TIL #10 CSS text, list, box model
문단 꾸미기 text-align :문단 정렬 방식을 정하는 속성이다. text-align 의 속성값 left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모
4.TIL #10 CSS border, background
border는 테두리를 만드는 속성이다.문법은 다음과 같다.border: border-width border-style\`\`border-color | initial | inheritborder-width : 선의 두께를 정합니다. 기본값은 medium.border-s
5.TIL #12 CSS Flex기초, flex container 속성
기본적으로 사이트의 레이아웃을 구성할 때 많이 사용하는 요소들은 block개념으로표시되며 수직으로 쌓이기 때문에 수직 구성을 만들기는 어렵지 않다.하지만 수평구조를 사용하기에는 번거로운 작업이( table, flost,inline-block) 이 필요하기 떄문에보다
6.TIL #13 CSS Flex items 속성
Flex Items를 위한 속성들은 다음과 같다.order:Flex Item의 순서를 설정flex: flex-grow, flex-shrink, flex-basis의 단축 속성flex-grow: Flex Item의 증가 너비 비율을 설정flex-shrink: Flex I
7.TIL #14 CSS Animation과 @keyframes 그리고 실습
animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정animation-direction: 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정 normal: 지정된 방향으로 재생. reverse: 반대 방향으로 재생.
8.TIL #15 CSS transform과 transition
transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있다.transform의 rotate로 요소를 회전시킬 수 있다.문법transform: rotate( angle )transform: rotateX( angle )transform
9.TIL #24 CSS grid
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월하다. 그리드는 콘테이너(container)와 아이템(item)으로