[TIL] 각종 css

미니프로젝트 진행 3일차, 팀원들도, 나도 코딩에 어느정도 익숙해진 듯하다.

원하는 것을 구글링, 구글링한 것을 코드에 맞추어서 쓰기, 쓴 것이 잘 나오나 출력해보고 버그 고치기 등등...

하루종일 이것만 하는데 늘지 않을 수 없지......

 

 

1.

오늘의 문제점...

1시부터 2~3시간동안 웹에 이미지가 출력되지 않는 문제로 끙끙 앓았다.

알고보니 live share에 직접 파일을 업로드하면 이미지가 깨져서 들어가는 듯..

점심 즈음에 멤버소개 팀도 비슷한 문제를 겪었던 것 같아 여쭈어보니 해결해주셨다.

개발이란 협업이란걸 잊지 말고ㅠㅠ 다음에 비슷한 문제 상황이 있으면 일찍 물어봐야겠다..

 

 

2.

각종 css 

 

position : relative, :absolute

div안의 div에 사용하였으며 relative는 세로, absolute는 가로로 위치를 변경할 수 있도록 해주는 코드

 

overflow: hidden

마찬가지로 div에 사용하였으며 안에 들어가 있는 것이 div영역 밖을 나오면 보이지 않도록 해준다.

 

:hover

마우스를 올렸을때 그 구역이 변화할 수 있도록 해줌

 

transition : all, 3s;

변화가 있는 부분, 변화에 대한 시간을 설정

 

transform: scale(1.1);

마우스 호버링시 크기가 달라지는 것을 설정

 

 

+ 이번주 공부 마무리하며 추가(0317)

*** display는 해당 요소에 적용되는 것과 자식요소에 적용되는 것이 있다.

 

display:flex;

반응성 배치에 영향을 주는 flex.. 자식요소에 적용되기 때문에 부모요소에 넣어야했던 것!

 

display:none;

존재하지만 해당 영역을 보이지 않게 하고 자리 차지도 없다.

비슷한 것으로 visibility:none;이 있는데 이것은 보이지 않지만 자리를 차지함!

이 display:none을 사용해서 이미지 위의 text div박스가 hover되기 전에는 보이지 않도록 했다.

다른 기능이 없었느니까 그냥 visibility썼어도 괜찮았을 것 같네...

 

 

왜 이미지 위에 얹어놓은 text div가 도망가는지 드디어 이유를 알았다!! 해결해주신 튜터님께 감사..'ㅁ')b

 

display:contents; (최신 기능이라서 익스플로러에선 적용x)

"속성이 부여된 요소의 컨테이너를 없애는 특징을 가지고 있습니다. 컨테이너가 없어진 요소는 태그는 존재하지만, 하위 요소를 담
는 컨테이너의 기능을 못하기 때문에 width, height, padding, margin 속성을 사용할 수 없으며(속성 값 자체가 존재하지 않음), 자식 요소는 상위 요소의 디스플레이 속성의 영향을 받게 됩니다."

그러니까 애써 이미지 위에 고정시켜서 올린 text div에 이걸 써서 hovering될때마다 옆으로 밀려났다는 거임.........하하...^^..

 

display:block;

나는 그 자리에 그대로 나타나게 하는 기능으로써 사용하였음.

block 속성이란 요소가 화면에 표시되고, 한 행에 위치하도록 하는 것이라고 한다(100%).

이 요소에는 padding, margin을 사용할 수 있다. (아하 그래서 text박스가 가운데에 고정이 된거구나..)

인라인 요소인 <span>태그에 사용하면 블록이 되면서 길이 속성을 사용할 수 있다고한다.!!

 >> 그리고 여기서 n%에 대한 의미도 알게되었다 설정된 길이 상에서 차지하는 비율이었음!

 

display:inline;

왼쪽부터 오른쪽으로 요소를 배치, 줄의 끝에 닿으면 아래줄부터 배치하는 속성

 

 

 

 

 

어쩐지 css만 실컷 공부하고 있는데 점점 그럴듯해지는 페이지가 보이는 게 즐거워서 자꾸 손이 간다.

 

내일은 java script에서 배웠던 fetch문을 사용해서 데이터에서 이미지, 텍스트 가져와서 넣기를 해보고 싶다.

문제는 데이터 url을 먼저 만들어야 하는 것임.. 할 수 있겠지..?