우당탕탕 개발일지

변형 2차원 변형과 3차원 변형 2차원 변형 : 단순희 수평이나 수직으로 이동하고 회전하는 것이다. x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다. 3차원 변형 : 원근감을 주는 z축을 추가해 변형 시키는것이다. z축은 앞뒤로 이동하는데 보는 사람 쪽으로 다가올수록 값이 더 커지고 뒤로 갈수록 값이 작아진다. transform과 변형 함수 : transform 변형함수와 함께 사용한다. 기본형 ) transform: 변형 함수; 2차원 변형 함수 : 최신 브라우저에서는 지원되지만 인터넷 익스플로러9를 비롯한 이전 브라우저를 위해 브라우저 접두사를 붙여야한다. 3차원 변형 함수 : 이전 브라우저를 위해 -webkit- -moz-등의 브라우저 접두사를 붙여야하지만 익스플로러의 경..

연결 선택자 상위요소 하위요소 하위요소 모두에 스타일이 적용 하위요소는 자식뿐만 아니라 손자요소, 손자의 요소까지 적용됨. 부모요소 > 자식요소 자식요소에만 스타일을 적용 요소1 + 요소2 요소1과 2는 같은 레벨이면서 요소1 이후 맨 먼저 오는 요소2에 스타일을 적용한다 같은 부모요소를 가지고 있는 형제관계에서 먼저 나오는 요소를 '형요소' 나중에 나오는 요소를 '동생요소'라 하는데 첫번째 동생 요소에만 스타일이 적용된다. 요소1 ~ 요소2 모든 형제 요소에 적용된다 h1~p{}일 경우, h1 다음에 오는 모든 형제 p요소에 해당된다. 속성 선택자 [속성] 지정한 속성에 스타일 적용 [속성=값] 특정값을 갖는 속성에 스타일 적용 예 ) [target="_blank"] [속성~=] 여러 값 중 특정 값이..

문서 구조를 위한 HTML5 시맨틱 태그 태그 : 머리말 지정하기 주로 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다. 태그 : 문서를 연결하는 내비게이션 링크 - 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다. - 태그는 내비게이션 메뉴뿐만 아니가 푸터에 있는 사이트 링크 모음 부분에도 많이 사용된다. 즉, 위치의 영향을 받지 않아 , 또는 안에 포함시킬 수도 있고 독립해 사용할 수도 있다. * id 태그를 따로 지정해주면 스타일 시트에서 스타일을 지정할 수 있다. * 태그 : 주제별 콘텐츠 영역 나타내기 - 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용한다. 제목 태그와 함께 사용되며 태그 안에 를 사용할 수 있다. 태그 : 콘텐츠 내용 넣기 - 태그..

CSS 포지셔닝과 주요 속성들 box-sizing 속성 : 박스 너비 기준 정하기 - 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성으 지정할 수 있다 content-box width 속성 값을 콘텐츠 영역 너비 값으로 사용한다. 기본값이다. border-box width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다. float 속성 : 왼쪽이나 오른쪽으로 배치하기 - 예를 들어 이미지와 텍스트를 나란히 표시하려고 할 때는 이미지에 float 속성을 사용한다. left 해당 요소를 문서의 왼쪽으로 배치한다. right 해당 요소를 문서의 오른쪽으로 배치한다. none 좌우 어느 쪽으로도 배치하지 않는다. clear 속성 : float 속성 해제하기 ..

css와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록레벨 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지한다. 즉 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비와 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야한다. ex) .. 인라인 레벨 : 줄을 차지하지 않아 나머지 공간에는 다른 요소가 올 수 있다. ex) ... 박스 모델(box model) : 박스 형태의 콘텐츠 - 태그 하나하나를 일종의 박스로 취급하여 그것의 부피를 결정한다. * 네 방향의 스타일을 다 따로 설정할 수 있다. * 1. 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백 2. 테두리(border) : 박스의 테두리 3. 마진(margin) : 여러 박스 모델 사이의 여백 width..

웹에서 색상 표현하기 16진수 표기법 # 기호 다음에 6자리의 16진수로 표시하는 것이다. RR자리에는 빨간색, GG자리에는 초록색, BB자리에는 파란색의 양을 표시한다. 각 색상마다 하나도 섞이지 않았을을 표시하는 것은 00, 가득 섞였음음을 표시하는 것은 ff까지 사용할 수 있다. #000000는 검정색이고 #ffffff은 흰색인다. 예를들어 #ffff00은 빨간색과 초록색은 가득 섞였음을 표시하고 파란색은 전혀 섞이지 않았음을 나타낸다. rgb와 rgba표기법 rgb) 16진수 표기법처럼 빨간색, 초록색, 파란색 순서로 표기하지만 16진수가 아닌 십진수로 표기한다. 하나도 섞이지 않았을 때는 0(흰색), 가득 섞였을 때는 255(검정색)으로 표시한다. 예를 들어 빨간색을 표시하고 싶으면 rgb(25..

글꼴 관련 스타일 font-style : 글꼴 지정하기 -글꼴을 지정할 대 하나만 지정할 경우 지정한 글꼴이 없을 경우에 대비해서 두번째, 세번째 글꼴까지 지정해야한다. 쉼표( , )로 구분한다. @font-face : 웹 폰트 사용하기 - 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로 드시키는 방식이다. 구글 웹 폰트 사용하기 : 사용방법 구글 폰트 접속 - 원하는 폰트 클릭훙 오른쪽에 [Embed] - [@import] - 소스복사/ 글꼴 이름 기억 복사한 소스를 태그에 붙여 넣고 font-family 에 기억해둔 글꼴이름 넣는다. font-size 속성 : 글자 크기 조절하기 브라우저에서 지정한 글자 크기이다...

CSS 기초 왜 스타일을 사용할까? 1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다 -웹 문서 내용과 디자인이 구분되어 있기 때문에 사이트 내용을 수정해야 할 때도 디자인에 전혀 영향 미치지 않고 내용수정만 가능하다. 2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 -대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있습니다. 스타일 형식 p { text-align: center; } p 를 선택자/셀렉터, text-align: 을 스타일 속성, center; 을 속성 값이라고 한다. - 스타일 속성에는 : (콜론)이 붙고, 속성 값에는 ; (세미콜론)이 붙는다. 스타일을 표기하는 방법 아래의 소스는 모두 다 같은 소스이지만 공백의 차이이다. 공백..