본문 바로가기
Develop/HTML \ CSS

[HTMS\CSS] 웹개발 배우기 3

by 모두모두파이팅 2022. 4. 27.

01-10. Quiz_함께 만든 페이지를 발전시켜기.

 

01-10-02. 글씨 특성 CSS 변경, 폰트까지 변경

 Color 변경

컬러변경은 그냥 변경하면 되기 때문에 쉬움.

 Font-weight 변경

폰트는 굵기나 밑줄 등 여러가지가 있기 때문에 모르면 구글에서 직접 검색하여 찾아보는 것이 좋다.

font-weight: bold; 이렇게 글자 굵기를 굵게 만들 수 있었다.

 

이름도 잘 지어주고, 정렬도 잘 해주고, 구분을 잘 해줘야겠다.

“wrap, jumbotron이라는 영역이 있구나를 알 수 있고, 구역을 구분하여 이렇게 만들 수 있겠다.

 

 

  

01-11. Quiz_나홀로메모장의 포스팅박스를 완성하기!

 

01-11-02. 이 박스는 또 CSS에서 가져올 수 있겠지?

https://getbootstrap.com/docs/4.0/components/alerts/

이 사이트에서 한 번 잘 찾아서 가져와보자!

(힌트: Foms를 잘 활용하시오.)

 

01-11-03. BootstrapFoms에서 CSS 가져오기

글자를 기입할 수 있는 박스를 그대로 가져올 수 있었음.

여기서 나에게 맞게 조금만 수정해서 사용하면 됨.

https://getbootstrap.com/docs/4.0/components/forms/

 

01-11-04. 원하는대로 수정하기

 

CSS를 여기저기 다른 사이트에서 따와보자

Mozilla Developer Network

https://developer.mozilla.org/ko/

모질라 재단 및 다른 IT기업들이 사용하는 웹 개발을 위한 문서 저장소이자 수많은 프로그래밍 입문자들을 위한 학습 장소.

 

 W3schools

https://www.w3schools.com/

온라인으로 웹 기술을 배우는 교육용 웹 사이트이다.[1] 콘텐츠에는 HTML, CSS, 자바스크립트, JSON, PHP, 파이썬, XML, SQL, Bootstrap, Node.js, JQuery등 다양한 교육용 자료를 제공한다.

w3스쿨의 강력한 점은 직관적이고 일반적인 실행 및 소스의 실시간 듀얼 화면을 제공한다는 점이다.

TryIt편집기 및 샌드박스로도 잘 알려진 이것은 사용자에게 소스코드가 어떻게 실행 결과로 나타나는지를 즉시 확인할 수 있게 해준다.

1998년에 만들어진 이 단체의 이름은 월드 와이드 웹인 W3C에서 유래되었지만 W3C(World Wide Web Consortium)와는 관련이 없다.[3] 노르웨이의 Refsnes Data에 의해 운영되고 있다.

W3School은 수천 개의 코드 예를 제시한다. TryIt 편집기를 사용하여, 사용자는 샘플 소스의 예를 직접 편집하고 샌드박스에서 코드를 실행하고 결과를 즉시 확인할 수 있는데 이러한 샌드박스 실행은 서버와 클라이언트와의 상호작용을 깊이있게 이해하는데 좋은 교육방식의 하나이다.

 

 

'Develop > HTML \ CSS' 카테고리의 다른 글

[HTML/CSS] 웹개발 배우기 4  (0) 2022.04.27
[HTMS\CSS] 웹개발 배우기 2  (0) 2022.04.24
[HTML/CSS] 웹개발 배우기 1  (0) 2022.04.21
HTML  (4) 2020.02.25