내마음대로만들어보자/CSS25 background url - repeat https://developer.mozilla.org/ko/docs/Web/CSS/background-repeat 2021. 6. 13. 개념정리(CSS) - border로 삼각형 만들기 웹페이지를 만들다보면은 도형을 사용하는경우가 있으며, 이런경우 이미지를 넣을수도있겠지만 간단하게 사용해야되는경우 알고있으면 나중에 유용하게 사용할 수 있을것 같아 보여 정리하게되었다! 위 내용은 블로그를 돌아다니면서 원리에 대해서 가장 설명을 구체적으로 잘 해주고 있어서 그부분에 대해서 보고 숙지를 하면 좋겠다고 생각이 들어 정리를 하게 되었다! 예시 코드는 이런 내용들을 설명해주신 블로그 통해서 참고하고 공부해보자! https://rgy0409.tistory.com/3034 * 위 그림에 따른 코드 적용 사항 1. 가로,세로 길이 값을 100px 로 두고 border 의 위, 오른, 아래, 왼쪽에 각각 border 테두리를 1px로 적용된 모습 2. 가로,세로 길이 값을 100px 로 두고 border.. 2021. 5. 31. 개념정리(CSS) - box-sizing 의 필요성 우선, 웹 페이지에서 요소를 구성하는 가장 기본적인 영역부터 알고있어야할 것 같다! 참고로, 가장 바깥영역은 Position 이다. 모든 요소는 margin, border, padding 값을 가지고 있다. * box-sizing 속성 content-box : 콘텐츠 영역을 기준으로 크기를 정합니다. (padding, margin값을 포함하지 않음) border-box : 테두리를 기준으로 크기를 정합니다. (padding, margin 값을 포함) initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 즉, width값을 500px 로 설정한 경우 content-box 는 테두리값을 width값에 포함이 되지 않으므로 실제 가로 길이는 580px가 된다. bord.. 2021. 5. 31. 개념정리(CSS) - 컨텐츠 요소를 가운데 오게 하는 방법 코딩을 하면서 느낀부분은 물론 기본 뼈대를 잘 작성을 해놔야 나중에 CSS로 꾸미더라도 코드가 꼬이지 않고 편한 것 같다. 또, 원하는 위치,크기에 맞게 정렬해야 할 경우가 많은 것 같아서 이부분도 별도로 개념을 정리하고 여러가지 방법을 알고 있는게 좋을 것 같다.(코딩에는 정답이 없다고하니!!) ① flex를 이용하는 방법 HTML Center CSS .center { display :flex; align-items : center; justify-content : center; height :100vh; } .center span { display : inline-block; width : 100px; height : 100px; background-color : #fff; border-radius .. 2021. 5. 28. 이전 1 ··· 3 4 5 6 7 다음
