괴발개발 224

CSS_반응형 페이지

더보기 화면크기에 따라서 페이지의 구성을 다르게 표현하는 페이지를 반응형이라고 함 해당 화면 크기일 때, 안에 있는 CSS를 적용 : - 생김새: @media 화면크기{ 선택자{속성들;} } - 생김새 해설 : @midea[미디어타입 and] 화면크기{ 선택자{속성들;} } - 미디어타입 - all : 모든 장치(기본값) - print : 프린터에 사용 - screen : PC, 태블릿, 스마트에 사용 - speech : 스크린리더기가 페이지를 읽는데 사용 - 화면크기 - (min-width : 값) : 값(ex:600px) 이상 - (max-width : 값) : 값(ex:600px) 미만 - @media를 이용하여 반응형으로 만들 때 배치 순서가 중요 min-width:600px => 최소 600너비..

CSS_display, visibility, flex

더보기 - display - block - inline - inline-block - none : 요소를 안보이게 함. 요소의 위치를 없앰 - flex : float과 비슷한 효과 - visibility : 요소를 보여줄지 말지를 결정하는 속성 - hidden : 요소를 안보이게 함. 요소의 위치는 그대로 내버려둠. - flex : flex-grow, flex-shrink, flex-basis를 한번에 쓰는 속성 - flex-grow : 자식요소가 작아서 공간이 남을 때 어떻게 처리할지를 설정 - 0 : 기본값 - 1 : 모든 자식 요소들이 1이면 크기가 같음 - 양수 : 숫자가 커질수록 - flew-shrink : 자식요소가 커서 공간이 부족할 때 어떻게 처리할지를 설정 - 0 : 기본값 - 1 : 모..

CSS_다단(column-span모름)

더보기 - column-count : 다단 갯수 - column-gap : 단과 단 사이에 여백 - column-rule : 단 선 모양 - column-span : h태그가 포함되면 해당 부분에 단을 해제할지 말지를 결정하는 속성 - column-width : 한 단의 너비 도시어부3과 강철부대가 만났다 채널A 콘텐츠 유니버스 '도시어부3'와 '강철부대'의 만남은 방송 전부터 큰 화제를 모은 바 있다. 이날 방송에서는 양 팀의 불꽃 튀는 첫 만남이 흥미진진하게 펼쳐지며 앞으로 벌어질 낚시 대결에 대한 궁금증을 한껏 끌어올렸다. 첫 등장한 박군은 형님들을 무장해제 시키는 밝은 미소와 찐 리액션으로 현장을 접수했다. 흥겨운 트로트 가락으로 춤사위를 보이는가 하면 황충원과 함께 애교 넘치는 손가락 하트를 연..

CSS_길이(max-width/height, min-width/height)

더보기 - width : 가로, 폭, height :세로, 길이 - min-width/min-height : (예: minimum 700px) - 가로/세로의 최소 길이를 설정 - 브라우저가 작으면 700px, 크면 100% - max-width/mas-height : (예: maximum 700px) - 가로/세로의 최대 길이를 설정 - 브라우저의 가로/세로의 길이가 max-width/max-height보다 작으면 브라우저의 가로/세로의 길이에 맞춰 설정됨 => 브라우저가 작으면 100%, 크면 700px

CSS_애니메이션 효과

더보기 -애니메이션 등록 @keyframs 애니메이션명{ 시간비율{속성1; 값1; 속성2; 값2;} //이전 시점에서 시간 비율까지 적용할 속성 시간비율{속성1; 값1; 속성2; 값2;} } - 애니메이션을 호출 선택자{ animation-name : 애니메이션명; animation-duration : 시간; // %로 쓸수있음 animation-iteration-count : 애니메이션반복횟수; //반복횟수는 숫자 or infinite } 꽝 호버