본문 바로가기

IT공부

(9)
[HTML,CSS] BNX 반응형 웹사이트 상품 리스트 만들기 See the Pen jObKpve by 양미강 (@ymk0668) on CodePen.
HTML,CSS[2020.05.04 float 복습] float =공간을 최소한으로 차지 하되 가로정렬한다. !!block 요소만 float 요소를 무시한다. !! 4개의 div 블럭을 모두 가로정렬 해보자 1. 4개의 블럭 너비를 25% display를 inline-block 을 줬는데도 가로에 모두 정렬되지 않는다. =inline-block 주변에는 항상 애매한 여백이 남기때문이다. 2.display:block 요소는 한줄을 혼자 쓴다. 3.float:left를 주어 모두 한줄에 가로 정렬 되었지만 부모인 section의 테두리 안에 가둬지지 않았다. =section의 display는 block이기 때문에 float인 div를 무시한다. block요소만 float 요소를 무시한다 4.::after를 이용해 section의 막내를 만들어주고 display..
2020.04.27 HTML,CSS 수업 내용 - before,after- after,before:HTML에 100개의 텍스트가 있다고 할 경우에, 각 100개의 텍스트의 앞이나 뒤에 추가 내용을 붙이고 싶을 때, 하나하나 HTML을 수정하지않고 CSS before,after를 활용해 추가해주면 편리하게 할수 있다. *after와 before의 display는 inline 이다.* *before은 태그에 첫번째 자식 after는 막내자식이다.* -transition- =요소가 변할 때 변하는 과정 즉, 애니메이션 효과 ex) div{ transition: width 1s;} = 돌아갈때 애니메이션 (평소작동) div:hover>div{ transition: width 3s} = 발동 애니메이션 (마우스 올렸을 때 작동) *transition 은 시작..
노트 필기 [02 position,before.after,transition]
노트 필기 [01 HTML,CSS,display]
평일 공부 계획 10시기상 1시 학원출발 2시 학원도착 2시 . . . 7시 수업 끝 8시 집 도착 ~~ 9시 저녁 먹기 10시 복습시작(최소 3시간) 1-2시 복습 끝 취침!!
1.2.3차 풀다운 메뉴 만들기.
*display와 position의 정리* -display- 종류 inline-block,inline block none 너비 최소한으로 줄어든다 최대한으로 넓어진다. 없어진다. 본질 글자화 블록화 line사용 한 줄에 최대한 여러개가 나온다. 한 줄을 무조건 혼자 쓴다. 정렬 부모의 text-aline에 의해서 정렬 스스로 margin-left,margin-right를 사용해서 정렬 ex) inline=a,img,span ... block=div,section,article ... *inline에는 width,height,margin,padding 이 재대로 적용되지 않는다* =inline-block 혹은 block 으로 승격 시켜준다!! -position- 종류 absolute,fixed relative static 너비 최대한 줄어든다. 그..