CSS 4

CSS, JS 수정된 파일이 브라우저에 적용이 안될 때

자바스크립트나 css 파일이 수정 후 적용이 안되는 이유는, 브라우저에서 캐시메모리가 저장되어있어서 수정되기 전의 캐시 메모리를 사용하기 때문이다. 2가지 방법이 있다. 1. js,css 링크에 버전관리를 추가 간단하게 js,css 파일을 불러오는 링크 후면 부에 ?ver=1 이런 식 으로 버전관리를 함으로써 브라우저가 새로운 js파일로 인식하게 한다. static 파일 링크를 가져왔다면 똑같이 그 뒤에 작성하면 된다. ver 뒤에 숫자는 아무거나 상관없다. 2. Ctrl + F5 새로고침할 때 캐시까지 새로고침하는 방법이다 이게 제일 간편한 것 같다.

JavaScript/JS TIL 2021.08.17

[FLEXBOX FROGGY] CSS 개구리 게임 3(14~20)

14단계 - 아이템 요소 개개인 순서 지정 order : flex 요소의 순서를 지정 order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다. 15 단계 - order 음수 16단계 align-self : 지정된 "align-items"값을 무시하고 flex요소를 세로선 상에서 정렬합니다. 17단계 18단계 flex-wrap : flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다. nowrap: 모든 요소들을 한 줄에 정렬합니다. wrap: 요소들을 여러 줄에 걸쳐 정렬합니다. wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다. 19단계 flex-direction : 정렬한 방향을 지정합니다. 20단계 flex-flow : flex-direction 과 flex-wrap ..

html-css 2021.08.09

[FLEXBOX FROGGY] CSS 개구리 게임 1 (1~7)

1단계 - 오른쪽 정렬 justify-content : flex요소들을 가로선 상에서 정렬 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. (default) flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 2단계 - 가운데 정렬 3단계 - flex 주위 간격 설정 4단계 - 요소 간격 5단계 - 세로 정렬 align-items : flex 요소를 세로선 상에서 정렬 flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center:..

html-css 2021.08.09

[Html/CSS] html,CSS 초간단 기초 문법 1 (인라인,블럭 태그 / 리스트 태그 / Css 선택자(부모,자식 선택자) / border)

HTML 1. Inline/Block 태그 차이점 1) 블럭 태그 (div) 블럭태그는 한줄 전체를 사용(블럭단위) 2) 인라인 태그 (span) 인라인 태그는 요소의 부분만 사용 ( 옆에 공간이 있으면 이어서 위치) div1 div1 div1 span1 span2 span3 2. 목록, 리스트 태그 ul 태그 ul태그는 순서가 없는 리스트 태그입니다. 요소에 속하는 각 아이템은 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다. 아메리카노 카페라떼 핫초코 차 녹차 홍차 자스민차 ul 태그 점 없애기 리스트로 구역을 나누고 싶지만, 리스트가 아닌척 하고 싶을 때, 저 점을 없애면 됩니다. css - list 스타일 바..

html-css 2021.08.06
반응형