My footsteps
※ flex: 반응형 웹디자인 제작에 최적화된 css flex가 작동하는 방법 : 부모영역에 속성 입력하면 > 자식영역이 배열됨 적용법 ▶ display : 속성값; ㄴ flex : 자식 영역을 가로로 배열함, 영역이 부족하면 자동 줄바꿈. (블록요소) ㄴ inline-flex : 인라인 요소로 처리(거의 사용X) ▶ flex-direction : 속성값; → 배치방향 ㄴrow : 자식영역을 가로방향으로 배열(왼쪽 > 오른쪽) 기본설정이라서 생략이 가능함 ㄴrow-reverse : 가로방향으로 배열하되, 반대로 배열 (오른쪽 > 왼쪽) ㄴcloumn : 세로방향으로 배열(위 > 아래) ㄴcloumn-reverse : 세로방향으로 배열(아래 > 위) ▶ flex-wrap : 속성값; → 주축설정(줄바꿈) ..
float(:가로로정렬)가 들어가면 배경 영역이 안채워짐. ▶float가 있는 영역까지 배경색이나 이미지가 나오게 하려면? 1. float의 부모 영역을 찾는다 (배경색이나 배경이미지를 갖고 있는 영역) 2. 배경영역태그에 코딩입력 { content: ""; >임의로 공백내용을 입력해줘서 맨 아랫줄을 인식하게 해주는 역할(눈에 보이지 않는) clear: both; >float를 해제해줌. 그 말은 즉슨,clear 코드 줄부터 쭉 아래로 내려가게 해준다는 뜻 display: block; >float가 inline요소이기 때문에 이것도 해제해줘야해서 block로 써주는것이다 } ★외워두는게 좋다고 함. float를 쓸꺼라면...★ *a 태그는 정렬이 안먹혀서 무조건 inline-block 먹히고 나중에 효과..
*figure :그림이랑 글자를 한번에 묶는 태그 *© > 동그란C모양 자동으로 나옴 ⓒ 이런거.. *margin: 10px; 상하좌우에 10px의 여백 생성 margin: 10px 5px; 상하에는 10px 좌우에는 5px의 여백 생성 (둘둘씩 따로 쓰는방법. 각각 쓰고싶으면 각각..) margin: 0px auto; 상하에는 여백이 없고, 좌우에는 동일한 크기의 여백 생성 *padding: 15px 상하좌우에 15px 여백 생성 padding: 15px 0px; 상하에는 15px, 좌우에는 여백 없이 생성 *a태그(링크)가 있는 글자 색을 변경할때는 무조건 a태그 자체를 지정해줘야한다. 따라서 li 태그같은곳 밑에 있으면 선택자를 이용해서 a 태그까지 가서 적용해야한다 *글자를 꾸몄는데 반응이 없으면..
trnasition-property: 서서히 변하게 할 속성 trnasition-duration: 변하는 시간(초단위) trnasition-timing-function: 속도를 완만하게 속성값 ▶ ease: 서서히 빨라지고, 서서히 느려짐(기본값, 생략가능) ▶ linear: 일정한 속도로 전환효과 만듦 ▶ ease-in: 느리게 시작 ▶ ease-out: 느리게 끝 ▶ ease-in-out: 느리게 시작하고, 느리게 끝 trnasition-delay: transition이 작동하기 전 지연시간(0~1초 사이 값으로 입력) *hover로 또 따로 나눠서 적는 이유는 트렌지션이 적용 되고 안되고를 구분해서 적어줘야 하기 때문이다 변화가 되어 보여줄 부분은 :hover이고 어떤 transition에 어떤값을..
▷float : 구역을 왼쪽/오른쪽에 배치하고 옆에 빈공간에 "내가 왼/오 로 갈테니까 다른구역이 와도 된다!" float가 반복되며 순서대로 배치 속성값 ▶ left : 왼쪽으로 배치하고 오른쪽에 다음 구역이 들어오게 함 ▶ right : 오른쪽으로 배치하고 왼쪽에 다음 구역이 들어오게 함 ▷clear : float가 설정된 구역의 아래로 내려줌 (float를 무력화?) 속성값 ▶ left : clear보다 위에 있는 구역중에서 float가 left로 설정된 구역에 바로 아래에 맞게 줄바꿈 (위에있는것 높이에 맞게 딱 붙어서 배치) ▶ right : clear보다 위에 있는 구역중에서 float가 right 로 설정된 구역에 바로 아래에 맞게 줄 바꿈 (위에있는것 높이에 맞게 딱 붙어서 배치) ▶ bo..