just studying

오늘의 키포인트

css

나의 이해

HTML : 웹페이지 구조 담당
CSS : 시각적인 디자인 요소 담당

JS : 단순한 웹페이지를 상호작용

문법 및 중요

css를 불러 올떄

body 태그내부의 맨 마지막 줄, </body>. 왜냐하면 구조를 다 잡고나서 기능을 붙여줘야하니까 (따로 검색)

 

css기능 넣는 3가지 방법

  1. css불러오기

  2. html 같은 줄에서 선언하기

  3. html 바로 다음줄에 style로 선언.  이것도 검색

 

색상// 속성 color
color : #000000// 글자 색상
background-color #~~~~// 배경색상
border-color : #~~~~// 테두리 색상

폰트//속성 font
font-style : 기울기 등 스타일// nomal : 기본, italic : 기울기
font-weight : 글 두께// 100~900 사이
font-variant : 글꼴 변형 (소문자->대문자)
font-size : 글 크기
letter-spacing : 자간
line-height : 행간
text-decoration : 밑줄 등 // underline : 밑줄, line-though : 가운데 줄
font-family : 글꼴

글꼴/// 속성 font-family
font-family: “a”, “b”;// a글꼴이 없으면 b글꼴 사용

크기// 속성 font-size
font-size: 24px
절대 단위 : px, pt
상대 단위 : %, em, rem, ch, vw, vh
1.환경에 영향 안받는 절대 크기. 인쇄같은곳에 써먹음 px

  1. 일반적인 경우 rem. 브라우저의 기본크기 1rem
  2. 반응형 웹. 디바이스의 너비에 따라 유동적. 디바이스 크기는 px로 정함
  3. 화면 너비나 높이에 따른 상대적 크기 : vw, vh.  ex)100vw

정렬
text-align// left, right, center, justify

 

박스
blcok : 줄바꿈이 되고 크기 지정 가능 // ex) <div>, <p>
inline : 줄바꿈, 크기 지정 불가능. // ex)
 inline box에 display : inline-block; 을 추가하면 자체 크기를 가짐
inline-block : 줄바꿈 안되지만 크기 지정 가능

하나의 박스를 구성하는 요소 범위 큰 순서대로

margin
border
padding
content

margin : 10px 20px 30px 40px; // 바깥여백 위 오른쪽 아래 왼쪽 순
boreder : 1px solid red ;// 테투리 / 각 영역이 차지하는 크기 파악 용이

padding : margin과 동일 // 안쪽 여백

박스를 벗어나는 컨텐츠는 overflow : auto 같은 속성을 부여하면 스크롤이 생김

박스 너비 편하게 잡기

안에 <div = "in">이 있을때 #out {   width : 300px;   padding 10px   border : 2px solid red; } #inner{   width : 300px;   padding 10px   border : 2px solid red; } 이면 out의 너비는 324px (300+10+10+2+2)  in의 너비는 324(300px의 100%인 300+10+10+2) 그런데 이런식이면 박스 크기 계산하기 복잡하니까 css에 \*{box-sizing : border-box;}  //\*은 모든 요소를 선택하는 셀렉터 html문서 전체에 적용됨 를 넣으면 여백과 테두리를 포함한 크기로 계산이 되더 편함 즉, content-box는 content의 너비가 기준이라 padding, border의 너비를 따로 계산해야함 border-box는 모든걸 포함한것을 너비로 잡음 ----------------------------- 글자 바꾸기 ex) document.querySelector(".클래스 이름").textContent="어쩌고"; 이러면 어쩌고로 바뀜 ---------------------------- 화면 크기에 따라 이미지 크기 바꾸기 body {   width: 100%;   height : 100vh;   background-image: url('./data/bono.jpeg');   background-repeat: no-repeat;   background-size: cover;   background-position: center; }  ------------------------   css flexbox를 이용해서 절대크기 안줘도 부모영역 안에 빈자리 없이 정렬시키기 부모에 display: flex; 자식에 flex: 1; //선언하면 됨   justify-content: space-evenly;  빈곳있어도 정렬 같음.   align-items: center;  //위 아래 정렬 같음 justify-content: flex-start;/\* 이 줄과 아래 줄 검색\*/   align-items: center;

참고