transform-origin속성 –변형 원점 설정하기-이 속성은 지정한 요소의 변형 원점을 설정하는 것이다. transform속성과 함께 사용한다. 속성 값(1) x축:원점에서 x 좌표값으로, 길이 값이나 백분율 left,center,right중에서 사용가능 (2) y축:원점에서 y 좌표값으로, 길이 값이나 백분율 top,center,bottom중에서 사용가능(3) z축:원점에서의 z좌표값으로, 길이 값만 사용 가능 예를 들어 왼쪽 윗 부분을 기준으로 회전이나 왜곡 같은 변형을 실행하려면 다음처럼 지정한다.ex)trnasform-origin:left top; ->트랜스폼의 기준을 왼족 윗부분으로 perspective-원근감 표현하기-원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기..
2차원 3차원 좌표계-변형이랑 웹 요소의 위치를 옮기거나 크기를 조절하고 회전,왜곡 시키는 것을 변형이라고 한다. 단순히 수평이나 수직으로 이동하고 회전하는 것뿐만 아니라, 원근감을 추가한 3차원 변형도 가능하다.2차원 좌표: x축과 y축 이동 가능3차원 좌표:원근감을 더한 것 (z 축에서 앞뒤로 이동하는 것) transform속성 – 웹 요소 변형하기--예를 들어 수평으로 50px 수직으로 100px 이동시키려면 translate라는 변형 항수를 사용합니다ex)transfrom:translate(50px, 100px) -> x축으로 50 px, y축으로 100px 이동이 속성은 여러 가지 변형 함수를 사용할 수 있다 2차원 변형이나 3차원 변형 모두 가능하다. transform 변형 함수 값 trans..
table-layout속성-콘텐츠에 맞게 셀 너비 지정하기-표의 각 셀들은 태그나 태그를 사용해 구성된다. 하지만 이 태그에서 width속성을 이용해 셀 너비를 고정했을 때 여백없이 입력하면 셀 너비를 무시고 한 줄로 길게 입력되어 처음에 의도했던 표 레이아웃을 무너뜨린다. (545 page) 이 속성을 이용하면 셀 안의 내용의 양에 따라 셀 너비를 변하게 할지 고정시킬지 여부를 결정할 수 있다. 속성 값(1)fixed : 셀 너비를 고정합니다. 즉 셀 안의 내용 양에 따라 셀의 너비가 달라지지 않는다.(2)auto : 셀 안의 내용에 따라 셀의 너비가 달라진다. 기본 값(3)inherit : 부모 요소의 table-layout 값을 상속합니다. 다음 예는 셀 안의 내용에 따라서 셀 너비가 바뀌지 않도록..
columm-width-단의 너비 지정하기-한 화면을 여러 개의 단으로 구성할 때, 단의 너비를 고정해 놓고 화면을 분할할 수 있다. 너비 값을 바꿀 수 없기 때문에 화면이 커지면 단의 개수가 많아진다.속성 값(1) 값 :단 너비를 직접 지정합니다.(2) auto : 단의 개수 colum-count같은 다른 속성을 이용해 단의 너비를 결정합니다. ex) div { column-width:80 px -> 각단의 너비 80px } column-count속성 – 단의 개수 지정하기-다단 화면을 만들 때 단의 개수를 먼저 정해놓고 화면을 분할할 수도 있다.속성 값(1) 개수 :0보다 큰 값으로 콘텐츠가 들어갈 단의 개수를 지정(2) auto : 단의 너비 column-width 같은 다른 속성으로 단의 개수를 ..
position 속성 – 원하는 형태로 요소 배치하기-웹 문서 안의 요소들을 자유자재로 배치해 주는 속성이다. 텍스트나 이미지를 나란히 배치하기도 하고 여러개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다. position속성 값(1)static : 요소를 문서의 흐름에 맞춰 배치합니다(2)relative : 이전 요소에 자연스럽게 연결해서 배치합니다.(3)absolute : 원하는 위치를 지정하여 배치합니다(4)fixed : 지정한 위치에 고정하여 배치한다. 요소가 화면에 잘릴 수 있다. absolute의 예시ex) #a { position:absolute; //left와 top값에 맞춰 위치 고정 left:30px; //수평 좌표 top:50px; //수직 좌표 position:static 속..
블록 레벨 요소와 인라인 레벨 요소-블록레벨요소: 태그를 사용해 혼자서 한 줄을 차기하는 요소(왼쪽or오른쪽에 다른 요소가 못옴 div태그나 p태그)-인라인 레벨요소: 줄을 차지하지 않는 요소,다른 요소가 와도 상관 X (img태그,strong태그 등) 예를 들어, 목록은 블로레벨 요소이기 때문에 각 항목들이 한 줄에 하나씩 세로로 표시되지만, 목록을 인라인 레벨 요소로 바꿔서 지정하면 각 항목을 가로로 배치할 수 있다. 이런 방법으로 목록을 이용해 내비게이션 메뉴를 만들게 됩니다. 블록레벨태그 : p,h1~h6 , ul, ol, div, hr,table, fieldset , address인라인 레벨 태그 : img, object, br , sub , sup, span, input, textarea, l..
border-radius 속성 – 박스 모서리 둥글게 만들기-백분율 (%) 크기 값을 사용합니다. 값은 기본으로 4개까지 지정할 수 있다. 순서대로 top-left,top-right, bottom-left, bottom-right순입니다. (테두리 위 왼쪽,오른쪽 ) (테두리 아래 왼쪽,오른쪽) 값이 한 개라면 네 방향의 크기가 모두 같습니다. right값이 생략된다면 마주고있는 left와 같은 크기를 가지고 역시 반대도 마찬가지입니다. 속성 값(1)크기 : 둥글게 처리할 반지름 크기를 px나 em같은 단위와 함께 수치로 표시(2)백분율 : 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정. ex) div { border-radius : 20 px ; } ->모서리 부분 반지름 20px..
border-width속성-테두리 두께 지정하기-테두리 두께를 지정할 때 1px나 5px처럼 직접 크기를 입력할 수도 있고 thin이나 medium,thick같은 키워드 중에서 하나를 선택할 수도 있다. 속성 값thin위아래는 얇게 오른쪽은 굵게 왼쪽은 5px border-color속성 –테두리 색상 지정하기-이 속성을 사용하면 네 방향 테두리의 색상을 한꺼번에 설정할 수 있다. 속성 값(1)색상 값 :색상 이름이나 16진수 값, rgb값 등을 이용해 색상을 지정한다(2)transparent : 투명하게 나타낸다. 기본값임ex) border-color:red; ->빨간색 테두리 border-style 속성 – 테두리선 스타일 지정하기-테두리 스타일의 기본값은 none이므로 스타일시트에서 테두리 스타일을 ..