AngeRay

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

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 + / 이다.

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..

px 과 % px(픽셀) HTML에서 무언가의 크기를 설정할 때는 기본적으로 픽셀 단위를 사용한다. 픽셀은 화면을 구성하는 기본 단위 이다. 어떤 이미지의 일부를 확대해서 보면 작은 정사각형 단위로 되어 있다. 각 정사각형을 픽셀이라고 부른다. 만약 어떤 이미지의 가로 길이가 100px로 설정되어 있다면, 가로로 저 작은 정사각형이 100개가 있다는 의미이다. 폰트크기도 픽셀로 설정하는 경우가 많다. 만약 폰트 크기가 24px로 설정되어 있다면 폰트의 세로 길이가 24px 이라는 뜻이다. %(퍼센트) 길이를 픽셀 말고 퍼센트로 설정할 수도 있다. 퍼센트로 크기 설정 시 부모태그를 기준으로 정한다.

태그 태그 이미지를 넣기 위해서는 태그를 사용하면 된다. img 태그는 불러오기 위한 용도 이기 때문에 meta 태그 처럼 시작 태그는 있지만 종료 태그가 없다. 이미지는 확장자를 잘 생각하고 삽입해야 한다. 비트맵은 웹에서 사용불가 하다. 이미지는 외부에서(인터넷) 가져올 수 도있고, 내부 파일에 다운받아서 가져올 수 도 있다. 외부에서 가져올 시 이미지 주소 복사를 클릭 후 가져온다. 이미지 삽입 시 자동 왼쪽 정렬 되어 있다. 이미지를 가운데 정렬하는 방법 img { display: block; margin: 0 auto; } 태그의 속성 src : 사진이 있는 주소 입력 alt : 이미지가 뜨지 않았을 시 에 대체할 대체텍스트를 반드시 입력해주어야 한다. width : width 라는 속성을 써서..