Category: CSS

2019
0
Front-endCSS

Void elements do not have end tags "hr"

에러 메시지12Error: Template parse errors:Void elements do not have end tags "hr" 문제 원인 hr태그는 여는 태그만 존재하는데,열고 닫는 태그를 각각 써줬기 때문에 에러가 발생했다. 해결 방법12<hr /><!-- <hr></hr>는 잘못된

0
Front-endCSS

가로줄 넣기(hr태그)

hr 태그는 기본적으로 border값이 매겨져 있으므로초기화를 먼저 해준다. 1border: 0; width: 수평선의 크기(가로 길이) 비율(%) | 숫자값(px) height : 수평선의 굵기 text-align: 선의 위치 left | center | right(default: center) background-color 또는 backgr

0
Front-endCSS

CSS 레이아웃 핵심속성 position

position 속성position 속성 중에 relative, absolute가 거의 90%의 비율로 사용된다. position: relative; position: relative;는현재 이미지를 기준으로 변화를 주겠다는 의미이다. relative는 주위 환경에 영향을 끼치지 않으면서위치를 조정한다. position: absolute; 부모에 rela

0
Front-endCSS

CSS 레이아웃 핵심속성 float

1교시float로 가로배치 하기가로배치는 소박한 꿈이다.그러나 공식적으로 지원되는 게 없다.float도 가로 배치를 위한 속성이 아니다. 공식적인 방법이 아닌 방식으로 가로배치를 하려고 하기 때문에문제가 발생한다. 박스가 위로 떠있어야만이 그 박스 주위로 Dummy Text들이 그 주위로 흐른다.(같은 선상에 있지 않아야 한다.) float의 목적은 이미지

0
Front-endCSS

CSS 박스모델

1일차1교시123.wing { 색상: 빨강;} 웹사이트는 .html이라는 확장자를 가진 파일이 실행된다. https://www.naver.com에 접속하면, 실제로는 index.html파일이 실행되는 것이다. https://www.naver.com/index.html Ctrl + + / Ctrl + -로 화면을 확대, 축소를 할

0
Front-endCSS

CSS 배경(Background)

CSS 배경(Background)에 대해 알아봅시다. 본 포스팅은 < 패스트캠퍼스 야무 강사님의 프론트엔드 개발 시작하기 CAMP > 강의 내용을 정리한 것임을 알려드립니다. CSS 배경(Background) 스타일링Background Design 요소의 배경(background)은 요소의 content-box, border-box 아래에

0
Front-endCSS

CSS 타이포그래피(Typography)

CSS 타이포그래피(Typography)에 대해 알아봅시다. 본 포스팅은 < 패스트캠퍼스 야무 강사님의 프론트엔드 개발 시작하기 CAMP > 강의 내용을 정리한 것임을 알려드립니다. CSS 타이포그래피(Typography)폰트(Fonts) 스타일 속성 폰트에 영향을 주는 속성으로 적용되는 모양, 크기, 굵기, 기울임 등. font-fam

0
Front-endCSS

CSS 상속(Inheritance)과 케스케이드(Cascade)

CSS 상속(Inheritance)과 케스케이드(Cascade)에 대해 알아봅시다. 본 포스팅은 < 패스트캠퍼스 야무 강사님의 프론트엔드 개발 시작하기 CAMP > 강의 내용을 정리한 것임을 알려드립니다. CSS 상속 (Inheritance)상속되는 속성 (글자색, 글자 디자인에 관련된 것) color: 글자 색상 (배경색은 상속되지 X)

0
Front-endCSS

CSS 선택자(Selectors)

CSS 선택자(Selectors)에 대해 알아봅시다. 본 포스팅은 < 패스트캠퍼스 야무 강사님의 프론트엔드 개발 시작하기 CAMP강의 내용을 정리한 것임을 알려드립니다. 선택자는 CSS뿐만 아니라 자바스크립트에서도 유용하게 사용될 수 있다. CSS는 HTML 요소를 선택하는데 있어 다양한 선택자 옵션을 제공한다. selector(대상)