반응형

색상 조합하는 방법이다. 구글에 color picker 라고 치면 여러가지 색을 뽑을 수 있음

 

 

 

 

 

이렇게 #d31414 에 마우스를 갖다 놓으면 색을 조합할 수 있는 창이 뜬다. 

 

 

 

 

 

vscode 에는 자동으로 줄바꿈 서식을 해주는 기능이있다.

이미 설정을 다 했으므로 Shift + Alt + F 를 눌러주면 자동 줄바꿈이 된다.

 

 

<p style="font-size: sans-serif; text-align: center; color: rgb(211, 20, 20)">
  더 많은 학습자료에 도달할것이다.
  <a href="https://www.google.com">클릭하면 구글로 감</a>
</p>

텍스트에 하이퍼링크를 씌어 구글로 이동하는 기능을 만들었다.

<a> 를 앵커라고 부름. 앵커는 다른 요소들 안에서도 중복으로 사용할수 있는 HTML의 요소이다.

 

 

 

 

 

 

인라인 스타일을 사용하지 않을 때(style 속성을 통해) CSS 코드는 일반적으로 다음과 같습니다.

<style>
  h1 {
    font-family: sans-serif;
    text-align: center;
    color: crimson;
  }

  p {
    font-size: sans-serif;
    text-align: center;
    color: rgb(211, 20, 20);
  }
</style>

<h1>
  기웅's 챌린지 7월 18일 화요일
</h1>

<p>개발의 기초를 배우다</p>

<p>
  더 많은 학습자료에 도달할것이다.
  <a href="https://www.google.com">클릭하면 구글로 감</a>
</p>

 

이 코드는 더 읽기 쉽게 형식이 지정되었습니다. 이론적으로 다음과 같이 작성할 수도 있습니다.

  1. p {font-family: sans-serif;text-align: center;}

그러나 물론 이러한 종류의 코드는 이해하고 유지 관리하기가 훨씬 더 어렵기 때문에 일반적으로 더 읽기 쉬운 버전으로 이동합니다.

다음은 염두에 두어야 할 CSS 코드 형식 지정에 대한 몇 가지 규칙입니다.

● 선택자(위의 예에서 p)와 여는 중괄호는 일반적으로 같은 줄에 들어갑니다.

● 그런 다음 한 줄에 하나의 CSS 속성 + 해당 값이 있습니다.

● 모든 줄은 세미콜론으로 끝나야 합니다.

● 줄이 들여쓰기 됩니다("문서 서식" 바로 가기를 통해 자동으로 또는 키보드의 TAB 키를 눌렀기 때문에)

● 닫는 중괄호는 들여쓰기 없이 별도의 줄에 들어갑니다.

 

 

 

html은 어떤 컨텐츠가 주요 시각적 콘텐츠이고 어떤 데이터가 추가 메타데이터인지 명확히 구분함.

 

 

 

 

 

 

 

 

 

지금까지 사용하지 않았지만 나중에 코스에서 보게 될 것은 코드의 "주석"입니다.

개발자는 HTML 또는 CSS 코드에 사람이 읽을 수 있는 추가 주석을 추가할 수 있습니다. 이 주석은 브라우저에서 무시되지만 귀하 또는 다른 개발자가 귀하의 코드를 이해하는 데 도움이 될 수 있습니다.

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>

주석은 특별한 <!-- 여는 태그와 --> 닫는 태그를 사용해서 추가됩니다. 렌더링된 페이지가 아닌 소스 코드에서만 볼 수 있고 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" 단축키를 검색하기만 하면 됩니다.

 

 

 

   a:hover {
        text-decoration: underline;
      } /* 가상의 선택자로, 하이퍼 링크위에 마우스를 올려놓으면 밑줄이 생김.
         Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. */

 

 

 

 

 <!-- 특정 단락에만 스타일을 적용할때는 id를 써야함 -->
    <!-- id 네임을 쓸때는 소문자와 - 만을 쓰자  -->
    <p id="todays-challenge">개발의 기초를 배우다</p>
#todays-challenge {
        color : rgb(170, 96, 83)
     }

특정 단락에만 스타일을 적용하고 싶을때는 이렇게 id를 생성해준다

 

 

 

 

 

 

 

 

 

fonts.google.com 에 들어가면 여러가지 무료 폰트들이 있는데 

오른쪽 중앙에 보이는 링크 주소들을 vscode에 복붙하면 됨.

이것은 css 파일이 아니라 구글 컴퓨터와 연결시켜주는 것임. 

 

 

 

 p {
   /*폴백 폰트란, 해당 서버에서 첫번째 폰트를 불러오지 못할경우 기본값인 폰트를 쓰는것 */
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
    color: rgb(211, 20, 20);
  }

서버 문제 등 글꼴을 불러오는 데 실패할 경우, 

sans-serif 같은 두번째 즉, 기본 폰트를 쓰게 됨. 

저작자표시 비영리 변경금지

'IT > Udemy 웹 개발 100일 과정' 카테고리의 다른 글

[Udemy] 웹 개발 과정 7-8 일차  (0) 2023.07.22
[Udemy] 웹 개발 과정 5-6 일차  (0) 2023.07.22
[Udemy] 웹 개발 과정 1-2 일차 (vscode 커밋 무한로딩 오류)  (0) 2023.07.20

+ Recent posts

티스토리툴바