STUDY/HTML.CSS.JS
-
[CSS] CSS의 모든 것 - (4) Float,Combinator, Navigation Bar, DropdownSTUDY/HTML.CSS.JS 2021. 3. 14. 19:06
CSS Float CSS Layout - float and clear float 속성은 웹 페이지에서 이미지를 어떻게 뜨워 텍스트와 함께 배치할 것인지 지정하는 속성이다. float 속성이 가질 수 있는 값은, left : 왼쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 오른쪽에 위치하고, 위에서 아래로 내용이 흐른다. right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하고, 역시 위에서 아래로 내용이 흐른다. none : Default. 요소들이 부유하지 않는다. inherit : 부모 요소에서 상속 E.g. img { float: none;} CSS Layout - clear and clearfix clear 속성은 부유시킨 이후의 문서의 흐름을 제거하기 위..
-
[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의 모든 것 - (5) FormSTUDY/HTML.CSS.JS 2021. 3. 5. 15:39
Element Form Attirbute Input Attributes Form Attribute Form은 HTML에서 사용자의 입력을 처리할때 사용된다. 입력들은 처리를 위해 대부분 서버로 전송된다! Element 태그는 HTML 에서 사용자의 입력을 위한 양식을 만들때 사용한다. 태그는 텍스트, 체크박스, 라디오 버튼, 제출 버튼 등 다양한 입력 태그들을 내부에 포함한다. 1. HTML에서 input 태그는 가장 많이 사용되는 form이다. input 태그는 속성에 따라 다양한 방식으로 표현될 수 있다. Displays a single-line text input field Displays a radio button (for selecting one of many choices) Displays a..
-
[HTML] HTML의 모든 것 - (4)Semantic element, Encoding, URL, HTML vs XHTMLSTUDY/HTML.CSS.JS 2021. 3. 5. 12:52
Semantic Elements HTML Encoding (Character Sets) HTML URL(Uniform Resource Locators) HTML vs XHTML Semantic Elements Semantic 요소는 의미가 있는 요소를 말한다. Semantic 요소는 브라우저와 개발자 모두에게 명확하게 의미를 묘사하는 element이다. Semantic 요소들을 사용해야하는 이유는, Semantic 웹을 사용하면 어플리케이션이나 기업, 커뮤니티간 데이터를 공유하고 재사용할 수 있게 해주기 때문이다. Non -Semantic 요소의 예는 , 등이다. 이 태그만 보고서는 아무런 정보를 얻을 수 없다. Semantic 요소는 ,, 등이 있다. 이러한 태그들은 태그의 이름만 보고 어떤 태그들인지..