루체

grid-template-columns / grid-gap fr = fraction 이라는 뜻으로 4 : 6으로 나누겠다! 라는 말입니다. grid-gap은 grid로 나눠진 부분에 여백을 이렇게 두겠다는 말입니다. grid-template-columns에는 %도 들어갈 수 있지만 %보다는 fr단위를 많이 사용을 합니다. 왜냐하면 스크롤이 생길 수 있기 때문입니다. 그리고 이렇게도 나눌 수 있습니다. grid-template-columns : repeat(3,1fr) 1fr은 3번 쓰기는 귀찮으니까 repeat을 통해 1fr단위로 3단으로 나누겠다~ 라는 말이라고 생각하면 편할 것 같다. 그리고 이럴 수도 있다. 나는 2줄로 정렬을 하고 왼쪽열을 200px로 고정시키고 오른쪽열만 신축성이 있게 만들고 싶..

우선 설명을 드리기 전에 html과 css에 이렇게 작성을 해주세요. 물론 필수적인 것은 아닙니다.. 작성을 하고 코드의 결과인 웹페이지를 바로 캡쳐해서 코드 아래에 적겠습니다.. 이미지가 동일한 것은 양해 부탁드립니다. 이미지가 없네요ㅠㅠ 이 코드에서 아이템들을 정리하는데 flex를 우선적으로 사용을 해보겠습니다. container에 flex를 적용을 해줍니다. 적용을 하면 그 안에 자식들이 배치가 된다 이런 개념이다. 아이템의 개수만큼 알아서 이렇게 만들어지게 됩니다. 딱 봐도 column 레이어드 만들 때 편해보이네요. width는 자기 content만큼 가져가는 것을 확인하실 수 있습니다.display:inline과 비슷합니다! 이게 display : flex의 기본 동작입니다. flex-dire..

이번 글은 저번글에 이어서 slide를 만드는 것을 해보겠습니다. 이번에는 CSS로 꾸며주어야 할 것이 많기 때문에 CSS파일을 따로 분리해서 작성을 하겠습니다. html을 우선 아래 코드처럼 따라서 입력을 해주세요. link의 href는 각자 파일 경로에 따라서 작성을 해주세요. 이제 CSS의 style을 꾸며 보도록 하겠습니다 전체적인 태그들의 좌표를 padding : 0 margin : 0을 통해 (0,0)처럼 딱 붙이겠습니다. 그 다음으로는 넘어갈 슬라이드의 list들의 background를 하나씩 지정을 해주세요. 그럼 웹페이지에 이렇게 줄이 그어질 것입니다. 이것들을 이제 하나로 겹치게 만들어서 input radio를 체크를 했을 때 하나씩 slide 되게 만들 것입니다. 이 nth-child..

이번글에는 CSS의 Input 속성에 관해서 알아보겠습니다. 이 Input은 type에 따라서 종류가 엄청 달라진다. 우선 제가 쓰려고 하는 radio type이 어떤 것인지 보여드리겠습니다. html에 코드를 이렇게 작성을 해주시면 어디서 많이 본 것이 웹페이지에 뜨는 걸 확인할 수 있습니다. name을 다 동일하게 해주지 않으면 여러 개를 선택할 수 있게 됩니다. type의 종류가 엄청 많으니 이것 저것 다 보시고 필요한 부분을 더 검색을 하셔서 사용을 하시면 될 것 같다. number부분은 숫자를 입력하면 아래 버튼을 눌러 숫자의 크기를 줄일 수도 있고 키울 수도 있는 텍스트 창이 생긴다. button은 추가로 다른 작업을 해줘야 버튼의 기능을 할 것 같다. color는 클릭을 하니까 색깔을 선택할..

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초의 딜레이를 주는 것을 말한다.

link : 방문하지 않은 링크에 대한 셀렉터 - a태그에만 적용 visited : 방문한 링크에 대한 셀렉터 - a태그에만 적용 hover : 마우스가 올려져 있는 상태에 대한 셀렉터 active : 클릭한 상태에 대한 셀렉터 active - 내가 마우스를 클릭한 태그의 background-color가 노란색으로 바뀐다. hover - 현재 마우스가 올라가 있는 태그의 color가 green으로 바뀐다. link와 visited는 위의 설명만으로도 충분할 것 같다..

CSS에서만 사용할 수 있는 속성으로 top, left, right, bottom 속성이 있습니다. top, left, right, bottom 속성을 사용하기 위해서는 position:fixed를 css에 작성을 해주어야 합니다. 여기서 이속성들을 어떤식으로 사용을 하냐면 웹사이트를 자세히 보시다보면 오른쪽 하단에 TOP이라는 버튼이 있는 것을 보실 수가 있는데 버튼을 위치시키는데 사용을 한다. 이 각각의 속성들을 사용할때 어느곳에서 어떤 것을 사용할지는 아래 사진을 참조하면 되겠다.