[웹 개발 1 주차] 개발일지 2

Notice

Recent Posts

Recent Comments

Link

« 2025/10 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

bom's happy life

[웹 개발 1 주차] 개발일지 2 - CSS에 관하여 본문

Deveolpment Study🗂️

[웹 개발 1 주차] 개발일지 2 - CSS에 관하여

bompeach 2022. 5. 23. 22:44

05. CSS 폰트, 주석, 파일분리

1) 구글 웹폰트 입히기

- 구글 웹폰트 : https://fonts.google.com/?subset=korean

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

(1) 마음에 드는 폰트를 클릭한다.

(2) [ + Select this style]을 클릭한다.

(3) 우측 상단의 모음 아이콘을 클릭한다.

(4) Embed 탭을 클릭한다.

(5) link 태그를 복사해서 <head> ~ </head>사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다.

2) 꿀팁! 주석달기

주석은 언제 사용하나요?

- 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 or

- 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다. 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것!

* 단축키 : 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)

3) CSS 파일 분리

이럴 땐 아래와 같이 파일을 분리해둘 수 있다.

06. 부트스트랩, 예쁜 CSS 모음집

1) bootstrap이란?

- 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)

[코드스니펫] 부트스트랩 컴포넌트 5.0

https://getbootstrap.com/docs/5.0/components/buttons/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

[코드스니펫] 이미지 어둡게 하기

linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

07. 본격 부트스트랩 써보기 (예시_)

(남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐쓰는 게 답!

-밑에 적어둔 내용은 스파르타코딩클럽 수강중 배운 내용위주로 적어논 것.)

1. 카드 복사해서 붙여넣기

- Card 카테고리에서 여러개 있는 Card를 클릭! (이건 스타일에 따라서 알아서 선택)

2. 이미지 넣고, 개수 조절하기

- row-cols-md-3 → row-cols-md-4 로 바꾸기

3. 별 넣고, 코멘트 달기

- <p> 태그를 활용합니다. 코멘트는 class를 줘서 회색 글씨로!

[코드스니펫] 별 표기 (복사해서 사용) ⭐⭐⭐

[코드스니펫] 꿀팁 - 이모티콘 모음

https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

'Deveolpment Study🗂️' 카테고리의 다른 글

app.py / index.html 뼈대코드 (0)	2022.06.16
POST와 GET연습하기(영화기록하기) - 스파르타 14강 (0)	2022.06.16
[웹 개발 2 주차] 개발일지 7 - 단축키와 수업목표 (0)	2022.05.25
[웹 개발 1 주차] 개발일지 3 - 포스팅박스 만들기 실습 (0)	2022.05.23
[웹 개발 1 주차] 개발일지 1 - HTML과 CSS의 개념 (0)	2022.05.23

'Deveolpment Study🗂️' Related Articles