2.15 css 기본

font-weight 굵기

text-decoration 밑줄, 가로줄

letter-weight 글자 굵기

letter-spacing 자간

line-height 행간

 

폰트 크기단위

• 절대 단위: px,pt
• 상대 단위: %,em,rem,ch,vw,vh

vw = viewport width, 1vw 는 보이는 영역 너비의 1/100

vh = viewport height, 1vh 는 보이는 영역 높이의 1/100

 

inline 박스의 대표적인 예는 <span> 요소다. / <h1>, <p> 요소는 줄바꿈이 가능하다.

inline 박스는 줄바꿈이 일어나지 않는다.

inline 박스는 block 박스와 달리 width, height 속성 사용 불가능하다. 크기 지정이 불가능하다.

inline 박스의 너비는 콘텐츠가 차지하는 너비로 결정하게 됩니다.

 

block 박스는 줄 바꿈이 가능하다.

block 박스는 크기 지정을 할 수 있다.

 

inline-block 박스는 줄바꿈이 일어나지 않고, block 박스의 특성을 갖고 있다.

 

주의! 메모임으로 알아보지 못할 수 있음

 

Px 절대단위를 요즘 잘안씀

반응형 웹페이지를 하려면 폰트가 상대적이어야 하기때문

Rem 상대단위는 이거 많이씀

 

투명도0.1~0.9 로 조절가능

 

컬러익스텐션

컬리픽커 구글 확장자깔기

 

박스에 높이랑 줄간격을 설정하는 라인하이트랑 같은 값을 주면 가운데 정렬하개됨

 

Box-shadow

Margin-border-pedding

시계방향 상우하좌

주로 사용해야하는것 border box

 

Css 여백초기화 *{}

 

버튼

보더 레디우스 border-radius

네모난 거 모서리 둥글게 만들때 씀

원이 필요하면 50~100% 주면 동그라미됨

 

color-hover 색 바뀜

 

내일 과제 계산기 목업

페어과제 각각 하나씩 만들기

똑같아도 어쩔수없지만 각각하는게 더 좋음

Css 적용 공유 목적

 

-

 

예상대로 css 이해에 시간이 걸렸다.

그동안 줌 강의랑 노트북으로 보는 텍스트 강의에 적응을 못하고 있었는데

오늘부터 점점 감이 잡히는 것 같다.

노트북으로 코드 직접 작성하고 

인터넷 학습자료 텍스트로 된것은 아이패드가 답이었던것

미러링 하면 더 편할거 같긴한데 일단은 노트처럼 쓰고있음

 

어제 학습이 밀린 html  심화 부분하다가 login 창 실습에서 

어이없는 이유로 한시간이상 지체됨ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

진짜 너무 안되서 미쳐버리는 줄 알았는데

처음엔 오탄가 싶어서 실습화면이랑 학습화면 열심히 봐도 틀린게 없고

샌드박스에서 안되서 정말 미쳐 버리는 줄 알았다 

몇번이나 재시작도함ㅠㅠㅠㅠ

근데 링크 따라간 페이지가 편집용 페이지가 아니라서 허무하게 샌드박스 로그인하고 해결됨

정말 허탈하고 에너지 쓸때없는데 써서 속상하고ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

구글링으로 태그 그대로 따라해서 검색도 해봤는데 안나와서 대체 이게 뭘까 상태였음

 

그래도 해결 완

 

내일 페어 과제하는데 넘 두렵당..! 더 열심히 할걸 

css 다른분들 보면 매끄럽게 과제 잘하셨던데 나도 그렇게 하고싶다! 노력해야지!