반응형 Web/CSS16 CSS 글자속성 글자 속성 글자의 스타일을 지정 📢 들어가기 전 살펴봐야 할 것 더보기 상속이라는 개념을 잡고 가야 될 거 같아서 정리합니다. 상속이란?? 부모요소의 스타일을 자식요소에 전달되는 것을 의미합니다. 부모와 자식관계를 통해 속성값의 상속이 가능하게 된다. 속성값은 부모로 부터 자식으로 전달된다 상속을 받고 싶지 않을 때는 자식요소에 따로 직접 스타일일 지정하면된다. 하지만 모든 속성들이 상속되는건 아니다. font-size 글자의 크기를 설정 font-family 글꼴을 설정 font-weight 글자의 두꼐를 설정 font-style 글자의 기울기를 설정 font-variant 대소문자에 대한 설정 line-height 줄 간격을 설정 1. font-size 글자의 크기를 설정하는 스타일 보통 px와 같은.. 2021. 6. 11. CSS 배경속성 Background 속성 태그의 배경을 지정하는 속성 ↓ 세부적인 속성 background-color 배경 색 background-image 배경 이미지 background-size 배경 이미지 사이즈 background-repeat 배경 이미지 반복 여부 background-position 배경 이미지 위치 background-attachment 배경 이미지 고정 방식 backgound 세부적인 속성을 한번에 1. background-color 배경색을 의미 표현방식 : rgb(), rgba(),16진수(color속성)의 포맷을 사용 주의할 점! 태그의 크기가 없는 경우에는 배경색이 표시되지 않는다 예제 backgroun-color : pink 200px의 정사각형 backgroun-color : bl.. 2021. 4. 22. box모델 - margin, border, padding, content box모델 ★ 중요한 Point ★ 요소의 크기 의미하는 부분이라는 것은 노랑색상자부터 빨강색 상자까지를 의미한다. 이말은 즉!! 요소의 전체 크기 → margin + border + padding + content But? width와 height가 적용되는 부분은 content영역만 의미 (margin, padding, border 부분은 포함X) Problem! content의 크기로만 맞추면 배치시키기도 어렵고 테두리가 있는 경에는 테두리의 두께로 인해서 원하는 크기를 찾기 어려움 Solution ▶ box-sizing : border-box box-sizing이란? 박스의 크기를 화면에 표시하는 방식을 변경하는 속성 이 값을 border-box로 지정하게 되면 contetn영역 뿐만 아니라 bo.. 2021. 3. 4. CSS 가시 속성 가시 속성 태그를 화면에 보이게 하는 형태를 설정 📢 들어가기 전 살펴봐야 할 것 더보기 가시 속성 세 가지의 첫 번째 display 이전 글에서 dispaly에 대한 내용을 자세히 설명했으니 참고하시길!! https://chpofo.tistory.com/36 공간차지요소(display 속성) display 속성 요소를 어떤 방식으로 표시를 할 건지 결정하는 속성 📢 들어가기전 살펴봐야 할 것 더보기 요소가 두가지 형식으로 나누어지는데 1. block 형식 차곡차곡 쌓아 올려지는 형식 언 chpofo.tistory.com display를 제외하고 두 가지를 추가로 설명하겠습니다. 1. visibiliy 속성 기본값 : visible hidden : 요소의 크기(영역)는 유지하고 화면에서만 보이지 않게 한.. 2021. 2. 26. 이전 1 2 3 4 다음 반응형
