Andamiro25

transform(변형) - 이차원 좌표에서 요소를 변형시키는 프로퍼티이다. - 값에는 translate(), scale(), rotate(), skew() 4종류의 트랜스폼 함수를 사용해 이동, 확대축소, 회전, 경사를 만들 수 있다. 형식 : transform : 트랜스폼 함수; ex) transform: rotate(45deg); 이동(translate) - translate() 함수는 요소를 X축 방향이나 Y축 방향으로 이동시킬 수 있다. - X축 방향값을 플러스로 하면 오른쪽으로, 마이너스로 하면 왼쪽으로 이동한다. - Y축 방향값을 플러스로 하면 아래로, 마이너스로 하면 위로 이동한다. 형식 : translate(x축 방향의 거리, y축 방향의 거리(생략가능) ) translateX(x축 방향..

position 레이아웃 - 일반 배치나 float 배치는 소스 코드 나열 순과 브라우저 표시 순으로 연동하기 때문에 어느정도 제약이 따른다. - position 속성을 이용하면 순서에 상관없이 자유로운 레이아웃을 구성 할 수 있다. - position은 표시 위치를 지정하는 방법을 나타내는 속성이며 디폴트값은 static이다. - static은 일반 배치(여태 작성해온 방식)을 의미한다. -이를 absolute(절대 배치)로 변경하면 프리 레이아웃이 가능해진다. 절대 배치의 구조 - position : absolute;가 설정되면 그 콘텐츠는 기본 콘텐츠 배치의 흐름에서 벗어나 '기준 박스'를 지점으로 자유롭게 배치된다. - 기본 배치때 표시될 영역이 없어지고 후속 콘텐츠로 채워진다. - 마치 보통 H..

float 레이아웃 - float를 배치하지 않은 경우 블록 요소인 각 콘텐츠는 소스 코드의 순서대로 위에서 아래로, 즉 세로로 표시한다. - float가 설정된 블록은 배치 흐름에서 벗어나 왼쪽 또는 오르쪽에 섬처럼 떠 있는 상태가 된다. - 즉, float를 사용하지 않으면 세로로 놓이는 콘텐츠를 float을 사용하여 옆으로 놓을 수 있다는 뜻이다. - 일반적으로 왼쪽에 배치하고 싶은 것은 float:letf; 오른쪽은 float:right; 라고 설정한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 header{ background-color :#ff0000; } #left{ width:500px; background-color:#d1ec56; float:..

미디어 쿼리 - @media(조건) { } : 조건에 부합하면 아래의 코드를 실행한다. - max-width : 'n'px, 최소 가로가 'n'px 까지는 안의 코드 실행 - min-width : 'n'px, 최대 가로가 'n'px 까지는 안의 코드 실행 ex) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 body{ margin : 0; } h1{ text-align : cent..

그리드 - display : gird로 선언한다. - gird-template-columns로 열(column)을 정의, grid-template-rows로 행을 정의한다. - '숫자'px은 고정크기, '숫자'fr은 일정 비율로 크기를 지정한다. - : block level element, 오로지 디자인 용도로만 쓰이는 특별한 의미없는 태그, 이 태그를 이용해 부모-자식관계의 코드를 만들어 디자인한다. - : inline element, 와 상동 ex) NAVIGATION 내용물 - caniuse사이트를 이용, 통계에 따른 학습하기 : https://caniuse.com/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28..

태그 영역에 테두리 그리기 border-width: 5px; → 테두리 굵기 5px border-color : red; → 테두리 색 빨간색 border-style : solid; → 실선을 그린다. ex) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /* block level element */ h1{ border-width: 5px; border-color : red; border-style : solid; } /* inline element */ a{ border-width: 5px; border-color : red; border-style : solid; } cs - 태그처럼 해당 줄 전체 영역(block)을 쓰는 태그를 'block level element'..

CSS 문법 - CSS 가 기술되는 영역 선택자(selector) - 스타일을 변경할 HTML 요소 선택 선언(declaration) - 선택자 뒤에 중괄호 부분 영역, 이 부분에 속성(property)와 값(value)를 기술한다. *형식 ex) -> 태그를 사용한 모든 텍스트를 빨간색으로 *인라인 형식(inline style sheet) - 태그 안에 속성(property)으로 작성할 수 있다. CSS 선택자 종류 타입 선택자(type selector) h1{ color : green; } 모든 태그 사용한 요소 선택 아이디 선택자(id selector) #active { color : red } id가 "active"인 요소 선택 h1#active {color : red } 요소 중 아이디가 "ac..

HTML 기본 문법 - 태그(tag) - 태그(tag)로 감싸여진 부분이 어떤 역할을 하는지 알려주는 기능이다. - *사용 형식 HTML 기본 문법 - '' 사이에 태그의 기능이나 역할을 알려주는 태그명이 들어간다. - 태그로 감싸여진 부분이 해당 태그의 기능이 발휘되는 곳이다. - 앞에 있는 태그를 '열리는 태그', 뒤에 있는 태그를 '닫히는 태그'라고 부른다. 닫히는 태그는 '/'로 구분한다. 자주 쓰는 태그(tag)들 : 글씨를 굵게 만든다. : 감싸여진 부분에 밑줄을 넣는다. : 본문 제목을 나타내는 태그, 1~6단계가 존재한다. 제목, 머리말을 작성할 때 태그 쓴 결과가 검색환경에서 더 잘 나온다. : 줄바꿈(New line)을 한다. 닫히는 태그는 없다. : 본문의 단락 설정해준다. 번거롭게 ..