루체

일반적으로 p 태그나 div 태그, ul안에서 li 태그를 써도 다 Vertical로 생성이 되게 된다. 물론 그게 필요하면 그냥 그대로 사용을 하면 되지만 나는 Horizontal로 생성을 해야 하는 상황이라 이것저것 다 찾아봤다. CSS List Horizontal | CSS 리스트 가로 등등 이것저것 검색을 하는 도중에 navigation bar라는 것이 존재한다는 것을 알게 되었다. 이것과 grid를 적절하게 섞는다면 내가 원하는 모습이 어느정도 나오지는 않을까? 라는 생각으로 적용을 시켜보았다. 우선 회사 로고가 될만한 이미지를 홈페이지에 넣어주자 나는 로고가 없어서 그냥 그림판에다가 대충 그려서 넣어놨다. 물론 이건 내가 로고의 위치를 옮겨놓은 결과물이고 그냥 넣기만 하면 left = 0 to..

absolute에 대한 추가적인 설명과 relative는 어떤 것인지 알아봅시다. 우선적으로 코드를 아래 사진과 같이 입력을 먼저 해줍시다. margin: 0 auto는 frame이라는 클래스 명을 가진 div를 가운데 정렬을 할 때 사용하는 것이다. 위의 코드를 작성하게 되면 이렇게 결과값이 나오게 된다. 둘의 차이점을 설명드리자면 red는 frame 안에 들어있긴 하지만 absolute로 설정을 해서 frame안에 갇혀있는 것이 아니라 웹페이지 전체에서 움직임이 가능한 것이다. absolute는 바로 절대적인 좌표값을 지정해주는 것이다. 반면에 relative는 frame안에서 생성이 되고 frame안에서만 움직임이 가능하게 된다. absolute relative 모든 브라우저를 좌표값으로 지정을 할..

abosulte 예제를 진행하기 전에 우선 코드를 이렇게 작성을 해주세요 그리고 css파일에는 아래와 같이 작성을 또 해주세요 그럼 이렇게 보이는 것을 우선 확인하실 수 있습니다. 이제 CSS파일에다가 position:absolute 속성을 입력을 해봅시다. 그럼 결과물로 갑자기 이렇게 합쳐지는 것을 확인하실 수 있습니다! 이게 왜 이렇게 되냐면 absolute 를 작성을 하게되면 작성한 모든 부분이 left : 0 top : 0 으로 모이게 되서 겹쳐 보이는 것입니다. absolute는 절대적인 좌표값을 줄 때 사용하는 것으로 우리가 설정을 해주지 않아서 위의 결과가 나오게 되는 것이다. 그러면 절대값을 우리가 설정을 해보자. 그러면 이렇게 위치가 바뀌게 된다. 기본 설정이 left와 top으로 되어 ..

nth-child(n) nth-of-type(n) 모든 자식 엘리먼트 중 n번째 특정 유형의 자식 엘리먼트 중 n번째 위의 표를 보고 한번에 알기는 어려우니까 예제를 통해서 살펴보도록 하겠습니다. 쪽 부분에 아래 코드를 작성을 해주세요 nth-child가 무엇인지 부터 알아보겠습니다. css부분에 가서 밑의 사진과 같이 입력을 하시면 결과가 나오게 됩니다. 특정 태그에 상관없이 test 클래스를 부모로 두고 있는 자식 엘리먼트 중 3번째를 뜻합니다. nth-of-type은 특정태그만 검사를 하기 때문에 똑같이 3을 넣어주면 지금 3번째가 없기 때문에 아무런 동작을 하지 않는걸 확인하실 수 있습니다.

transition은 hover를 통해서 background-color를 바꿔주려고 할 때 색깔이 확확 변하게 하는 것이 아니라 조금 부드럽게 변하게 할 때 사용을 하는 것이다. 변하는걸 보여주려면 gif로 만들어야 하는데 gif로 만들기는 시간이 좀 걸려서 만들기가 힘들 것 같다.. transition : 0.3s - 변화가 생길때 0.3초의 딜레이를 주는 것을 말한다.