루체

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로 고정시키고 오른쪽열만 신축성이 있게 만들고 싶..

웹페이지의 버튼을 눌러서 body태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣으려고 한다. 그러려면 JavaScript의 문법에 따라서 웹브라우저에게 이 body 태그를 선택하라고 해야한다. 그걸 하기 전에 우선 검색부터 해봅시다. JavaScript Select Tag by CSS Selector https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector Element.querySelector() The querySelector() method of the Element interface returns the first element that is a descendant of the element on w..

이부분은 우선 결과와 코드를 캡쳐해서 올리고 코드를 왜 이렇게 썼는지 쓰는게 나을 것 같다.. 뭐라 설명하기가 어렵다.. 제품 소개 완속 급속 휴대용 .section_product_wrap{ border: 1px solid black; position : absolute; width : 60%; display : grid; grid-template-columns: 1fr 1fr 1fr; } .section_product{ border: 1px solid black; width : 100%; text-align : center; position : relative; } 코드를 짜면서 든 생각은 div 태그의 사용을 조금은 줄여야 하지 않나 라는 생각이 들었다. 왜냐면 HTML에서는 단락을 나누는 태그, 이..

왜 3가지로 나누어져 있을까?? 한가지로 만들면 편하지 않을까?? 이 3가지의 언어들은 각각의 역할이 다 있습니다 그 역할의 충실해서 사용을 해야 괜찮은 구조와 디자인, 기능을 가진 웹페이지를 만들 수 있습니다. HTM(Hyper Text Markup Language) HTML은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의를 합니다. 이 부분에 이미지가 들어가고 이 부분엔 동영상이 들어간다 이런걸 정의를 하는 것입니다. HTML은 정적 언어로 웹의 구조를 담당을 합니다. 그래서 이 HTML로 화면을 예쁘게 만들려고 시도하지 않으셔도 됩니다. 일종의 뼈대, 즉 온전히 튼튼한 구조(Semantic)를 만드는 것입니다. CSS(Cascading Style Sheets) CSS는 마크업 언어(HTML..

이번 글에서는 홈페이지 하단의 주소와 Designed by 누구누구 이런 것을 만들어봅시다! 홈페이지 Layout을 어떤것을 만들어야 할지 잘 모르시면 W3CSchool에 들어가시면 CSS Layout이 있습니다! 아래 링크에요! https://www.w3schools.com/css/css_website_layout.asp CSS Website Layout CSS Website Layout Website Layout A website is often divided into headers, menus, content and a footer: There are tons of different layout designs to choose from. However, the structure above, is o..

이번 글은 저번글에 이어서 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는 클릭을 하니까 색깔을 선택할..

웹 폰트를 왜 써야 하는가? 홈페이지에 디자인이나 분위기때문에 사용을 하는 것입니다. 웹 폰트를 쓰기위해 해야할 것들이 있습니다 우선 Google Fonts라는 사이트에 들어가봅시다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 여기서 마음에 드는 폰트를 골라보세요! 고른 다음 + 버튼을 눌러주세요! 그럼 아래 사진과 같은 창이 뜨게 됩니다. 이 창은 우리가 이 폰트를 어떻게 사용을 해야되나를 알려주는 창입니다. 우선 IMPORT에 대해서 설명을 드리겠습니다. style 태그를 제외한 import 부분을 복사해 줍시다. 그 ..

우선 나란히 보이게끔 하고싶은 태그가 어느 부분인지를 파악후 그룹으로 묶어주어야 합니다. 그런데 2개의 독립적인 태그를 의미있는 태그인 h1과 같은 걸로 묶을 수는 없기 때문에 div라는 것을 사용을 합니다. 제일 부모인 div 태그를 grid로 지정하기 위해서 ID값을 줍시다. 그리고 id가 grid인 태그에 대해서 display를 grid로 지정하는 것이 첫번째 그 다음에 grid-template-columns에다가 순서로 봤을때 첫번째가 ol 이므로 150px, 1fr 이런식으로 값을 넣어봅시다. 뭔가 그럴듯한 홈페이지를 만든 것 같아서 기분이 좋다. 이렇게 만든 후 조금씩 디테일을 다듬어 가야겠죠?? 검사를 통해 웹페이지에 들어가서 밑의 사진에 있는 숫자들을 더블클릭하면 웹페이지에서 바로바로 수정..

이번 글은 본문과 내용이 나란히 위치하게 하는 것이 무엇인지에 대한 소개입니다. 여러가지 방법이 있는데 아주 최신의 방법을 쓰려고 합니다. 바로 '그리드'라는 방법입니다. 우선 파일을 새로 만들어서 그리드라는 것이 무엇인지 알아봅시다. 이 각각의 문자에다 테두리를 주고 나란히 배치하는 것을 해보겠습니다. 그러기 위해선 각각 어떤 태그로 묶어주어야 합니다. 지금 그냥 디자인을 하려고 태그가 필요한건데 h1같은 태그를 넣게되면 그 태그는 제목이라는 의미가 있어 사용이 애매하다. 이럴 때 사용을 하는 태그가 바로 라는 태그입니다. 아무런 의미가 없고 그저 디자인의 용도로만 사용하는 태그입니다. div 태그는 block level element 입니다. 같은 목적으로 사용하라고 있는 다른 태그가 하나 더 있는데..