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

[속성] 선택자 - 지정한 속성에 스타일 적용하기 지정한 속성을 가진 요소를 찾아 스타일을 적용할 수 있다. 메뉴 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

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

column-with - 단의 너비 고정하고 다단 구성하기 한 화면을 여러 단으로 구성할 때 단의 너비를 고정해 놓고 화면을 분할할 수도 있고 단의 개수를 고정해 놓고 화면을 분할할 수도 있다. column-width: | auto 속성 : 단 너비를 직접 지정한다. auto : 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산된다. 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 column-count 속성 - 단의 개수 고정하고 다단 구성하기 다단 화면을 만들 때 단의 개수를 고정해 놓을 수 있다. 단의 개수를 고정하면 브라우저의 너비와 상관없이 단의 개수를 항상 일정하게 유지할 수 있다. column-count: | auto 속성 : 콘텐츠가 들어갈 단의 개수를..

IT/HTML 및 CSS 2021. 5. 3. 18:59

CSS 포지셔닝이란? 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할 지를 결정하는 것이 float 속성과 position 속성이다. 박스 모델의 패딩이나 마진, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 그리고 같은 내용이더라도 어떻게 배치를 하고 어떤 배경과 색상을 사용할 지에 따라 다른 레이아웃으로 만든다. box-sizing 속성 - 박스 너비 기준 정하기 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다. CSS의 width 속성은 콘텐츠 영역의 너비를 나타낸다. 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 한다. box-sizing: content-box | border-box 속성 content-box : width 속성 값을 콘텐츠 영역 너비 값으로..

IT/HTML 및 CSS 2021. 5. 1. 12:22