AngeRay

부트스트랩은 트위터의 개발자가 오픈소스로 제공해 주는 HTML, CSS, JS 프레임워크 이다. 부트스트랩은 frontend framwork 라고 불린다. 부트스트랩을 사용시 가장 이점은 그리드 이다.

transition transition CSS properties는 transition-property, transition-duration, transition-timing-function, and transition-delay 가 있다. transition을 사용하면 요소의 두 상태 간의 transition을 정의할 수 있습니다. 다른 상태는 :hover 또는 :active와 같은 pseudo-classes를 사용하여 정의하거나 JavaScript를 사용하여 동적으로 설정할 수 있습니다. Constituent properties transition-delay : - transition-delay CSS 속성은 value가 변경될 때 속성의 transition 효과를 시작하기 전에 대기할 기간을 지정합..

text-styling 텍스트 색(color 라는 property 사용) 텍스트에 색깔을 설정하는 방법 색을 지정해주는 방법이 몇 가지가 있다. 1. 색이름을 지정해준다. 모든 색이 있지는 않지만 브라우저에서 140개의 색을 지원한다. 2. RGB값을 작성한다. 모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있다. 이 표현 방식이 바로 'RGB'이다. 3. HEX값(16진법) HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식이다. 몇 가지 텍스트 스타일링 텍스트의 굶기를 정하는 font-weight. - 100 부터 900 까지의 값들을 가질 수 있다. (100이 가장 얇고, 900이 가장 굵다.) - font-weight : normal 이 400과 같다(de..

도움이 되는 사이트 웹 개발에 유용한 사이트 당연히 google 이다. 구글링을 통해서 HTML, CSS에 대한 정보를 쉽게 찾을 수 있다. W3Schools : https://www.w3schools.com/ W3Schools Online Web Tutorials HTML Example: This is a heading This is a paragraph. Try it Yourself CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: cente www.w3schools.com stackoverflow : https://stackoverflow.com/ Stack Overflow - Where Develope..

크롬 개발자 도구 크롬 개발자 도구 내가 원하는 요소(element)를 우클릭 후 검사를 클릭하면 해당 요소가 선택된다. 또는 F12를 누른다. user agent stylesheet 는 브라우저에서 각 요소마다 정해주는 스타일 이다. 생각해보면 폰트크기, 폰트굵기도 설정해 준 적이 없는데 h1~h6는 스타일을 가지고 있다. CSS 파일에서 직접 스타일을 적어주면 user agent stylesheet에 있던 스타일은 지워져서 나온다. 이건 쓰이지 않았다는 의미이다. 왜냐면 CSS파일에서 덮어썼기 때문이다. 구체적인 property를 우선순위로 설정한다. Computed 탭은 computed는 한국말로 계산되었단 뜻인데, 실제로 해당 요소에 입혀진 스타일들만 쭉 정리되어 있다. 그리고 따로 설정하지 않은..

코멘트 코멘트 웹 사이트에 아무런 영향을 주지 않는다. 왜냐면 브라우저가 무시해 버린다. 그렇다면 코멘트를 도데체 왜 쓰는 것일까? 코멘트는 일종의 노트 같은 건데, 코드가 많아도 코멘트를 써놓으면 한눈에 알 수 있다. 실제로 코드가 길로 복잡할수록 코멘트는 빚을 바란다. 코멘트를 적절히 사용해서 잘 정돈된 코드를 작성한다. HTML comment CSS comment /* */ JS comment // Python comment # 코멘트는 자주 쓰이는 것이기에 보통 단축키가 있다. 내가 사용하는 visual studio code에서는 ctrl + / 이다.

Document and website structure In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure. Ba..

CSS 파일 연결과 스타일을 적용하는 다양한 방법 프로그래밍을 할 때 반복적인 코드는 되도록 피하는 것이 좋다. 반복적인 코드 작성을 피하기 위해 CSS를 style 태그안에 작성하는 것이 아닌 CSS 파일을 만든다. 우선 CSS 파일들을 모아 놓을 수 있는 폴더를 하나 만든다. CSS 폴더 안에 CSS파일명.css 으로 작성한다. 확장자는 .css 이다. HTML 파일과 CSS 파일을 연결시켜 주려면 태그를 사용해야 한다. 태그는 태그 안에 작성한다. href 속성은 연결시켜 줄 파일의 주소를 써준다. rel(relationship) 속성은 이 페이지와 이 파일과의 관계를 알려준다. 즉 CSS 파일은 HTML 페이지의 stylesheet 이다. 스타일을 적용하는 다양한 방법 HTML 코드에 스타일을 입..

div 태그 div 태그 요소들을 묶을 수 있는 HTML 요소가 div 태그 이다. 묶어주고 싶은 요소들을 div 태그로 감싸면 된다. div 태그는 요소들을 묶어주는 거 외에는 딱히 기능이 없다. 기능이 없는 대신에 굉장히 유연하고 다양한 방식으로 쓰이기 때문에 계속 사용하면서 연습을 해야 한다. 딱히 기능이 없는 태그 이기때문에 원래 여백을 가지고 있지 않다. block level element 이며 item을 감싸는 box 역할을 한다.

클래스(class) 와 아이디(id) HTML 요소에게 '이름'을 주는 방법은 두 가지가 있다. 클래스(classs) 아이디(id) 클래스(class) class 이름을 사용해서 태그를 스타일링을 할 수 있다. class는 일종의 이름과 같은 역할을 한다. CSS에서 스타일링을 할때, class 이름이란 걸 표시하기 위해서 점(.)을 쓰고 class 이름을 쓰면 된다. class를 사용하면 여러 요소들에게 같은 스타일을 입힐 수 도 있고 한 요소에 다양한 스타일을 동시에 입힐 수 있다. 클래스를 잘 활용할 줄 알아야 한다. 아이디(id) id를 통해서 스타일링을 해 줄 수 있다. CSS에서 스타일링을 할때, id 라는것을 표시하기 위해서 샵(#)을 붙힌다. 클래스와는 무슨 차이가 있을까? 클래스(clas..