728x90 반응형 Coding With Jina/CSS17 [CSS] vertical-align 수직정렬 vertical-align inline 요소와 inline-block 요소를 수직정렬할때 사용 파란색 박스와 노란색 박스가 빨간색 박스 밑으로 수직정렬을 하고 싶을때 사용하면 이렇게 수직 정렬이 된다! 단, 파란색과 노란색 박스 둘 다에게 적용해야함 .box { display: inline-block; height: 100%; vertical-align: top; } 2020. 5. 14. [CSS] Position & Display position : static || fixed || relative || absolute static - default 값 fixed - 고정(스크롤을 내려도 따라내려옴) relative - 상대배치 - 부모 element에 적용 - 자식 element에 absolute를 설정해주면 부모 element안에 자식 element이 위치하게 됨 absolute - 절대배치 - 자식 element에 적용 - 포지션 relative에 상대적으로 포지션을 잡는 것 - 부모 element 에 relative가 설정되어 있지 않으면 absolute로 설정된 element는 body에 맞춰 포지션됨 display : inline || block || inline-block || none inline - 다른 css 요.. 2020. 5. 14. [CSS] Box Model 쉬운 정리 Box Model padding : 20px 15px; 상하 → 20px 좌우 → 15px padding : 10px 20px 40px 12px; 상 → 10px 우 → 20px 하 → 40px 좌 → 12px (시계방향) 2020. 5. 14. [CSS] 기본 속성 1) CSS 속성 1.1 색 - 이름(red,green) - RGB(255,0,0) - 16진수(#ff0000) 관련사이트 https://colorhunt.co/ https://www.design-seeds.com/ 1.2 배경(background-color) 1.3 backgroung-repeat - 기본설정은 repeat - repeat-x 수평반복 - repeat-y 수직반복 - no-repeat 반복안함 1.4 background-position - 클래스지정 후에 backgroung-position을 통해 이동 - (x축,y축) 1.5 background-attachment 배경 이미지를 스크롤에 따라 움직이는지 아닌지 설정 *스크롤 입장에서 생각할 것 fixed : 스크롤 움직일때마다 같이 움.. 2020. 5. 8. [CSS] 기본 개념 CSS는 2가지 분류로 나뉜다 ① selector 파트 : html에 작성해둔 elemet를 지정함 ex) h1, div, class-name, id-name ② property 파트 : property-name:value;로 css style을 지정 ex) backgroung-color : red; Cascading Style Sheets 구조화된 문서를 어떻게 나타낼 것인가를 정의하는 시트언어 1) CSS 문법 선택자{선언블록안에 선언-> 속성명: 속성값;} 2) 주석처리 /* 주석주석 */ * HTML에서서는 이걸로 함 3) css 종류 적용 순위 : 스타일 시트는 가장 후단에 오는 순서로 적용 : 인라인>내부 >외부 ? 그럼 적용순위? - 인라인 스타일(임베디드방식) : 태그 안에 style을 넣.. 2020. 5. 7. 이전 1 2 3 다음 728x90 반응형
