본문 바로가기

부트캠프교육중/CSS14

박스모델기초 #줄바꿈이 되는 박스: block박스 (h1, p, div) 줄바꿈이 일어나지 않고 크기 지정을 할수 없는 박스: inline박스(span) 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 : inline-block 박스 #span요소(inline박스)에서는 width, height 속성이 적용되지 않는다 2022. 12. 22.
[CSS] 절대단위와 상대단위 #절대단위: px, pt등 상대단위: %, em, rem, ch, vw, vh 등 #글꼴 사이즈를 정할때 -절대적인 크기로 정하는경우 px(픽셀) - 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. - 픽셀은 화면의 사이즈가 정해진 경우에 유리하다. -일반적인 경우 상대단위인 rem을 추천한다. (가급적 rem을 우선적으로 쓰도록 권고하고 있다.) - 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게하려면 0.8rem 등으로 조절해서 사용할수 있다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.) #em -부모 엘리먼트에 따라 상대적으로.. 2022. 12. 22.
글자꾸미기 #색상 color :글자색상 (text-color 아니다) background-color: 배경색상 border-color: 테두리색상 # background 와 background-color 차이 background-color 색깔만 지정할수 있는 반면 backgroud는 color이외의 다른 background 옵션들을 지정해 사용할수있다. background는 다양한 background 속성을 부여할수 있는 축약 속성이다. (배경색은 background속성, background-color 속성 모두 지정 가능하다.) #글꼴 font-family 따옴표를 붙여서 적용할수있다 대비책으로 fallback글꼴추가. 표현하고싶은 글꼴이 없거나 사용할수 없는 경우를 위한 대비책 쉼표로 구분한다. #굵기: fo.. 2022. 12. 22.
CSS 사용방법 # CSS파일추가 *css파일을 html 파일에 연결할때는 link태그안에서 href 속성을 통해 파일을 연결한다. *link 요소는 html파일과 다른 파일을 연결하는 목적으로 사용한다. *rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다 css는 stylesheet이므로 rel속성에 stylesheet를 추가한다. *href 속성에는 파일의 위치를 추가 두 파일이 다른 폴더에 존재하는 경우, 절대경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할수 있다. *layout.css는 index.css 파일과는 달리 html요소를 배치하는 역할을 한다. *css스타일을 적용할수있는 방법은 3가지 같은줄에서 스타일을 적용하는 인라인스타일, css파일내에 작성하는 내용을 별도의 파일로 구분하지 않고.. 2022. 12. 22.