css 기초 정리

업다운게임.html

0.02MB

css 수업  내용 정리

유용한 VS 익스텐션

Live Server Preview

vs코드 우측에 바로 live server 실행됨

CSS기초

전체선택자 (*)
타입선택자	h1{             color: red;         }         h2{             color: yellow;         }...
아이디 선택자와 클래스선택자	특정 요소(태그)에 디자인 주고 싶을 때 사용
아이디 선택자(#)	큼직큼직하게, 어지간해선 1번만 사용 <style> #apple{             color: red;         }</style>
클래스선택자(.)	<style> .text{             font-size: 100px;         }     </style> 세부적인 값들, 하나의 태그에 여러개의 클래스를 줄 수 있음
계층 선택자	위치를 기준으로 디자인 적용 (html의 tree 구조를 이용)
자손 선택자	띄어쓰기로 자손을 표시함 (자기 밑 트리 전체에 적용됨)
자식 선택자	꺾쇠 사용 (>) (자기 자식만 적용됨)
근접후행 선택자	"+" 기호 사용 p 바로 옆에 오는 span 태그에 적용
후행 선택자	"~"기호 사용 p와 같은 형제 span은 전부 스타일 적용
그룹 선택자	여러 요소 한번에 묶음 ,로 구분
반응 선택자	h1:hover {} : 마우스를 올렸을 때 적용 h1:active {} : 클릭했을 때 적용

Hello World!

css 파일 적용	<style>에서 썼던 문구들을 style.css 파일을 만든 후 적용.
인라인 스타일 방식
스타일 중첩	가장 가까운 것 먼저 적용
스타일 중첩 점수 계산
display: inline;	줄바꿈 하는 태그들 속성 변경
display: inline-block;	너비를 줄 수있음 (기본적으로 <img>태그가 갖고 있는 속성)
display: block;	줄바꿈 하는 속성
display: none;	화면표시X

박스모델 구조
margin	개체 주변으로 여백을 줌  margin: 100px; (전체 100px 여백) margin: 100px 500px; (위 아래 100px 여백, 양옆 500px 여백) margin: 10px 10px 10px (top / right, left / bottom; 세개 주는 경우가 있나) margin: 100px 200px 300px 400px; (위 우 아래 좌) margin-left / margin-right / margin-top / margin-bottom: 걍 하나하나 정해주는게 일반적으로 보기 편할 듯
padding	개체 안쪽으로 여백을 줌 안쪽 여백이 생긴만큼 개체 크기는 커진다. 크기 안 커지게 하려면 ? => box-sizing: border-box; padding-top / padding-bottom / padding-top / padding-left (margin과 사용법 동일)
border	테두리 설정  border : 10px solid red;             border-radius: 20px; /* 둥글게 */             border-radius: 100px; /* 더 둥글게 */ (solid / outset / inset / double / dashed / ridge)
position	position : 특정 위치로 고정시키고 싶을 때, 요소를 겹쳐서 배치 가능 position: relative; (현재 위치 기준) bottom: 30px; left: 100px;
position: absolute;	position: absolute; 왼쪽위(0,0)으로부터 절대좌표 기준 잡고                               그만큼 이동하는 것 position: absolute;             top: 30px;             left: 100px;
position: fixed;	스크롤 내려도 고정 position: fixed;             top: 0px;             right: 0px;
float	떠다니게 바꿔줌 float: left;
clear: both;	이전 float 속성 지워서 새로 시작할 수 있게 해줌
카카오 오븐	목업 도구

 

오버플로우
overflow: hidden;	overflow: visible; (기본값) overflow: hidden;
overflow: scroll;	overflow: scroll; overflow: auto; (오버플로우 발생시만 스크롤 생김)
<pre>	이 안에서 엔터 치면 자동으로 줄바꿈해줌.