익명의 개발노트

CSS에 애니메이션 사용하기 위해서는 animation 속성을 이용해야한다. animation 속성의 하위 속성이 있는데, 아래와 같다. animation-delay : element가 load 되고 나서 언제 애니메이션이 시작될지 지정합니다. animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다. animation-name : 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙..

위 글씨처럼 웹폰트를 적용하는 방법. 1. 구글 폰트 검색 2. 원하는 폰트 옆에 + 버튼을 누른다. 3. +버튼을 누르면 밑에 그림처럼 밑에 검정색으로 bula bula~ Selected 표시가 있다. 그걸 클릭. 4. 클릭하면 아래 그림과 같이 나타난다. 5. 여기서 CUSTOM에서 원하는 항목을 체크하고 EMBED 항목으로 와서 STANDARD, @IMPORT 중 하나를 적용하면 된다. 6. 원하는 글씨 필요한 곳에 맨 아래 부분 붙여넣기하면 반영완료.

selector 표현할때 주의사항. 표현은 한번에 하나씩만 해주어야한다. input 창과 textarea 창이 있으면, 각각 input : hover { } , textarea:hover { } 로 줘야함. input, textarea:hover { } 로 주면 input은 그냥 첨부터 먹혀버림. 효과는 textarea만 받게 된다. 주의 할 것!!

block 요소는 한 줄을 다 차지하는 요소로써 옆에 다른 태그들이 올 수 없다. 종류 : , , , , , , 등 block요소도 css에서 스타일을 주면 inline 요소처럼 사용할 수 있다.( display, float 등이 있다) inline 요소는 block요소와 반대되는 요소로, 같은 inline 요소들끼리는 옆에 올 수 있다. 종류 : , , 등

#title { font-family: Georgia, "Times New Roman", Times, serif; } => font-family 는 폰트 글씨형태를 지정해줄 수 있으며, 3개를 쓰면 앞에서부터 해당 브라우져에서 폰트를 지원하지 않으면 다음 폰트, 이런식으로 넘어가게 사용함. 폰트에 ""(따옴표)를 붙이는 이유는 폰트가 띄어쓰기가 있을 경우에 따옴표를 사용한다 indent : css로 들여쓰기 할 수 있게 해준다. .js-description { text-indent: 50px; } blockquote : html 태그로 긴 인용문 같은 것을 사용할 때 쓸 수 있음, 기본적으로 들여쓰기가 된 상태로 랜더링된다. : 기본적으로 이코드는 스페이스를 의미함. 사이사이에 글자를 띄우고 싶은 경우 ..

z-index 웹 페이지가 다이나믹 해지고 요소들의 배치가 자유로워지면서, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련임. 이때 어느 것을 위에 표시할 것인가를 제어해주는 속성이 이것임. 파워포인트를 예를 들면 겹쳤을때 , 가장 위로, 가장 아래로 이런거랑 같다. 특징 1) z-index값을 사용하려면 해당요소의 position값이 relative, absolute, fixed 중 하나여야 한다. 2) position이 지정되지 않았다면, z-index값은 0인 것 처럼 작동한다. 숫자가 클수록 위로 올라온다. 3) z-index의 값은 같은 depth의 요소(형제요소, siblings) 끼리 비교하는 것이 원칙임. 4) z-index의 기본값은 auto이며, 부모의 z-index값이 auto인 경..

정렬 방법 1. float : 기본적으로 띄워지게 만드는 속성임. 블록요소를 가로로 나란히 정렬하기 위해 사용. 일단 이걸쓰면 더는 width가 100%가 아니다. 단점은 부모태그가 float 속성의 자식 태그를 인식하지 못함. 해결하려면 overflow: auto나 overflow: hidden 를 줘야함. 블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움)float는 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨.블록 요소는 기본적으로 float을 인식하지 못함. 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함.float된 요소를 부모 요소..

1. static : 모든 태그들의 기본. 디폴드 값이 static이라 따로 써주지 않아도 됨. 2. relative : 태그 위치 변경하고 싶을때 position : relative 사용. top, right, bottom, left 속성 사용 할 수 있음. 각각의 방향을 기준으로 태그 안쪽방향으로 이동하기 때문에 바깥쪽으로 이동하게 하려면 -값을 줘야 하는 특징이 있음. static 상태를 기준으로 주어진 값만 큼 움직임. top, left, right, bottom 속성이 있어야 움직임. 3. absolute : position : static 속성을 가지고 있지 않은 parents를 기준으로 움직인다. 부모 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(b..

레이아웃 & 박스모델 1. margin : 다른 태그와의 거리를 나타냄. 2. border : 테두리이며, 가장 기준임. 3. padding : border와 content사이의 간격 4. content : 보통 태그가 차지하는 영역 이 중에서 기준은 border가 된다. 5. box-sizing : 너비를 직접 일일이 계산하고 싶지 않을때 사용. * padding과 margin은 width에 포함되지 않는다.( box-sizing: border-box 이면 margin만 미포함)

HTML 컨텐츠 관련 Tag 1. : 웹 브라우져를 열때 이부분은 표시가 안됨. 사용자에게 안보이는 부분임. 2. : 실질적인 html 을 작성하는 부분 3. : css를 html에 적용시키고자 할때 사용 4. : 실행가능한 코드를 문서에 포함시키거나 참조하기 위한 것. 5. : 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그. 6. vs : 영역을 설정할 때 사용함. 1) 차이점 : div는 줄바꿈이 되지만 span은 옆으로 붙어버림, 텍스트 표현시 div는 사각형 박스로 구역을 정하지만, span은 문장단위로 지정이 됨. div은 폭, 넓이 지정 가능하지만, span은 지정 불가. ※ table 태그대신 div와 span이용해서 간결한 표 만들 수 있음. 7. : 문서를 연결하는 Tag, 앵커..