Front-End/HTML + CSS15 [CSS] 마우스 클릭 금지, 안되게 막기 jquery나 javascript로 막을 수도 있지만 가장 간단하게 css로 막는 방법입니다. 작동안함 2021. 4. 12. [HTML] onclick 링크 (현재페이지/새창/팝업/프레임) 1. 현재페이지에 부를때 button 2. 새 창에 열때 button 3. 팝업으로 열기 (주소,팝업창이름,옵션) button 4. 상위 프레임에 부를때 button 5. 프레임 지정 링크 button 2021. 1. 1. [HTML] div 태그 대신 li 태그를 사용하는 이유 웹페이지를 코딩하다 보면 div태그가 매우 많을 것을 볼 수 있을 것이다. 항목을 나열하기 위해서 div태그를 많이 사용하는데, 최근 대기업이나 잘나가는 스타트업들의 홈페이지를 들어가보면 div 태그 대신 ul-li태그를 이용하여 항목을 나열해놓은 사이트들을 볼 수 있다. 왜? 태그가 아니라 태그를 사용한 걸까? 예전에는 (아마도 여전히) 각 브라우저가 공백, 여백 등과 같은 요소를 나열하는 데 고유한 작은 서식을 추가했기 때문에 많은 사람들이 div를 사용하는 것을 선호합니다. 아무도 서식을 없애거나 브라우저를 감지하기 위해 많은 코드를 추가하기를 원하지 않기 때문입니다. 허나 요즘은 웹의 중요성이 올라갔습니다. 전가기기들의 기술들이 올라가면서 웹을 사용하는 사람들이 굉장히 많아졌죠. 이 말은 즉슨 장.. 2020. 12. 18. [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. 이전 1 2 다음
