개발새발12 [CSS] 단위 단위 절대단위 외부 요인에 영향 받지 않고 절대적인 값을 지닌 단위 px = pixel = 화소 (화면을 구성하는 가장 기본이 되는 단위) pt : 인쇄를 위한 단위 (1pt = 1/72인치) 상대단위 외부 요인에 영향을 받아 유동적인 값을 지닌 단위 % : 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용 em : 스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정 font-size : 16px인 경우, 1em = 16 x 1 = 16px / 0.8em = 16 x 0.8 = 12.8px rem : ★최상위★ html 요소의 font-size 속성 값에 비례하여 값을 결정 vw / vh : 요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정 ( * viewpor.. 2024. 4. 7. [CSS] 웹 폰트 웹 폰트 font-family : “폰트이름” font-family : arial, “맑은고딕”, sans-serif; ☞ 순서대로 적용됨. 유저 컴퓨터에도 폰트 파일이 설치 되어 있어야 글씨체가 제대로 보인다. 폰트 속성 font-size : 텍스트의 크기를 지정 font-weight : 텍스트의 두께를 지정 text-decoration : 테스트의 장식용 선을 추가함 line-through (취소선), overline (윗줄), underline (밑줄) color : 텍스트의 색을 지정 line-height : 텍스트의 행간을 설정 letter-spacing : 텍스트의 자간을 설정 word-spacing : 텍스트의 단어 간 간격을 지정 text-align : 블록요소나 표 안에서 텍스트의 가로 .. 2024. 4. 7. [github] tistory 글 작성하고 자동 Github 잔디심기 tistory에 블로그 포스팅을 시작했다. 그동안의 공부 흔적들은 notion, velog, github 잔디심기 곳곳에도 흩어져있었다 (여자의 마음은 갈대랄까..) TIL을 tistory로 모두 이전하기로 마음먹었는데 tistory에 글을 포스팅 하면 자동으로 github과 연동되어 잔디가 심는 게 가능하다니..! 꿩먹고 알먹고 도랑 치고 가제 잡고 누이 좋고 매부 좋고 여기저기 포스팅을 써칭했는데 너무 간결하게 써진곳도 많고 직접 해보니 나에겐 너무 어려웠던 경험을 초보자에 맞게 정리해본다. 1. Tistory RSS 설정 설정-관리-블로그로 들어가 최하단의 기타 설정에서 RSS 전체공개 설정 💡본인 블로그 주소/rss로 데이터가 잘 나오는지 확인해보기 ex) https://yeni-devnote.t.. 2024. 3. 31. [CSS] 색상, 배경 색상 색상 이름 기본 16색 + 200색 = 총 216가지 색 표기 가능 → 216색을 웹 안전 색상이라고 한다. hex 색상코드 16진수 여섯자리로 색상을 표기하는 방법이다. 맨 앞에 # 을 붙여서 사용한다. rgb / rgba rgb(red, green, blue)값을 이용해 색상을 표기하는 방법이다. rgb요소에는 0에서 25까지의 숫자를 사용한다. rgba(0, 0, 0, 0.35) > 투명도를 줄 수 있다. opacity : 요소의 불투명도를 설정하며 0~1까지의 숫자를 지정한다. 배경 background-color 요소의 배경 색깔을 지정한다. background-image 요소의 배경 이미지를 한개, 혹은 여러개 지정하며 그라데이션 적용도 가능하다. background-image: linea.. 2024. 3. 30. [CSS] CSS의 기본과 선택자 CSS란? 웹 브라우저가 읽을 수 있는 언어 : HTML, CSS, JS CSS는 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할 페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아주며, 요소 하나하나를 개성있고 사용이 편리하도록 꾸며주는 역할 CSS 기본 용법 CSS는 선택자(Selector), 선언(Declaration)로 구분되며, 선언은 다시 속성(property), 속성값(property value)의 구조를 가지고 있다. 선택자 : 어떤 HTML 요소를 선택해서 스타일을 적용할지 지정 선언 : 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정 속성 : 적용하고자 하는 스타일의 종류 속성값 : 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정 CSS 적용.. 2024. 3. 30. [VSCode] 유용한 VSCode 단축키 모음 - 코딩 속도를 올리는 꿀팁! 시간이 금이다! 코딩 속도를 올릴 수 있는 VSCODE 단축키 모음.zip💡 코드 한줄 복사하기 mac : ⌥ + ⇧ + ↑ / ↓ win : Alt + ⇧ + ↑ / ↓ 코드 한줄 삭제하기 mac : ⌘ + ⇧ + K win : Ctrl + ⇧ + K 코드 위치 위/아래로 이동하기 mac : ⌥ + ↑ / ↓ win : Alt + ↑ / ↓ 코드 블록 한방에 코멘트 처리하기 mac : ⌘ + / win : Ctrl + / 반복되는 단어 한방에 수정하기(선택형) mac : ⌘ + D win : Ctrl + D 반복되는 단어 한방에 수정하기(싸그리 다!) mac : ⌘ + ⇧ + L win : Ctrl + ⇧ + L 클릭하는 곳마다 커서 생성 mac : ⌥ + Click win : Alt + Click 선.. 2024. 3. 30. 이전 1 2 다음
