javascript
-
[CSS] CSS의 모든 것 - (3)Link, List, Table, Display, Width, Positon, OverflowSTUDY/HTML.CSS.JS 2021. 3. 13. 19:28
CSS Links Lists Tables Layout- Display Property Layout - width and max-width Layout - The position Layout - Overflow CSS Links Link도 CSS 속성으로 스타일을 지정할 수 있다. a : link - 방문하지 않은 일반 링크 a : visited - 방문한 링크 a : hover - 사용자가 링크에 마우스를 올려둘 때 a : active - 클릭하는 순간의 링크 ex) a:link { color: red; } a:visited { color: green; } text-decoration 속성 : 링크의 밑줄을 제거할 때 사용하는 속성 Syntax text-decoration: none; background..
-
[CSS] CSS의 모든 것 - (2) Padding, Height, Width, Box Model, Outline, Text, Fonts, IconsSTUDY/HTML.CSS.JS 2021. 3. 8. 19:31
CSS Padding CSS Height and Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Padding Padding은 테두리안에 정의된 요소의 콘텐츠 주위에 간격(공간)을 만드는데 사용한다. CSS에서 Padding은 네가지 속성이 있다. padding-top padding-right padding-bottom padding-left 속성의 값을 표현하는 방법은 세가지가 있다. length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that ..
-
[CSS] CSS의 모든 것 - (1) CSS, Selector,Background, Border, MarginSTUDY/HTML.CSS.JS 2021. 3. 8. 15:22
CSS CSS Selector How To Add CSS CSS Comments CSS Background CSS Border CSS Margin CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일에 사용하는 언어이다. CSS는 웹 페이지의 디자인 뿐만 아니라 레이아웃, 다양한 스크린 사이즈에 따른 화면에 변화 등을 모두 조절할 수 있다. CSS를 사용하면 HTML만을 사용하는 것보다 훨씬 간편해진다. CSS를 통해 수많은 웹 페이지들의 레이아웃을 한번에 컨트롤 할 수 있기 때문이다. CSS Syntax Selector : 스타일을 적용할 HTML 요소를 가리킨다. Declaration : 하나 이상의 선언이 포함된다. 여러개의 선언들은 세미콜론(;)을 이용해 구분한다. 선언..
-
[HTML] HTML의 모든 것 - (마지막) HTML 스타일와 코딩 가이드STUDY/HTML.CSS.JS 2021. 3. 6. 20:58
1. 항상 Document Type을 명시한다. 2. Element(요소) 이름에는 소문자를 사용한다. HTML은 요소 이름에 대소문자를 모두 허용하기는 한다. 하지만, 대소문자를 혼용해서 사용하는 것은 보기 좋지 않고, 통상적으로 개발자들은 소문자 이름을 사용하고, 소문자가 보기에도 작성하기에도 쉽기에 소문자 사용을 권장한다. 3. 모든 Element를 닫아라. HTML에는 태그와 같이 종료 태그를 필수로 하지 않는 태그들이 있다. 그러나 이런 태그들이라도 종료 태그를 명시하는 것을 권장한다. 4. Attribute(속성) 이름에는 소문자를 사용한다. 태그들의 이름을 소문자로 작성하는 것과 동일한 이유이다. 5. 항상 Attribute(속성)의 Value(값)을 큰 따옴표로 감싼다. HTML에서는 따옴..
-
[HTML] HTML의 모든 것 - (6) Graphics(Canvas, SVG), MultiMedia(video, audio, YouTube)STUDY/HTML.CSS.JS 2021. 3. 6. 20:24
HTML Canvas Graphics HTML SVG Graphics HTML Multimedia HTML API HTML Canvas Graphics HTML의 Canvas 요소는 웹 페이지에 그래픽을 그리는 데 사용된다. 에 대해 더 많이, 자세히 배우고 싶다면 HTML Canvas Tutorial을 참고! HTML Canvas란? 는 JavaScript를 사용하여 즉석에서 그래픽을 그리는 데 사용된다. 는 오직 그래픽만을 위한 컨테이너이다! 그래픽을 실제로 그리기 위해서는 반드시 JavaScript를 이용해야 한다. Canvas는 경로 그리기, 박스, 원, 텍스트와 이미지 추가하기 등의 기능을 가지고 있다. Canvas의 기능을 모두 지원하는 브라우저 버전 Canvas Example Canvas는 ..
-
[HTML] HTML의 모든 것 - (3) class, id, iframes, javascript, file path, layoutSTUDY/HTML.CSS.JS 2021. 3. 4. 14:23
Class Attribute Id Attribute Iframes JavaScript File Paths Head Element Layout Elements and Techniques Responsive Web Design Computer Code Elements Class Attribute - class 속성은 HTML 요소의 class를 특정하는데 사용한다. 여러개의 HTML요소들이 동일한 class를 공유할수 있다. - class 속성은 주로 스타일 시트의 클래스를 가리키는데(구분하는데) 사용된다. 그리고 Javascript에서 동작을 조작하는 요소들을 구분짓기 위해서 class 속성을 사용하기도 한다. - class를 생성하기 위해선 '.'와 클래스의 이름을 입력한다. (ex: .city) 그 다..
-
[Project - 01] 2. 랜덤 좌석 배정 프로그램 : 기본 기능 만들기Project/[Project - 01]랜덤 좌석 배정 프로그램 2021. 1. 22. 17:39
랜덤 좌석 배정 프로그램의 기본 기능은, [좌석 배정] 버튼을 누르면 아래의 책상에 랜덤으로 번호가 배정되는 기능입니다. 전체 코드는 github에서 확인할 수 있습니다. https://github.com/younyikim/RandomSeat ●IDE : Atom 제목 및 table 레이아웃 랜덤 좌석 배정 프로그램 font는 구글 font를 사용하였습니다. 테이블을 책상 배치처럼 보이게 하기 위해, 아래와 같은 css 속성을 지정하여 사용하였습니다. table { width : 90%; border-spacing: 0px 10px; } th, td { border : 1px solid black; text-align : center; font-size : 20px; } Button button은 이곳(..
-
[Project - 01] 0. 랜덤 좌석 배정 프로그램 : README.mdProject/[Project - 01]랜덤 좌석 배정 프로그램 2021. 1. 22. 15:59
README.md 프로젝트 명 : 랜덤 좌석 배정 프로그램 개발 환경 ● Language : HTML , CSS, JAVASCRIPT ● OS : Windows, Mac OS ● IDE : Atom 주요 기능 ● 사용자가 인원을 선택하면 랜덤으로 좌석이 배정됨. (진행중 - 85%) ● 특정 번호가 항상 짝이 될 수 있게 조정할 수 있음. (예정) ● 사람들의 이름이 적힌 엑셀 파일을 올리면, 이를 이용하여 좌석 배정을 할 수 있음.(예정) ● 이전의 좌석 배정 내용을 확인할 수 있음.(예정) ● 이전 좌석에는 앉지 않기 / 이전 짝꿍과는 앉지 않기 (예정) 프로그램 화면 * Github : github.com/younyikim/RandomSeat