본문 바로가기
728x90
반응형

CSS6

FlowForge(GTDList) 01 - 01 일지 기본적인 브랜딩 새해 신년에 쓰는 일지도 나쁘지는 않다. 3번째 일지가 될 텐데 뭐 크게 외향적으로 바뀐 건 역시나 없다. 애초에 작업량이 근 2일간 많지 못했다. 딱 신년 넘어가는 타이밍이라 그런지 좀 풀어진 것 같다. 그래도 일지를 써서 앞으로 목표를 잡아야 차후가 쉬워지기 때문에 집중하고 써보도록 하겠다. - 오늘의 개발 이번에 바뀐 건 1. 글 제목을 보면 알겠지만 앱 이름을 새로 달아주었다. 브랜딩 하기 좋기 때문에... 처음으로 좀 각 잡고 만드는 앱인 만큼 그냥 임시 이름으로 하기는 좀 그렇다. 1-1. 그것 때문에 로고도 새로 만들었다. 앞으로 내 앱에서 계속해서 쓸 예정이다. 2. 메인 페이지 개설 뭐 그런 고로 간단한 웹페이지 화면도 만들어 두었다. 지금 당장은 특별한 일을 하지는 않는다. 3. 제대로.. 2024. 1. 1.
[반응형] 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.
CSS 고급 선택자 2 - 속성 선택자 해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다. 지난 번에는 주로 태그 자체(어떤 div, p, a 등)를 어떻게 선택하는지에 대해서 많이 적었다. 형제 선택자, 자식 선택자 등등... 해당 내용은 여기에 있다 : 지난 번 글 CSS 고급 선택자 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML passingprogram.tistory.com 이번에는 어떤 태그에 달려있는 속성을 가지고 태그를 선택하는 방법을 알아보고자 한다. 우선 아래의 자세.. 2023. 8. 13.
728x90
반응형