hy30nq's blog

섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [3일 - 4일차] 본문

Web/100일 코딩 챌린지 - Web Development

섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [3일 - 4일차]

hy30nq 2023. 12. 25. 15:05
728x90

day 3

프론트엔드에서 색을 표현할 수 있는 방법은 다양함 + 색 표현 방식에 있어서 vscode가 도와줌

 

해당 사이트 참고

>> https://github.com/academind/100-days-of-web-development/blob/02-html-css-basics/extra-files/colors.pdf

colors.pdf
0.09MB

 

코드 포맷팅

shortcut -> format document -> option + shift + f 

 

vscode extension 이용하기

prettier - 코드 포맷팅

auto rename tag - 태그명 변경시 마감태그 자동 변경

 

개발자 도구 이용하기

f12 or 검사 

 

링크 추가 

<a href="<연결하고 싶은 사이트 주소>">내용</a>

-> html 요소는 중복 가능함 

 

구조 

html tag 안에 style 추가 -> inline 스타일

-> 단점 : 가독성 떨어짐, 수정시 전부 수정해야함

 

더보기
CSS 코드 서식 [3일차]

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

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

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

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

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

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

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

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

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

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

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



유효한 html document 의 구조

<!DOCTYPE html> // HTML Version

<html>

<head> // Page Metadata

    <title>My Page</title> 

</head>

<body> // Page Content

    <h1>welcome!</h1>

</body>

</html>

 

VScode 단축키

ctrl + z : 되돌리기

tab 키를 자주 사용하자!

맥 기준 

option + up/down : 해당 내용 옮기기

option + up/down + shift : 해당 내용 위 아래로 복사

command + up/down : 최상단 / 최하단 바로가기

추가 >> https://academind.com/tutorials/visual-studio-code-introduction/

 

Visual Studio Code Introduction

Are you looking for a free, cross-platform and highly customizable code editor? Then Visual Studio Code might be what you are looking for so let's explore it in this video!

academind.com

 

코드 주석

더보기

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

개발자는 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" 단축키를 검색하기만 하면 됩니다.

day 4

a:hover : 마우스가 해당 대상 위에 올라갔을 때 표시

 

외부 파일에 css 저장

<link rel="stylesheet" href="/daily-challenge.css" />

css 파일 새로 만들어서 따로 저장 -> 코드의 가독성 up

 

id 만들 때 팁

소문자 사용

띄어쓰기 금지

 

글자 크기

px : Absolute 

rem : Relative

% : Relative

 

글꼴 설정

https://fonts.google.com/

 

Browse Fonts - Google Fonts

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

fonts.google.com

 

구글 폰트에서 가져와서 사용할 수 있다

단, 너무 많은 글꼴을 가져오면 사용자 입장에서는 문제가 발생한다.

 

만약 구글 서버가 해당 글골을 로드하지 못하면 폴백 폰트를 로드하도록 설정

 

오늘 한 코드 

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/daily-challenge.css" />
    <title>My Daily Challenge</title>
  </head>
  <body>
    <h1>techq's challenge for 20231224</h1>
    <!-- html 속성 추가함 -->
    <p id="todays-challenge">
      Learn aoubt the basics of web development - secifically dive into HTML &
      CSS.
    </p>
    <p>
      I'll achieve this goal by diving into
      <a href="https://www.google.com">more learning resources.</a>
    </p>
  </body>
</html>
h1 {
  font-family: "Oswald", sans-serif;
  text-align: center;
  color: red;
}

p {
  font-family: "Fira Sans", sans-serif;
  text-align: center;
  color: rgb(83, 75, 75);
}

a {
  color: rgb(167, 1, 78);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#todays-challenge {
  color: rgb(179, 86, 83);
  font-weight: bold;
  font-size: 52px;
}
728x90

'Web > 100일 코딩 챌린지 - Web Development' 카테고리의 다른 글

섹션 5: 웹사이트 제공(호스팅 & 배포) [11일차]  (0) 2023.12.29
섹션 4: HTML & CSS - 연습과 요약 [9일-10일차]  (0) 2023.12.28
섹션 3: HTML & CSS 자세히 알아보기 [7일 - 8일차]  (0) 2023.12.27
섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [5일차], 섹션 3: HTML & CSS 자세히 알아보기 [6일차]  (1) 2023.12.26
섹션 1: 소개 [1일차], 섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [1일 - 2일차]  (1) 2023.12.24
'Web/100일 코딩 챌린지 - Web Development' Related Articles more