[개발일지] CSS, 웹페이지를 이쁘게 꾸미는 방법 공부! 스파르타코딩클럽 1주차 강의내용

“

안녕하세요!

어제보다 더 나은 오늘을 꿈꾸는

바오밥입니다 :)

 

”

이쁘게 꾸미기..

저랑은 참 거리가 먼 영역인 것 같습니다..!

미적 감각이 워낙 떨어지다보니..ㅎㅎ

그래도 오늘 강의를 재밌게 들을 수 있어서 다행이었네요!!

CSS에 대해 공부했던 내용을 간단히 정리해보겠습니다💪

 

---

• 무엇인가를 꾸민다는 것은 꾸밀 것을 먼저 가리킬 수 있어야(선택할 수 있어야) 한다는 것
• 이를 위해 class를 많이 이용한다
• CSS도 외우는 것이 아니라 그때그때 필요한 것을 찾아서 적용하면 됨
• CSS 적용하는 방법

1.페이지에서 변경하고 싶은 태그에 class를 부여한다

body 의 자식 태그에 "myclass"라는 class 부여하기

2.head에 style 태그를 추가한 후, body에 부여했던 class에 꾸며주고 싶은 속성 값을 넣는다

head 의 style 태그에 "myclass" 클래스를 만들어주고 속성 넣어주기

 

• 변경 전화 변경 후 차이

CSS 적용 전 페이지

 

CSS 적용 후 페이지

---

• 폰트 찾을 수 있는 사이트
  • 구글 폰트 : https://fonts.google.com/?subset=korean
  • 원하는 폰트를 찾아서 head에 태그 붙여넣기
  • style 태그 안에 해당 폰트 넣어서 사용하기

원하는 폰트를 찾아서 폰트의 코드를 head 태그 안에 붙여넣으면 된다

 

이렇게 head 태그 안에 붙여넣어주자

아래에 있는 내용은 style 태그 안에 용도에 맞게 넣어주면 된다* : 모든 태그에 이 속성을 다 먹이겠다

• style 태그 안에서의 * : 모든 태그에 이 속성을 다 먹이겠다

웹페이지 전체에 해당 폰트를 적용시키기 위해서 이렇게 적었다

• 주석처리
  • 사람은 읽을 수 있는데, 컴퓨터는 읽을 수 없도록 처리하는 것
  • 주석처리하고싶은 코드를 드래그한 후 ctrl + / 키를 누르면 주석 처리 됨
  • html, css 모두 주석처리하는 모양이 다르기 때문에 외우기 애매함. 단축키로 진행하는 것이 좋음!

주석처리 된 코드

---

사실 CSS가 저한테는 좀 어려운 부분이었어요

유튜브 영상들을 보면

"이렇게 이렇게 하면 됩니다~"

하고 설명하시는데, 기초도 모르는 상태에서 보니

암기하는 수밖에 없어서 이해가 어려웠거든요ㅜ

근데 오늘 강의를 들으면서

CSS에 대해서 확실히 이해가 되었던 것 같아요!!

물론 이쁘게 꾸미는 것은 다른 영역이겠지만요..ㅋㅋ

 

오늘도 너무 유익했습니다!! ㅎㅎㅎ

앞으로가 더 기대됩니다🙏

 

읽어주셔서 감사합니다!!

재미있게 읽으셨다면

'♥공감' 버튼 한 번 클릭 부탁드려요 :)