본문 바로가기

전체 글

 (32)
2022-10-21 box-sizing[새싹 프론트엔드] Di it 한권으로 끝내는 웹표준의 정석 box-sizing: border-box 란? - 요소의 적용된 padding, border 를 내가 정한 width와 height에 포함유무를 정해주는 속성 (margin은 바깥여백이므로 box크기에 영향받지않는다.) 예를들어 width,height가 100px인 박스 모델을 만들고 싶고 border: 10px, padding: 10px을 주고싶다고 가정할때 해당 박스모델의 크기는 100px이 아니라 140px이 된다 왜냐하면 border와 padding값이 width, height값에 포함이 되었기 때문이다 . 이것이 박스모델의 기본적인 속성이다. 이때 border와 padding을 포함한 100px의 박스모델을 만들고 싶을때 사용하는 속성이 box-sizin..
2022-10-20[새싹 프론트엔드] 강의정리 2022- 강의 내용 css 배경속성 background 단축속성 box 속성 display 속성 visibility 속성 box-shadow 속성 background 단축속성 background: color, image, position/size, repeat 순으로 값 지정 background: skyblue url (“apple.jpg") center /100px repeat y; display: none, visible: hidden 속성 display: none 본인의 자리 자체를 숨기기 자신의 자리를 아예 없애버려 다른 컨텐츠들이 인지하지못함 visible: hidden 본인의 모습은 숨기지만 자리는 남음 자신의 모습은 숨기지만 자리는 남아있음 이 경우 컨텐츠들이 인지함 box-shadow t..
2022-10-19 [새싹 프론트엔드] 강의정리 2022-10-19 강의 내용 키워드 단위 크기단위 색상단위 url 단위 font-size 속성 font-family 속성 기타속성 크기단위 단위 적용되는 기준 % 16px 기준 em 해당태그의 부모를 기준으로 배수로 커진다 (예시 1-1) rem ( root) 16 px 기준 예시 1-1 안녕하세요01 안녕하세요02 안녕하세요03 ​ px, %, em, rem 모든 폰드 사이즈는 자식요소에 상속되어 적용 된다 %,em,rem은 가변성을 가지고 있지만 그 기준이 "부모" 이기때문에 화면에 따라 크기가 변하진 않는다. 1. px: 픽셀단위의 절대값 고정된 크기 장치에 따라 크기 조절 불가 2. %: 부모요소의 상대적 크기 부모의 크기가 상속되어 커진다 (em도 마찬가지) 100% = 1em, 80%=0.8..

티스토리툴바