모든 것의 기록

1. 배경css에선 요소에  배경을 깔 수 있다.근데 이제 box-sizing의 속성에 따라 배경이 적용되는 범위가 달라진다. 속성설명content-box컨텐츠의 범위까지 적용border-box보더의 범위까지 적용padding-box패딩의 범위까지 적용  보통은 border-box로 많이 주는데,border 포함해 기준으로 삼으면 선 두께를 주더라도 두께의 외곽선까지가 박스 사이즈이기 때문에,박스 사이즈를 예측하기 쉽기 때문이다.그래서 보통 기본값으로 border-box를 준다. 그리고 배경에 줄 수 있는 다양한 속성들이 있는데 해당 내용들을 살펴보자 background속성설명css 작성 시clip배경이 적용되는 기준을 정해줌background-clip: border-box;image배경에 이미지를 넣을..

오늘은 수업 내용을 쭉 정리하면서 css관련한 글을 써보려고 한다  1. html과 css 연결 하는 방법  link라는 태그를 사용해서 html과 css를 연결해준다.이때 rel라는 속성은 relation의 약자로 관계를 뜻한다.href라는 속성은 hyper reference의 약자로 하이퍼 참조를 뜻한다. link를 쓸때는 반드시 하이퍼 링크를 걸어주고 꼭 작성되는 문서와 하이퍼 링크간의 관계를 적어주어야 한다.    2.  선택자html과 css는 여러 선택자가 있다.css은 스타일 속성이 하나의 요소에 대해 겹쳐지는 경우가 있을 때, 기본적으로 나중에 쓰여진 스타일이 적용된다.그러나 우선순위에 따라 적용이 달라진다.선택자 우선순위 : 쓰여진 순서와 관계 없이 적용 되는 순위선택자html 작성시 c..

회원가입 페이지 만들기···.새로운 css 개념이 있어서 어려웠다!예전에 배웠을때는 float 개념으로 했었는데, 이젠 display:flex; 로 사용한다고 한다.확실히 float 보다는 쉬운 것 같다.그럼 오늘은 다른 css 개념보다도 display:flex에 대해 집중적으로 정리하도록 하겠다.  1. display 옵션display 속성은 웹 페이지 내의 요소가 어떻게 보여지는지, 레이아웃 박스의 유형을 결정하는 중요한 속성이다.이 속성은 요소가 문서 흐름에 어떻게 포함될 지, 다른 요소들과 어떻게 상호 작용할 지를 정의한다.display 속성에는 여러값이 있다. 속성설명적용 예시none화면에서 보이지 않게 해준다 요소가 차지하는 공간 조차 없애버린다 ( 렌더링 할 때 제외됨 )display : n..