front-end/html&css19 [IE8 대응] opacity 대응방법 / border-radius 대응방법 IE8까지 지원해야 하는 경우 기존에 아무생각없이 되리라 생각하고 사용하던 CSS를 사용할 수 없는 경우가 발생한다. opacity 같은 경우가 그렇다. IE8에서는 opacity를 사용할 수 없다. 이게 뭔 소리냐... 혹시 내가 사용하는 CSS 클래스가 해당 브라우저에서 사용이 가능한지 알고 싶다면 다음 사이트에서 확인할 수 있다. Can I use... Support tables for HTML5, CSS3, etc Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on deskt.. 2020. 4. 3. [css] 사이즈 단위 px, rem, em, vh, vw 차이 (반응형 화면 제작에 유용) CSS를 공부하다 보면 사이즈가 하나가 아니라는 것을 알게 됩니다. 포토샵 좀 써보신 분이라면 가장 기본이 되는 px 단위에 대해서는 대충 알고 계시겠지만, 오늘은 이 CSS의 자주 쓰이는 단위에 대해 제대로 정리해 보고자 합니다. PX 가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다. em em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다. .parent{ font-size:12px } .child{ font-size:1.2em } 다음과 같이 부모 요소를 12px로 정의했을 .. 2020. 3. 20. [html] form 태그에 대해 알아보자 / POST와 GET 차이 태그는 웹 페이지에서의입력 양식을 말한다. 로그인 창이나, 회원가입 폼 등이 바로 태그를 사용하고 있습니다. 이 태그는 입력된 데이터를 한 번에 서버로 전송합니다. 백엔드를 공부하시는 분들도 이 태그에 대해서는 자세히 알아두는 것이 좋습니다. 폼 태그의 기본적인 구성은 다음과 같습니다. First name: Last name: 여기서 을 구성하는 요소들을 하나씩 살펴보도록 하겠습니다. action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 name : 폼을 식별하기 위한 이름 method : 서버에 전송할 http 메소드 (GET 또는 POST) input의 type : 입력받을 요소의 종류를 정한다. number, text, password 등. 반드시 맞는 것으로 입력해 둘 것! label : 폼.. 2020. 2. 15. [HTML/CSS] display 속성 알아보기 (display:none과 visibility:hidden 차이) display는 요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성으로, 기본적으로 네가지가 있습니다. 최신 웹에선 flex나 grid와 같은 새롭고 편리한 속성들이 등장하지만 브라우저 호환도가 떨어지는 등의 이슈가 있어, 나중에 다루도록 하겠습니다. display : block display : inline-block display : inline display : none display : block 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지합니다. width 또는 height 지정을 통해 가로 세로폭을 조절할 수 있습니다. 태그가 기본적으로 block을 기본 display 설정으로 갖습니다. 아래 그림의 배경이 빨갛게 된 부분은 영역으로 기본적으로 display .. 2020. 2. 11. [css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element) 가상 선택자CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다. 선택자:가상클래스 { property: value; } 앵커 가상 클래스앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄.. 2020. 1. 31. [css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기 자식 요소가 float일 때 자식 요소가 float 되어 있으면 (말 그대로 자식 요소가 떠 있는 상태이기 때문에) 부모 요소(상위 요소)의 height가 0이 될 수 있다. 이 때 주요 해결방법은 두가지이다. 사실 첫번째 방법으로 어지간하면 해결 가능. 부모 요소에 overflow:hidden .parent{ overflow: hidden; /* 또는 overflow: auto; */ } 부모 요소의 가상 선택자에 clear:both .parent::after { content: ""; display: block; clear: both; } 자식 요소가 position : absolute 일 때 부모 요소와 자식 요소의 크기가 같아야 하는데 자식 요소가 position:absolute 일 때 (예를들어.. 2020. 1. 30. [html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 HTML5 : Canvas canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다. 먼저 html 문서에 다음과 같이 를 삽입한다. 위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다. const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다. beginPath(); 도형을 그리기 전에 지정해줌 closePath() : 도형의 .. 2020. 1. 23. [CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 css는 아무리 해도 어렵다.... 반응형 박스 만들기 화면크기에 따라 가진 네모 박스는 만들기 쉽다. 일정 고정값을 가진 박스를 만들면 된다. PC 화면에서는 이렇게 만드는 게 낫지만, 반응형 웹이나 모바일 UI를 제작할 때는 디바이스 크기에 따라 콘텐츠 크기가 조절되어야 한다. .square { width: 100px; height: 100px; } 비율(%)에 맞춰서, 만약 다음처럼 작업을 한다면 어떻게 될까? 이럴 경우 상하-좌우 크기가 모두 변할 때는 정사각형 모양이 깨지지 않겠지만, 좌우 또는 상하만 변할 때는 모양이 찌그러지게 된다. 이것을 헤결하기 위한 방법은 무엇일까? .square { width: 50%; height: 50%; } 해결 width :100%만 준 후 다음과 같이 가상 .. 2020. 1. 22. [html] form 태그 공부 FORM Tag HTML에서의 입력 양식 action 폼을 전송할 서버 쪽 스크립트 파일 저장 name 폼을 식별하기 위한 이름 지정 accept-charset 폼 전송에 사용할 문자 인코딩 지정 target action에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정 ex)_blank method 폼을 서버에 전송할 메소드를 정함 get 이나 post get과 post 방식의 차이 폼을 구성하는 엘리먼트 fieldset : 폼 태그 안에 관련있는 폼 엘리먼트를 그룹화 할 때 사용. legend 태그를 하위에 사용하여 그룹화 한 폼을 목적에 맞게 이름을 지정할 수 있다. 개인 정보 입력 이름 : 나이 : 개인 정보 입력 이름 : 나이 : tag 속성 type : 태그 모양을 다양하게 변경할 수 있습.. 2019. 8. 18. 이전 1 2 3 다음
