IT/웹개발 (100일 도전)

Udemy Section2 (3일차) - CSS 색상, 단축키 등

김숭늉이 2023. 2. 10. 00:17
728x90

 

1. 색상 선택하기 용이한 사이트 참고 (COLOR PICKER)

     ㄴ 상을 나타내는 다양한 값이 있음 

https://imagecolorpicker.com/

 

👍 Color Picker online | HEX Color Picker | HTML Color Picker

Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get the RGB Color, HEX Color and HSL Color code. 👍

imagecolorpicker.com

 

2. 코드 들여쓰기 (indantation) 두가지 방법이 있음 

 

 1) 단축키 사용

kyboard shorcuts 에서 "format document'를 검색하고 단축키를 확인할수 있다

"shift + alt + F"

 2) extension 설치 

 -> prettier 설치 

설치후 setiing 메뉴에서 default fomatter에서 prittier 선택

     * [windows] preferences - Default Formatter 설정 *

 

3. 각 문장은 <p> tag로!

 

4. text에 url 링크 연결

http 혹은 https 까지 포함된 주소를 복붙 해야함 

 

<p
  style="font-family: sans-serif; text-align: center; color: rgb(131, 123, 123)"
>
  I'll achieve this goal by diving into
  <a href="https://www.google.com"> more learning resources.</a>
</p>

 

5. 글로벌 css 스타일 사용

p, h1 element에 적용

<style>
  h1 {
    font-family: sans-serif;
    text-align: center;
    color: rgb(131, 123, 123);
  }

  p {
    font-family: sans-serif;
    text-align: center;
    color: rgb(131, 123, 123);
  }
</style>

6. 사용자에게 보이는정보, 안보이는 정보  

7. <!doctype html> html5

    가장상단에 위치해야함

 

    ㄴ html 버전을 브라우저에 알려줌

 

 

  8.<title>My daily challenge</title>

     ㄴ tab의 제목이 변경됨 

 

9. 유용한 단축키 모음

 

tab : 들여쓰기 (스페이스바 여러번 할필요 없음)

ctrl + z -> 이전으로 돌아감

P만 입력해도 자동 완성할수 있음 

단락 순서변경 : 드래그해서 마우스로 위치 조정 

   혹은 ATL키 누른후 위아래로 이동 '

 

    -> KEYBOARD SHORTCUTS 에서 다양한 단축키를 확인해봐~

 

10. 주석달기 

 

html 주석 :  단축키값은 Ctrl + K.  Ctrl + U는 기본 명령어로 돌아온 모습입니다.

css 주석 : Ctrl + /

 

HTML에 주석을 추가하는 방법은 다음과 같습니다.

  1. <body>
  2. <h1>This is a main title!</h1>
  3. <!-- This is a comment - the browser ignores it. It won't show up on the user's screen -->
  4. </body>
  5.  

주석은 특별한 <!-- 여는 태그와 --> 닫는 태그를 사용해서 추가됩니다. 렌더링된 페이지가 아닌 소스 코드에서만 볼 수 있고 CSS 코드에 주석을 추가할 수도 있습니다.

  1. p {
  2. font-family: sans-serif; /* Switch to sans-serif instead of serif */
  3. }

CSS에서는 /* */를 통해 주석을 만듭니다. 다시 말하지만 주석을 사용해서 다른 개발자(또는 자신)를 위한 추가 주석을 추가할 수 있습니다. 브라우저는 주석을 무시하므로 페이지 스타일에 영향을 주지 않습니다.

 

주석은 추가 정보를 추가할 뿐만 아니라 사용하지 않는 코드를 "주석 처리"하는 데에도 사용됩니다.

예를 들어, 다른 색상을 테스트하지만 이전에 선택한 색상을 잃지 않으려면 이전 CSS 속성/값 쌍에 주석을 달고 새 색상을 추가할 수 있습니다. 주석 처리된 이전 것은 브라우저에서 무시되지만 주석을 제거하기만 하면 언제든지 다시 돌아갈 수 있습니다.

  1. p {
  2. /* color: red; */
  3. color: green;
  4. }

color: red는 위의 예에서 주석 처리되었습니다. 따라서 브라우저에서 무시되지만 여전히 쉽게 다시 전환할 수 있습니다.

비주얼 스튜디오 코드에는 선택한 줄의 코드 주위에 주석을 빠르게 추가하거나 제거하기 위한 단축키도 있습니다. "Toggle Line Comment" 단축키를 검색하기만 하면 됩니다. 

 

 

11. 요소 하나하나에 스타일을 지정하는걸 인라인 스타일이라고함. 

 

대표적인 인라인 element에는 <a>, <button>, <img>, <span>이 있다

   ** <img> tag 경우 위/아래 margin이 적용된다. 이외 inline elements들은 margin 적용 x

 

 

 

 

 

 

728x90
반응형