코딩하는 감자

https://wccoding.tistory.com/m/91 [DEV] 웹 서버 업로드 오류웹 페이지를 개발할 때 나는 index파일이 html인 파일만 가지고 개발을 했었다. html 파일은 css나 js파일을 수정하면서 웹 브라우저에서 열어서 쉽게 수정본을 확인할 수 있다. 하지만 내가 맡은 홈www.danieldevel.info 웹 페이지를 개발할 때, 나는 주로 HTML 파일을 사용하여 개발을 진행했다. HTML 파일은 CSS나 JS 파일을 수정하면서 웹 브라우저에서 쉽게 열어 볼 수 있어, 수정 사항을 바로 확인할 수 있다는 장점이 있다. 그러나 이번에 내가 맡은 프로젝트에서 문제가 발생했다. 웹 서버에 파일을 업로드했는데, 변경 사항이 반영되지 않는 오류가 생긴 것이다.  오류의 원인을 찾기 ..

perspective : 하위 요소를 관찰하는 원근 거리를 지정(*함수가 아닌 속성) perspective 속성과 함수의 차이점 -속성 perspective: 600px 관찰 대상의 부모에 적용 기준점 설정 : perspective-origin -함수 transform: perspective(600px) 관찰 대상에 적용 기준점 설정 : transform-origin backface-visibility : 3D변환으로 회전된 요소의 뒷면 숨김 여부 visible(기본값) : 뒷면 보임 hidden : 뒷면 숨김 transform: rotateY(180deg); backface-visibility: hidden; -> 뒷면(180도로 뒤집어진 부분)이 보이지 않게 됨

transform : 요소의 변환 효과 transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; 개별 속성들 2D(2차원)변환 함수 translate(x,y) : 이동(x축,y축) translateX(x) : 이동(x축) translateY(y) : 이동(y축) scale(x,y) : 크기(x축, y축) scaleX(x) : 크기(x축) scaleY(y) : 크기(y축) rotate(degree) : 회전(각도) skew(x,y) : 기울임(x축, y축) skewX(x) : 기울임(x축) skewY(y) : 기울임(y축) matrix(n,n,n,n,n,n) : 2차원 변환 효과 3D(3차원)변환 함수 translateZ(z) : 이동(z축) tran..

transiton : 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 transition: 속성명 지속시간(필수속성) 타이밍함수 대기시간; 개별 속성들 transition-property : 전환 효과를 사용할 속성 이름을 지정 all(기본값) : 모든 속성이 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 transition-duration : 전환 효과의 지속시간을 지정 0s(기본값) : 전환 효과 없음 시간 : 지속시간(s)을 지정 transition-timing-function : 전환 효과의 타이밍(Easing) 함수를 지정 ease(기본값) : 느리게 - 빠르게 - 느리게 linear : 일정하게 ease-in : 느리게 - 빠르게 ease-out : 빠르게 - 느리게 ease-in-o..

order : Flex Item 의 순서 0(기본값) : 순서 없음 숫자 : 숫자가 작을수록 먼저 order: -1; > order: 0; > order: 2; > order: 17; flex-grow : Flex Item의 증가 너비 비율 0(기본값) : 증가 비율 없음 숫자 : 증가 비율 flex-grow: 1; flex-grow: 2; flex-grow: 1; -> 1대 2대 1 비율로 너비 증가 flex-shrink : Flex Item의 감소 너비 비율 1(기본값) : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 *감소 비율을 0으로 입력하면 감소되지 않음 기본값이 1인 Item들은 컨테이너가 줄어들 때 같이 줄어들지만 flex-shrink: 0; 일 때의 Item..

flex-wrap : Flex Items 묶음(줄 바꿈) 여부 nowrap(기본값) : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 *대부분의 경우에는 flex를 사용하여 수평 정렬을 한다. justift-content : 주 축의 정렬 방법 flex-start(기본값) : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 centet : Flex Items를 가운데 정렬 space-between : 각 Flex Items 사이를 균등하게 정렬 space-around : 각 Flex Items의 외부 여백을 균등하게 정렬 display: flex; justify-content: flex-end; ->..

display : Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 Flex Container : flex가 부여된 요소 Flex Items : flex가 부여된 요소의 자식 요소 Flex 속성을 부여할 때 Container와 Items에 부여하는 속성이 각각 다르게 구성되어 있다. Flex Container 에 부여할 수 있는 속성 display flex-flow, flex-direction, flex-wrap justify-content align-content align-items Flex Items 에 부여할 수 있는 속성 order flex, flex-g..

z-index : 요소의 쌓임 정도를 지정 auto(기본값) : 부모 요소와 동일한 쌓임 정도 숫자 : 숫자가 높을수록 위에 쌓임(음수 가능) *z-index를 사용할 때 값을 999와 같이 큰 값은 사용하지 않는 것이 좋다 position 값이 없는 조건에서는 있는 값과 다른 z-index 위치를 갖는다. 요소의 display가 변경됨 position 속성 값으로 absolute, fixed가 지정된 요소는, display 속성이 block 요소로 자동으로 변경됨 display: block; position: absolute; top 30px; left: 30px; z-index: 1; position: absolute; top: 30px; left: 30px; z-index: 1; 따라서 위의 값와 ..

positon : 요소의 위치 지정 기준 static(기본값) : 기준 없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준(위치 상 부모 요소를 꼭 확인해야 함) fixed : 뷰포트(브라우저)를 기준 sticky : 스크롤 영역 기준 *position과 같이 사용하는 css 속성들(모두 음수를 사용할 수 있음) - top, bottom, left, right, z-index top, bottom, left, right : 요소의 각 방향별 거리 지정 auto(기본값) : 브라우저가 계산 단위 : px, em, rem 등 단위로 지정 - ex) 원래 자신의 위치를 기준으로 상30px, 좌30px position: relative; top : 30px left : 30..

background-color : 요소의 배경 색상 transparent(기본값) : 투명함 색상 : 지정 가능한 색상 background-image : 요소의 배경 이미지 삽입 none(기본값) : 이미지 없음 url("경로") : 이미지 경로 * 배경 색은 배경 이미지보다 뒤로간다. background-repeat : 요소의 배경 이미지 반복 repeat(기본값) : 이미지를 수직, 수평 반복 repeat-x : 이미지를 수평 반복 repeat-y : 이미지를 수직 반복 no-repeat : 반복 없음 background-position : 요소의 배경 이미지 위치 0% 0% (기본값) : 0% ~ 100% 사이 값 방향 : top, bottom, left, right, center 방향 단위 : p..

color : 글자의 색상 rgb(0,0,0)(기본값) : 검정색 색상 : 기타 지정 가능한 색상 text-align : 문자의 정렬 방식 left(기본값) : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데정렬 text-decoration : 문자의 장식(선) none(기본값) : 장식 없음 underline : 밑줄 overline : 윗줄 line-through : 중앙선 text-indent : 문자 첫 줄의 들여쓰기 0(기본값) : 들여쓰기 없음 단위 : px, em, rem 등으로 단위 지정

font-style : 글자의 기울기 normal(기본값) : 기울기 없음 italic : 이텔릭체 font-weigjt : 글자의 두께(가중치) normal(기본값) : 400 기본두께 bold, 700 : 두껍게 100~900 : 100단위 숫자 9개, normal과 bold이외 font-size : 글자의 크기 16px(기본값) : 기본 크기 단위 : px, em, rem 등의 단위로 지정 line-height : 한 줄의 높이, 행간과 유사 normal(기본값) : 브라우저의 기본 정의를 사용 숫자 : 요소의 글꼴 크기의 배수로 지정 단위 : px, em, rem 등의 단위로 지정 % : 요소의 글꼴 크기의 비율로 지정 font-family : 글꼴 서체 지정 글꼴1, "글꼴2", ... 글꼴 계..

가상 클래스 선택자 (Pseudo-Classes) Hover : 선택자 x 요소에 마우스 커서가 올라가 있는 동안 선택 .x { width: 100px; height: 10px; background-color: orange; transition 1s; (자연스러운 변경) } x:hover { width: 300px; } active : 선택자 x 요소에 마우스를 클릭하고 있는 동안 선택 x:active { } focus : 선택자 x요소가 포커스 되면 선택(포커스가 가능한 요소만 적용가능 ex. input select 등 , html에서 포커스 하고자 하는 요소에 tabindex="-1"을 넣어주면 포커스가 가능하다. ) x:focus{ } first-child : 선택자 x가 형제 요소 중 첫째라면 선..