css
1.[CSS] - margin과 padding의 차이 (Box-Model)
margin : Object와 화면과의 여백 (외부여백 ) Padding : Object 내의 내부여백Margin은 Border 바깥쪽을 차지한다. 주변 요소와 거리를 두기 위한 영역이다.Padding은 Content와 Border 사이의 여백을 나타낸는 영역이다. C
2.[CSS] - position 속성
css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용position : static기본값은 staticHTML 문서상에서 원래 있어야할 위치에 배치to
3.[CSS] - 캐스캐이딩(cascading)
하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 함.중요도<head>의 <style><head>의 <style> 내의 @import<link>로 연결된 CSS 파일<link>로
4.[CSS] - 인접선택자
input 다음에 나오는 i가 인접 선택자로 지정 가능하다.인접 선택자 + 를 활용해서 해당 input 다음에 나오는 icon의 색상을 변경한다.input에 포커스 됐을 때 fa-solid 클래스를 가진 요소에 색상을 dodgerblue로 변경한다.
5.[CSS] - hover (A를 호버하면 B에 속성을 주고싶은데?)
hover 다음에 나올 수 있는건 자식요소.dropdown에 hover 했을 때 dropdown-submenu 를 어떻게 할건지!
6.[CSS] - 일반 및 position 중앙배치
position : absolute 하는 순간 모든 요소는 inline-block이 됨!
7.[CSS] - position transition이 이루어지지 않을 때
8.[CSS] - transform 비스듬히 rotate
transform: rotate(-30deg) skewX(20deg);
9.[CSS] - transform rotate(360deg)
y축을 기준으로(세로로) 360도 회전을 하는데 a태그에 transition을 줬으니 360도 회전을 하는데에 지연시간을 줌
10.[CSS] - overflow
부모요소와 자식요소의 관계에서 부모 요소가 동그라미 형태일때 부모요소에 overflow:hidden을 주면 자식요소도 그 모양을 따라간다.
11.[CSS] - before, after
인라인 요소 : 크기 값 가질 수 없고, 줄 안바뀜크기 값을 가져야한다면 display : inline-blockposition속성을 쓸거면 before을 쓰던, after을 쓰던 상관 없음
12.[CSS] - animation
@keyframe : 애니메이션 스테이지를 정함애니메이션의 이름을 정함 (ex)loading)스테이지 : 0% ~ 100%css 스타일 : 각 스테이지에 적용시킬 속성from to로 적어도 되나보다!animation :animation-name: @keyframes 이
13.[CSS] - float 속성 주고 높이값을 잃을 때
See the Pen Untitled by jeongwonJo (<a href="https://codepen.
14.[CSS] - header 잡는 법
처음에 header-wrapper이라는 div 없이 짰는데 그러면 header에 padding 오른쪽이 안맞는 현상이 일어남header 잡는법 header에 있는 요소를 가운데 정렬(align-items), 각각 양끝 사이드 정렬(justify-content)로 정렬하