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. CSS 고급 선택자 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다. 1. 하위 선택자 제일 많이 이용할 선택자들 중 하나이다. 어떤 선택자의 하위에 존재하는 모든 요소에 해당 스타일을 적용한다. outside section 아직 온라인 예약 신청이... (p inside section) 가족실... (p inside div inside section) 2. 자식 선택자 부모요소 바로 아래에 있는 자식 요소 에게만 스타일을 적용하는 태그이다. 위의 .. 2023. 7. 28. CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정 요즘 계속 군대에 있는 누군가와 프로젝트를 하고 있다. 근데 생각해보니 내 계정도 아니라서 깃허브에도 기록이 안남는데다가 나중에 가면 내가 이러한 포트폴리오를 했다고 증명할 방법이 안 남는다는 사실을 알았다. 물론 경험은 남는다. 지금도 CSS를 다루는데 기본적인 레이아웃 짜는 방법을 어느정도 알게 되었고, React프로젝트를 할때 밑거름이 되어 줄 것이다. 하지만 역시 명시적으로 내가 뭘해왔는지 남기는 것은 좋다. 마침 오늘 개발하려는 페이지는 쉬운 페이지이다. 카카오톡의 리스트 페이지와 비슷하게, 메시지 방을 세로로 된 리스트에 띄우는 페이지이다. 웹페이지를 만드는데 제일 필요한 것이 단순하게 레이아웃의 가로정렬, 세로정렬 법이다. 지금도 똑같이 작업을 진행하고 있는지는 모르겠지만, Andriod S.. 2023. 5. 31. 이전 1 다음 728x90 반응형
