Study/Frontend 8

[HTML/CSS] overflow,transition

Q.1 넘쳐나는 내용 무조건 숨김 ? overflow-x:hidden; Q.2 넘친 텍스트 ... 으로 처리 text-overflow:ellipsis; Q.3 절대 줄바꿈 금지 white-space:nowrap; Q.4 필요에 따라 가로 스크롤바 생성 overflow-x:auto; Q.5 필요에 따라 가로 스크롤바 생성 overflow-x:scroll; Q.6 변환옵션을 준다. transition: width 1s, opacity 4s; * width 1s => 너비를 변환하는데 duration(기간)을 1초 동안 천천히 진행하겠습니다. * opacity => 투명도를 변환하는데 duration(기간)을 4초 동안 천천히 진행하겠습니다. Q.7 투명도. opacity:0; * opacity => 투명도(..

Study/Frontend 2020.12.03

HTML <!DOCTYPE> 선언

정의 및 특징 DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 가장 먼저 선언되어야만 한다. 이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다. HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 합니다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시합니다. 하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없습니다. 예제 이 문서는 HTML 문서입니다.

Study/Frontend 2020.12.01

[HTML&CSS] 태그

태 그 내 용 비 고 이미지 삽입 닫는 태그 없음 줄 바꿈 닫는 태그 없음 진하게 표시할 텍스트 볼드 처리 강조할 텍스트 태그를 사용하면 대부분의 브라우저에서는 텍스트를 기울어진 이탤릭체 중요한 텍스트 태그는 대부분의 브라우저에서 ​굵은 글씨로 표시 단순 강조보다 더 중요한 텍스트에 사용 /* 박스의 바깥쪽 여백 */ margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:10px; margin: 10px; /* 위 4줄과 의미가 같다. */ /* 박스의 안쪽 여백 */ padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px; padding:10px; /* ..

Study/Frontend 2020.11.25

[HTML] 태그 정리

HTML 언어의 버전 지정 주석문 BACKGOUND 배경그림 BGCOLOR 배경색 TEXT 기본 글자색(검정) LINK 링크로 연결된 텍스트 색 ALINK 링크로 연결된 부분을 클릭시 색 VLINK 방문했던 링크의 색 BGPROPERTIES ="FIXED" : 배경 이미지 고정 H1 이 가장 큼, H6가 가장 작음 와 같은 크기 와 같은 크기 : 와 같은 크기 기본 텍스트 설정 NAME 글씨체 SIZE 글자 크기, 1이 가장 작음, 7이 가장 큼, 기준값=3 (+,-)를 이용하여 상대적 폰트크기 지정 COLOR 글자색, : 검정색, FACE 글씨체 DIR="RTL" 글자 방향이 오른쪽에서 왼쪽으로 DIR="LTR" 글자 방향이 왼쪽에서 오른쪽으로 문장이 긴 경우, 자동으로 다음 줄에 표시해 주는 것을 막..

Study/Frontend 2020.11.25

[HTML] 요소 정리

HTML : 문서의 범위를 설정한다. : HTML 문서의 정보를 설정한다. : HTML 문서의 구조를 설정한다. 메타데이터 : 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정 : HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정, 한 문서에 하나의 요소만 포함 가능. : 외부 리소스의 연결 및 현재 문서와의 관계를 명시. (HTML, CSS, JCON 등 가져오기) : 기타 메타데이터 요소( , 같은)로 나타낼 수 없는 메타데이터를 나타내기 위해 설정, (검색엔진이나 브라우저에 정보 제공) : 스타일 정보(CSS)를 설정

Study/Frontend 2020.11.24

[JS] 자바스크립트 Math 객체 - Math, abs, ceil, floor, max, min, pow, random, round, sin, sqrt

예제 Math.PI; // returns 3.141592653589793 Try it Yourself » Math.round() Math.round(x) 는 x의 값에서 제일 근접한 정수를 반환합니다. 예제 Math.round(4.7); // returns 5 Math.round(4.4); // returns 4 Try it Yourself » Math.pow() Math.pow(x, y) 는 x의 값을 y의 횟수만큼 제곱한 값을 반환합니다. Example Math.pow(8, 2); // returns 64 Try it Yourself » Math.sqrt() Math.sqrt(x) 는 x의 제곱근 값을 반환합니다. 예제 Math.sqrt(64); // returns 8 Try it Yourself »..

Study/Frontend 2020.10.19