profile
Frontend Web Developer
post-thumbnail

bootstrap 다양한 속성

Responsive Imageclass="img-fluid rounded"class="img-fluid rounded-circle"Hoverable Rowclass="table table-hover"Formform controlselectcheck/radiorangec

2021년 11월 22일
·
0개의 댓글
post-thumbnail

bootstrap class 속성 사용하기

2021년 11월 22일
·
0개의 댓글
post-thumbnail

CSS image sprite generator 사용하기

여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법https://www.toptal.com/developers/css/sprite-generator/한 이미지를 이용해 좌측의 position을 적절히 활용하면 된다.

2021년 11월 22일
·
0개의 댓글

clip 사용

clip : 자르기position 값이 필수적이다blind클래스 주요 코드로 사용margin: -1px 굳이 왜 쓸까?1\. https://stackoverflow.com/questions/61896327/why-is-negative-margin-set-to-

2021년 11월 22일
·
0개의 댓글

box-sizing: content-box VS border-box

box-sizing: content-box;\-> 박스가 padding, border을 포함하지 않는다.box-sizing: border-box;\-> 박스가 padding, border을 포함한다.

2021년 11월 21일
·
0개의 댓글

em VS rem

1em : 부모 엘리먼트 크기 (중첩이 가능)계산식 : 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값1rem : 중첩이 가능한 em에 대응하는 개념. 최상위 html 크기.

2021년 11월 21일
·
0개의 댓글
post-thumbnail

focus VS hover VS active

2021년 11월 21일
·
0개의 댓글

Input 태그, Label 태그

label 을 input 요소와 연관시키려면, input에 id 속성을 넣고 label에 id 와 같은 값의 for 속성을 넣거나 label안에 input을 중첩시킨다 이름 : 패스워드 : 로그인

2021년 11월 21일
·
0개의 댓글

inline-block 속성

With display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.https://www.w3schools.com/cs

2021년 11월 11일
·
0개의 댓글
post-thumbnail

flex VS media query 영역 비교하기

2021년 11월 10일
·
0개의 댓글

float 해제하기

float을 사용하게 되면 float이 설정된 요소는 브라우저가 높이 값을 인지하지 못한다.float된 요소의 부모태그에 강제로 높이 값을 지정(단점 : 반응형시 자동 높이 값 설정 불가)float된 요소의 부모태그에 overflow:hidden을 적용(단점 : 해당

2021년 11월 5일
·
0개의 댓글

position: sticky

sticky 속성은 static과 fixed 속성의 특징을 모두 가지고 있는 속성sticky 영역의 x 또는 y 위치값이 설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동

2021년 11월 5일
·
0개의 댓글