dongil's tistory

CSS 2D transform 2차원 좌표에서 요쇼를 변형시키는 속성 이동, 확대, 축소, 회전, 경사등을 만들 수 있음 transform: 이동 rotate: 회전 scale: 확대, 축소 skew: 경사 ✔ 벤더 프리픽스(vender prefix) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사 - W3C CSS 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙이는 접두사 - -webkt-: 크롬, 엣지를 위한 접두사 - -o-: 오페라를 위한 접두사 - -ms-: 익스플로러를 위한 접두사 - -moz-: 파이어폭스를 위한 접두사 - 해당 속성이 적용되지 않았을 경..

CSS 2022. 12. 16. 09:54

다단 레이아웃 - 텍스트를 column 속성으로 다단을 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 - column-count: 단의 갯수를 설정 - column-rule:: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 - column-gap: 단과 단사이의 여백을 설정 - column-span: 단과 안의 포함된 요소를 다단편집에서 해제 Flex 레이아웃 - css3에 새롭게 추가되었음 - display: flex flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowarp: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 warp-reve..

CSS 2022. 12. 15. 09:54

박스 모델(Box Model) - 모든 HTML 요소는 박스모양으로 구성 - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 패딩(padding) - 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 20px 20px 20px 20px 안녕하세요 div#padding { padding: 20px 50px 30px 10px; } 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px div#padding { padding: 20px 50px 30px; } 위,아래 20px, 오른쪽,왼쪽 50px div#pa..

CSS 2022. 12. 14. 09:54

id 선택자 웹 문서안의 특정 부분 스타일을 적용. #기호를 사용해서 id 속성을 가진 요소에 스타일을 적용 h2 { font-size: 30px; } #hello { color: deeppink; } /* h2#hello { font-size: 30px; color: deeppink; } */ 안녕하세요 반갑습니다 class 선택자 특정 집단의 요소를 한번에 스타일을 적용. (.) 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용 .hello { font-size: 20px; color: deeppink; } h2.hello { font-weight: bold; } 안녕하세요 // 20px, deeppink, bold 반갑습니다 하이 // 20px, deeppink; 또 만났군요 그룹 ..

CSS 2022. 12. 13. 08:53

CSS (Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 DOCTYPE html> 내부스타일 h2 { font-size: 50px; } /* h2 요소의 사이즈를 50px로 설정 */ p { font-size: 25px; } ul { list-style: none; } li { color: deeppink; font-weight: bold; display: inline-block; margin-right:30px;} 내부스타일 CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경 ..

CSS 2022. 11. 20. 10:00