CSS 프로퍼티 선언 순서

이전부터 팀 프로젝트에 사용했던 CSS 프로퍼티 선언 순서에 대해 정리합니다. 아래 자료를 기반으로 만든 건 아니지만, 순서 나열에 쓰기 위해 비슷한 기준으로 정리된 걸 사용합니다. 굵은 글씨 -> 분류 취소선 -> 자료와 기준 다름 밑 줄 -> 자주 사용 Positioning position top right bottom left z-index Box model display float width height max-width max-height min-width min-height padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left margi..

• format_list_bulleted Front End/HTML, CSS
• · 2022. 12. 15.
• textsms

[CSS Battle로 CSS 공부] 02. #2 Carrom

기록용 포스팅이기에 간결히 적습니다. 하지만 질문 및 지적은 환영합니다. CSS Battle을 통해 CSS를 학습한 내용을 다룹니다. HTML, CSS 기초 보강프로젝트! 2022/08/02 #2 Carrom 모범 답안 분석 모범 답안이라고 생각했는데, 분석 위해서 붙여넣기 했더니 일치율 꽤 떨어집니다. 그래도 접근 방식은 참조할 예정입니다. 1. inline-block div의 display를 inline-block으로 설정했습니다. inline-block은 inline 엘리먼트처럼 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width, height, margin, padding 등의 값을 지정할 수 있습니다. 즉 absolute로 각각 절대적인 위치를 부여한 ..

• format_list_bulleted Front End/HTML, CSS
• · 2022. 8. 3.
• textsms

[CSS Battle로 CSS 공부] 01. 학습 전략, #1 Simply Square, vh, vw, vmin, vmax

기록용 포스팅이기에 간결히 적습니다. 하지만 질문 및 지적은 환영합니다. CSS Battle을 통해 CSS를 학습한 내용을 다룹니다. HTML, CSS 기초 보강프로젝트! 학습전략 코딩 자율학습 HTML+CSS+자바스크립트 책 정리, CSS Battle 병행 Q: 굳이 처음 시작하는 것도 아닌데 책 붙잡고 공부할 필요가 있을까? A: 모르는 내용만 정리하며 빠르게 훑을 예정입니다. Q: CSS Battle은 일반적인 웹 레이아웃과 거리가 먼데 학습 효과 있을까? A: 메인이 아니고 보조 수단으로 사용할 예정입니다. 책을 읽으며 클론 코딩이나 토이 프로젝트를 병행하기는 부담스럽습니다. 실제 웹 사이트나 애플리케이션의 레이아웃과는 거리가 멀지만, 책 읽는 동안에 배운 걸 간단하게나마 써볼 수 있다는 장점이 ..

• format_list_bulleted Front End/HTML, CSS
• · 2022. 8. 2.
• textsms

[HTML+CSS+자바스크립트] 02. 텍스트 관련 태그, 목록, 이미지, 링크

기록용 포스팅이기에 간결히 적습니다. 하지만 질문 및 지적은 환영합니다. 책에서 개인적으로 중요하다고 생각하는 부분을 정리하고 사견을 더했습니다. 검색엔진 최적화(SEO, Search Engine Optimization), 웹 접근성 관련 내용은 붉은 글씨로 표시. "코딩 자율학습 HTML+CSS+자바스크립트"를 읽으며 정리한 내용입니다.(챕터 2.3~3.5) 블록 요소: hn, p태그처럼 사용할 때마다 줄 바꿈되는 태그. 인라인 요소: a, span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그. 04. 텍스트 관련 HTML 태그 (1) hn 태그 주로 제목이나 주제 h는 heading을 의미하고 n은 숫자. Heading Level 1 Heading Level 2 Heading Level 3 Head..

• format_list_bulleted Front End/HTML, CSS
• · 2022. 8. 1.
• textsms

[HTML+CSS+자바스크립트] 01. 유용한 확장, HTML 기본 구조

기록용 포스팅이기에 간결히 적습니다. 하지만 질문 및 지적은 환영합니다. 책에서 개인적으로 중요하다고 생각하는 부분을 정리하고 사견을 더했습니다. 검색엔진 최적화(SEO, Search Engine Optimization), 웹 접근성 관련 내용은 붉은 글씨로 표시. "코딩 자율학습 HTML+CSS+자바스크립트"를 읽으며 정리한 내용입니다.(~챕터 2.2) 01. 유용한 확장 프로그램 프로그램명 / 제작자명으로 리스팅. (개인적으로 유용하다고 생각하는 건 Bold) 1. Live Server / Ritwick Dey Live server로 검색했을 때, Live Server 와 Live Server Preview가 검색됩니다. 차이는 크게 두 가지입니다. Live Server Live Server Prev..

• format_list_bulleted Front End/HTML, CSS
• · 2022. 7. 31.
• textsms

[Electron] 01-2. Electron + Typescript + React 시작하기

기록용 포스팅이기에 간결히 적습니다. 하지만 질문 및 지적은 환영합니다. 프로젝트 경로를 만든 뒤, 일렉트론 앱을 만들어서 실행하기까지의 과정을 다룹니다. 경로를 만든 뒤, 해당 경로에서 npx create-react-app 앱이름 --template typescript electron 관련 패키지 설치 npm i electron-is-dev dev 환경을 인식하여 Hot-Reloading 이용하기 위함. npm i electron electron-builder concurrently cross-env wait-on --save-dev Electron-is-dev: 개발환경인지 빌드한 프로덕션환경인지 확인을 위하여 사용됨. Electron : 일렉트론을 실행하기 위해서 사용됨. Electron-build..

• format_list_bulleted Front End/Electron
• · 2022. 7. 25.
• textsms