반응형 웹다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 재배치하며 반응하는 웹문서뷰포트현재 화면에 보여지고 있는 영역. 죽여 마땅한 사람들 - 피터 스완슨미디어 쿼리미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)미디어 타입과 조건에 대한 쿼리로 구성된다. 플렉스박스행 또는 열을 주축으로 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식이다. 플렉스 컨테이너 생성은 display 속성을 이용한다.display플렉스 컨테이너 지정flex: 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.inlne-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다. 콜드플레이 내한 셋리 Higher Pow..

transform: 요소의 크기나 위치를 바꿈. x축과 y축 기준translate(x, y): 지정한 크기만큼 x축, y축으로 이동scale(x, y): 지정한 크기만큼 x축, y축으로 확대 및 축소skew(x, y): 지정한 크기만큼 x축, y축으로 왜곡rotate(x, y): 지정한 각도만큼 회전 transition: 요소에 저장된 스타일을 다른 스타일로 변화. 변화하는 시간이나 속도 등을 추가할 수 있어 애니메이션 효과를 만들 수 있음transition-property: 변화 대상 속성 지정transition-duration: 변화 진행 시간 지정transition-delay: 변화 시작 전 지연 시간 지정transition-time-fun..

연결 선택자하위 선택자 (공백): 부모 요소에 포함된 모든 하위 요소 선택자식 선택자 (>): 하위 선택자와 달리 자식 요소만 선택인접 형제 선택자 (+): 형제 요소 중 첫 번째 동생 요소만 선택형제 선택자 (~): 모든 형제 요소 선택속성 선택자해당 속성이 있는 요소 선택[속성]: 해당 속성이 있는 요소[속성 = 값]: 지정한 속성값이 있는 요소[속성 ~= 값]: 지정한 속성값이 포함된 요소(단어별)[속성 |= 값]: 지정한 속성값이 포함된 요소{하이픈 포함, 단어별)[속성 ^= 값]: 지정한 속성값으로 시작하는 요소[속성 ^= 값]: 지정한 속성값으로 끝나는 요소[속성 ^= 값]: 지정한 속성값을 포함하는 요소a[href] { ... } // href 속성이 있는 a 요소a[target = _bla..

배경backgound-color: 배경색 지정backgound-clip: 배경색의 적용 범위 조절border-box: 가장 외곽인 테두리까지 적용. 기본값padding-box: 테두리를 뺀 패딩 범위까지 적용content-box: 콘텐츠 부분에만 적용backgound-image: 배경 이미지 삽입background-image: url('이미지 파일 경로'); div { width: 350px; height: 350px; border: 1px solid #000; background-image: url('./img/profile.jfif'); }backgound-size: 배경 이미지 크기 조절backgound-repeat: 배경 이미지 반복 방법 설정 ..

박스 모델 구성콘텐츠 영역(content)패딩(padding): 박스와 콘텐츠 영역 사이의 여백테두리(border)마진(margin): 박스 모델 사이의 여백width, height 속성콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다.px이나 em 단위로 값을 지정하거나, 백분율(%)로 부모 요소를 기준으로 지정할 수 있다. 콘텐츠 영역 크기 설정하기border테두리의 두께, 모양, 색상 등을 한번에 지정한다.하위 속성으로 개별적으로 적용할 수도 있다.border-style: 테두리의 스타일을 지정. solid(실선), dotted(점선), double(이중선) 등border-width: 테두리의 두께 지정border-color: 테두리의 색상 지정border..

CSS(Cascading StyleSheet)css는 스타일을 정의하는 문서이다. HTML 문서에 스타일을 추가한다.css는 다수의 스타일 선언문으로 구성된다.선택자 { 속성명1: 속성값1; 속성명2: 속성값2;}/* 주석 */CSS 적용 방법1. 인라인 스타일: 스타일 시트를 사용하지 않고 요소에 직접적으로 스타일을 정의. style 속성 사용 인라인 스타일2. 내부 스타일 시트: 웹 문서 내에 스타일을 정리. 인라인 스타일3. 외부 스타일 시트: 스타일을 별도 파일로 저장하여 웹 문서에 연결. 태그 사용 인라인 스타일/* main.css */p { color: red;}선택자선택자는 웹 문서에서 스타일을 적용할 부분을 선택한다.전체 선택자(*)문서의 모든 요소에 스타일 적용* { .....