오늘이라도

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - 앵커 태그에 패딩을 줘야 클릭 범위가 넓어진다.

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - height를 주지 않아도 알아서 늘어난다. - 패딩 조절, width 조절할 때 크롬 콘솔로 몇을 줘야 좋은지 미리 확인해 볼 수 있다. - 중간 border 겹치는 부분 제거 방법 ① margin-left: -1px ② 한쪽 변 색을 흰색으로 바꾼 후 색이 비어있는 변 칸만 색 지정하기 - 태그 안에 로 외부 css 파일을 불러올 수 있다. - Linear-gradient(색1 n%, 색2 n%)로 간단한 그러데이션을 줄 수 있다. - animation 속성 · animation-name : 애니메이션 이름 · animation-duration : 재생 시간 · anim..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - https://image-map.net Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net - 위 사이트에서 보다 쉽게 이미지맵을 만들 수 있다. - float: left, right로 좌 우측으로 일렬로 세울 수 있다. - 이미지에 float 속성을 줌으로써 주위에 글자를 배치할 수 있다. - https://www.colorzi..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - 기본값, top, left는 의미가 없고 위치를 지정하지 않을 때와 같다. - 다른 태그와의 관계에 의해 자동으로 위에서 아래로 배치 - relative는 위 태그의 마지막 지점 다음 줄을 시작점으로 갖는 속성이다. 즉, 새 줄에서 시작한다. - relative가 static이 끝나는 지점에서 시작하는 것을 알 수 있다. - absolute는 body의 margin에 영향을 받기 때문에 relative가 위치를 잡기 조금 더 편할 수 있다. - z-index는 깊이 값이며 높을수록 위로 올라온다. - usemap 속성과 coords 속성을 이용한 imagemap을 통해 원하..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - hr 태그에 background-color로 hr 색을 지정할 수 있다. - height는 hr의 굵기를 결정한다. - border: 0px로 hr태그가 두 줄로 나오지 않게 한다. - position: absolute를 주면 브라우저 시작점(0, 0)을 기준으로 절대 좌표로 위치를 지정할 수 있다. - 하위 태그에 absolute 속성을 사용하려면 부모 태그가 영역을 차지하지 않아야 한다. - position: fixed를 주면 스크롤과 상관없이 고정된 위치에 항상 있는다. - 상위 태그에 relative를 주고 absolute + top, left 좌표로 위치를 지정해줄..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - box-sizing으로 박스의 크기를 정할 수 있다. - 기본 값은 content-box이며 border와 padding이 box 밖으로 간다. - border-box는 border와 padding 모두 box 안쪽으로 간다. - margin은 box 바깥쪽으로 지정되어 box 크기에 포함 안된다. - border : 테두리 - border-width : 두께 - border-style : 형태 - border-color : 색깔 - 주어진 크기에 이미지 크기를 맞춘다. - background-position : 배경 이미지 위치 지정 - background-repeat 생..