728x90 반응형 프로그래밍37 [반응형] CSS 간단한 가변 요소 크기 단위 정리 요즘에는 프런트엔드의 기본기(HTML, CSS, JS)를 한번 전부 다져두었다. 간단한 건 클론코딩을 하고 조금 만져보는 것으로도 꽤나 경험이 되는 것 같다. 물론 프로젝트도 진행하고 있지만. 이번 주 안에는 최소한의 기능을 넣은 앱을 배포해보고 싶다. 어차피 남아도는 게 시간이라. 각설하고, 그래도 지금은 CSS쪽을 더 파고 싶었다. 일단 적어도 앱을 출시하기 위해서는 보이는 것, 적당히 모던해 보이는 게 필수라고 생각했기 때문이다. 물론 "반응형" CSS를 공부하는 건 다른 맥락에 있을 수도 있겠지만, 대충 그런 느낌이라는 것만 알아두면 된다. 도서관에서 책을 빌려서 지속적으로 보고 있는데, 빌린 책이라서 기록을 더 해두고 싶은 것도 있는 것 같다. 웹페이지 디자인을 기획할 때 간단하게 쓸 수 있는 .. 2023. 12. 28. CSS margin padding 해도 안 사라지는 공백 (inline-block) 혹시 CSS 코딩을 하다고 대체 왜 존재하는 건지 모를 망할 공백을 본 적이 있는가? margin, padding을 0으로 만들어도, 도저히 줄일 수 없는 무언가. 내가 겪었던 함정은 이렇다 : #wrap { width: 90%; height: 500px; margin: 0 auto; border: 4px solid #000; } .container { width: 93.75%; height: 492px; margin: 0 auto; border: 4px solid #000; } .container div { display: inline-block; height: 100%; border: none; margin: 0; padding: 0; } .container div:nth-of-type(1) { wi.. 2023. 12. 21. [ES6] function 함수와 화살표 함수의 차이 - JavaScript function으로 만들어진 함수의 this는 자신이 포함된 객체를 가리킨다. function BlackDog() { this.name = '흰둥이'; return { name: '검둥이'; bark: function() { console.log(this.name + ': 멍멍!'); } } } const blackDog = new BlackDog(); blackDog.bark(); // 검둥이 : 멍멍 json 객체가 상위 객체로 있기 때문이다. 화살표 함수의 경우는 이렇다 : function WhiteDog() { this.name = '흰둥이'; return { name: '검둥이'; bark: () => { console.log(this.name + ': 멍멍!'); } } } const whit.. 2023. 11. 24. CSS 고급 선택자 2 - 속성 선택자 해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다. 지난 번에는 주로 태그 자체(어떤 div, p, a 등)를 어떻게 선택하는지에 대해서 많이 적었다. 형제 선택자, 자식 선택자 등등... 해당 내용은 여기에 있다 : 지난 번 글 CSS 고급 선택자 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML passingprogram.tistory.com 이번에는 어떤 태그에 달려있는 속성을 가지고 태그를 선택하는 방법을 알아보고자 한다. 우선 아래의 자세.. 2023. 8. 13. 이전 1 2 3 4 5 ··· 10 다음 728x90 반응형
