JuinThyme

transform-origin 속성 - 변형 기준점 설정하기 transform-origin 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다. transform-origin: | initial | inherit; 속성 : 원점 기준의 x 좌푯값으로 길이 값이나 , left, center, right 중에서 사용할 수 있다. : 원점 기준의 y 좌푯값으로 길이 값이나 , top, center, bottom 중에서 사용할 수 있다. : 원점 기준의 z 좌푯값으로 길이 값만 사용할 수 있다. perspective, perspective-origin 속성 - 원근감 표현하기 perspective 속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡..

IT/HTML 및 CSS 2021. 5. 17. 13:11

2차원 변형과 3차원 변형 CSS3를 이용하면 스타일 시트 소스만으로 간단히 이미지를 변형할 수 있다. 이미지의 변형은 2차원 변형과 3차원 변형으로 나뉜다. 2차원 변형은 웹 요소를 변형 시킬 때 단순히 수평이나 수직으로 이동하고 회전한다. 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해 변형킨다. transform과 변형 함수 이미지를 회전 시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용한다. 2차원 변형 함수 2차원 변형 함수는 익스플로러 9를 비롯한 이전 브라우저를 위해 -webkit-과 -moz-, -ms-, -o- 등의 브라우저 접두사를 붙여야 한다. translate(tx, ty) : 지정한 크기만큼 x축과 y축으로 이동한다. translateX(tx) : ..

IT/HTML 및 CSS 2021. 5. 16. 14:15

사용 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. :link 가상 클래스 선택자 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. :visited 가상 클래스 선택자 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용한다. :hover 가상 클래스 선택자 웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정한다. :active 가상 클래스 선택자 링크나 이미지 등 웹 요소를 활성화했을 때 스타일을 지정한다. :focus 가상 클래스 선택자 웹 요소에 초점이 맞추어졌을 때의 스타일을 지정한다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 실..

IT/HTML 및 CSS 2021. 5. 13. 12:36

[속성] 선택자 - 지정한 속성에 스타일 적용하기 지정한 속성을 가진 요소를 찾아 스타일을 적용할 수 있다. 메뉴 1 메뉴 2 메뉴 3

IT/HTML 및 CSS 2021. 5. 12. 18:58

하위 선택자 하위 선택자(descendant selector)는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 한다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { color: blue; } section은 상위 요소고, p는 section 요소의 하위 요소다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. css에 section 태그의 태그의 아래 모든 요소의 글자 색상이 파란색으로 적용되게 했다. 그러면 태그는 적용된 속성이 없기 때문에 default 값인 검은색이 표출된다. 실행 화면 자식 선택자 - 자식 요..

IT/HTML 및 CSS 2021. 5. 11. 18:48

태그 - 머리말 지정하기 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다. 태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수 있다. 태그 - 문서를 연결하는 내비게이션 링크 내비게이션 역할을 하는 태그다. 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나탄내다. 태그는 내비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용한다. 태그 - 주제별 콘텐츠 영역 나타내기 태그는 문서에 콘텐츠 영역을 나타낸다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 ~ 제목 태그가 함께 사용된다. 태그 - 콘텐츠 내용 넣기 ..

IT/HTML 및 CSS 2021. 5. 10. 18:48

empty-cells 속성 - 빈 셀의 표시 여부 지정하기 border-spacing: separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀 들의 표시 여부를 지정한다. empty-cells: show | hide 속성 show : 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다. 기본 값이다. hide : 빈 셀에 테두리를 그리지 않고 비워 둔다. 과일 사과 바나나 야채 토마토 채소 상추 width, height 속성 - 표 너비와 높이 지정하기 표와 셀의 너비를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시된다. 그래서 width와 height 속성을 이용해 넓이와 높이를 지정하면 지정한 크기가 표출된다. 과일 사과 바나나 야채 토마토 table-..

IT/HTML 및 CSS 2021. 5. 7. 17:58

caption-side 속성 - 표 제목 위치 정하기 표 제목은 태그를 이용해 캡션으로 표시한다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있다. caption-size: top | bottom 속성 top : 캡션을 표의 윗부분에 표시한다. 기본값이다. bottom : 캡션을 표의 아랫부분에 표시한다. border 속성 - 표 테두리 스타일 결정하기 표도 border 속성을 이용해 테두리를 그릴 수 있다. 표의 바깥 테두리와 셀의 테두리를 따로 지정을 할 수 있다. 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대구 서울 서울 vs 대구 border-collapse 속성 - 테두리 통합, 분리하기 테두리가 2줄로 표..

IT/HTML 및 CSS 2021. 5. 6. 12:25