CSS8 [CSS] 마우스 클릭 금지, 안되게 막기 jquery나 javascript로 막을 수도 있지만 가장 간단하게 css로 막는 방법입니다. 작동안함 2021. 4. 12. [CSS] CSS appearance 체크박스, 라디오 모양 변경 방법 appearance : 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현할 때 사용합니다. 네이티브로 지원되는 모양을 해제하거나 추가할 때 사용합니다. appearance: none; /* 원래 쓰이는 속성을 없앱니다. */ 기본으로 나오는 모양을 없애고 사이즈를 조정해서 화면에 표시시켜준다. 체크박스를 1px로 없애버리고 이미지를 사용해서 체크박스 사용 1. 체크박스를 사라지게 만들기 input[type=checkbox].css-checkbox { overflow: hidden; position: absolute; left: -1000px; width: 1px; height: 1px; } 2. 라벨 태그에 이미지 넣기 input[type=checkbox].css-checkbo.. 2020. 12. 9. [CSS] CSS animation, CSS 선택자 우선순위 계산 CSS Animation : 요소의 현재 스타일을 다른 스타일로 천천히 변화 시킬 수 있습니다. CSS3에서는 @keyframe 규칙을 사용해 애니메이션 효과를 쉽게 적용할 수 있습니다. animation-fill-mode : 애니메이션이 끝난 후 어떻게 처리할지 설정합니다. backwards : 기본설정. 애니메이션의 스타일을 애니메이션이 시작되기 전으로 되돌립니다. forwards : 애니메이션 키프레임이 100% 도달했을 때 마지막 키프레임을 유지합니다. animation-direction : 애니메이션의 진행 방향을 정하는 속성입니다. reverse : 반대 순서로 진행합니다. alternate : 정해진 순서로 진행했다가 다시 반대 순서로 진행합니다. alternate-reverse : 반대 순.. 2020. 12. 8. [CSS] CSS Flex, 2D 새로운 기술들을 파헤쳐보자 ! CSS Flex (플렉서블 레이아웃) 대부분의 웹사이트는 수직 구성이며 "위-아래"로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소들이 대부분 블록개념으로 표시되며 이는 뷰에 수직으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 구성할 수 있습니다. 하지만 수평 구성의 경우는 속성이 명확하지 않기 때문에 이나 float 혹은 inline-block으로 구성했습니다. 따라서 쉽게 수평을 구성할 수 있는 Flex(플렉서블 레이아웃)이 차선책으로 만들어졌습니다. display : flex; flex-wrap 플렉스 라인에 더 이상의 여유가 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지 여부를 설정합니다. nowrap : 기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신 .. 2020. 12. 7. [CSS] CSS 위치, z-index, float, 다단 레이아웃, 미디어쿼리, HTML 시멘틱구조 위치 (position) : 요소의 위치를 결정하는 방식을 설정합니다. 1.정적 위치(static position) 지정방식 HTML 요소의 위치를 결정하는 기본적인 방식입니다. position 속성값이 static으로 설정된 요소는 top, left, right, bottom 속성값에 영향을 받지 않습니다. 정적 위치 지정방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식입니다. 2.상대 위치(relative postion) 지정방식 HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식입니다. HTML 요소의 기본 위치란 정적위치 지정방식일 때 결정되는 위치를 의미합니다. 자신이 원래 놓여야하는 위치로부터 얼마나 떨어지게 할 것인지 지정할 수 있다.( static po.. 2020. 12. 6. [CSS] 박스 모델(box model), 테두리(border), 마진(margin), 박스사이징(box-sizing), 디스플레이(display), 폼(form) 박스 모델 (BOX MODEL) 모든 HTML 요소는 박스 모양으로 구성됩니다. 이것을 박스 모델이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다. 실제로 width와 height는 내용 부분에만 적용된다. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 패딩(padding) : 내용과 테두리 사이의 간격입니다. padding-top : 위 padding-right : 오른쪽 padding-bottom : 아래 padding-left : 왼쪽 padding : 모든 패딩 속성을 한꺼번에 설정합니다. 방향은 상단부터 시작해서 시계방향으로 설정합니다. 안녕하세요. .. 2020. 12. 5. [CSS] 가상클래스, 컬러, 텍스트 속성, 배경 순서에 따른 가상 클래스 CSS 스타일을 주기 위해 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택할 수 있습니다. 김사과 오렌지 이메론 li:first-child : li 요소 중에서 첫번째 해당하는 요소에 CSS를 적용합니다. ex) li:first-child { color : red; } li:last-child : li 요소 중에서 마지막에 해당하는 요소에 CSS를 적용합니다. li:nth-child(n) : li 요소 중에서 n번째 요소에 CSS를 적용합니다. ex) li:nth-child(2) { color: orange; } li:nth-child(odd) : li 요소 중에서 홀수번째 요소에 CSS를 적용합니다. li:nth-child(even) : li 요소 중.. 2020. 12. 5. [CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지) CSS(Cascading Style Sheets) HTML 요소들이 각종 미디어에서 어떻게 보일지를 정의하는데 사용되는 스타일 시트 언어입니다. HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 지정하는데 어려움이 있습니다. 따라서 매우 많은 시간이 걸리며 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들다. 이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다. CSS문법 * 3. 외부 스타일 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 외부에 작성된 스타일 시트 파일은 css확장명을 사용하여 저장합니다. 스타일을 적용할 페이지 CSS 선택자 1. 전체 선택자 ( * ) 스타일을 모두 요소에 적용할 때 사용한다. 전체 선택자는 한.. 2020. 12. 5. 이전 1 다음
