지금부터는 리스트라는 새로운 개념을 배워볼 것이다.

리스트는 크게 대단한 것이 아니다.

지금까지 우리가 작성한 코드를 보면 보통 이런 식이다.

 

    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
 

위와 같이 한 줄에 한 태그를 사용한다.

이 표기법이 틀린 것은 아니지만 의미론적으로 따지면 조금 더 생각해볼 여지가 있다.

 

위의 예시를 가지고 리스트를 보여주기 전에 어떤 리스트들이 존재하는지 보여주겠다.

첫 번째는 순서가 있음을 알리는 리스트 태그 <ol>이다

ol은 ordered list의 줄임말이다.

한글로 하면 정돈된 리스트의 뜻이다.

이는 순서를 내포하는데 바로 예시를 보여주겠다.

 

<body>
    <h1>I am sick</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>

    <ol>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
    </ol>

  </body>

지금부터는 맥락상 필요 없는 부분의 코드는 생략할 것이다.

만약 코드에 변경을 하면 표기할 테니 걱정하지 말도록 하자!

 

위 코드를 보면 <ol>의 사용법이 바로 나와있다.

ordered list 아래에 3개의 list가 존재한다.

이는 부라우저에서 어떻게 나타날까?

 

위의 세 줄의 단락과 같이 한 줄다 한 단어가 있지만 왼쪽을 자세히 보면 숫자가 붙어있다.

각 리스트에 순서와 번호가 붙는것이 마로 <ol>의 역할이자 기능이다.

 

이와 비슷하게 <ul>이 존재하는데 이는 Unordered list의 준말이다.

정돈되지 않은 리스트를 뜻하는 게 쉽게 말하자면 <ol>같이 순서가 붙는 리스트가 아니라는 뜻이다.

이것도 예시와 함꼐 살펴보자.

 

  <body>
    <h1>I am sick</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>

    <ol>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
    </ol>

    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Tomatoes</li>
    </ul>
  </body>

<ol>과 <ul>을 모두 작성해보았다.

그리고 브라우저에 어떻게 나타나는지 비교해보자.

 

 

확실히 두 태그는 차이가 있다는 것을 알 수 있다.

 

이렇게 각 단어 또는 문장을 한 뭉탱이로 묶어서 순번을 매기거나 또는 함께 정리하는 것을 리스트라고 한다.

 

 

그렇다면 포스팅을 마치기 전에 독자들에게 과제를 또 주겠다.

 

 <body>
    <h1>I am sick</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
    </ul>
  </body>

<ol>과 <ul>을 우선 모두 지우고, 3개의 단락, <p> 태그 안에 있는 3개의 문장을 리스트로 나타내 보길 바란다.

 

벌써 6일차다! 진도의 5%를 나아간 것을 축하하며 게속 꾸준히 나아가도록 해보자.

 

6일차 본격적인 시작에 앞서 필자는 Live Server를 소개해주고싶다.

우리다 통상적으로 코드를 실행한 상태로 코드 수정을 하면 수정된 코드를 적용된 상태로 보기위해서는 코드를 재시작해야 할 필요가 있다.

개발자는 개으름뱅이다!

귀찮은 일은 전부 컴퓨터에게 떠넘겨야한다.

매번 새로 코드를 실행시키기 번거로운 당신을 위해 소개하는 기능이다!

 

우리가 Prettier을 설치했던 것 처럼 live server을 설치해주자.

 

설치가 되었다면 아무 코드나 실행해보자.

필자는 우리가 저번에 작성했던 full-week를 실행시켜보겠다.

 

full-week.html을 우클릭 후 가장 위에 있는 Open with Live Server를 클릭하면 다를 때와 다름 없이 코드가 실행된다.

 

 

위외같이 평소와 다름 없이 실행됨을 볼 수 있다.

 

차이점은 여기서부터 나타나는데, 필자가 코드의 제목부분을 바꾸고 세이브만 해보겠다

 

바꾼 코드에서 저장만 했을 뿐인데 웹페이지까지 함께 변한 것을 볼 수 있다!

독자들이 이 기능을 이용해서 조금이라도 더 편한 공부가 이루어지기를 기대한다.

 

 

어떤 패급이 사지방키 가지고 반납도 안하네
1시간째 기다리는데 내 시간만 날렸네?
웃긴건 아직까지 안와서 그냥 피아노 치러 왔다
정말 오랜만에 화가 날거같다
하 진짜 뭐라도 부수고싶다

'일기 > 군대 일기' 카테고리의 다른 글

군대 청원휴가 나가는 방법, 절차  (0) 2023.01.21
으악 갑자기 너무 아픈데  (4) 2022.11.25
군대 사지방 좀 가소로움...ㅋㅋ  (4) 2022.11.20
솔직히 군생활 외롭다  (2) 2022.11.19
오늘 유격훈련 끝!  (2) 2022.11.17

저번달? 저저번달 쯤에 군병원이서 골반 양쪽에서 염증이 발견되었다
의사 선생님 말씀으로는 뭐시기 스트링??이라서 고관절 두둑 거리는 소리 나는거라고 했다
분명 소리는 나도 고통은 없을거라 했는데…
지금 너무 아파요ㅠㅠ

그때 당시에는 왼쪽보다 오른쪽이 더 심해서 왼쪽은 방치하고 오른쪽 골반에만 주사치료하고 초음파치료를 격주로 했다
의사 선생님께서 주에 2~3번은 방문하라 하셨지만 그건 현실적으로 불가능하기에 격주로 다녔다
치료를 그나마 받던 오른쪽은 문제 없으나 방치되던 왼쪽 골반이 슬슬 아려오고 걸을때 살짝 살짝 통증을 보이다가 결국 오늘 터져버린거같다

앉아있기 불편하고 서있기 불편하다
고관절과 골반 사이에 무슨 구슬같은게 껴있는 기분이다
이게 뼈를 누르고 압박하는 느낌이다
다리 움직일 때 마다 엉덩이쪽 골반에서 두두두둑 두두두둑 소리가 계속 난다
(의사선생님.. 통증은 없을 거라며요….)
저번주 화요일(11월15일)에는 골반 담당 선생님 안계셔서 다른 선생님께 진료 받으니 말하기를 그냥 인정하고 아프게 살아야 한다고 말을 하지 않나..

정말 만약에 내가 사회에서 이거랑 똑같이 아팠다면 ‘주 3회 병원 다니면서 다 나을 수 있었을까?’라는 생각이 든다….


'일기 > 군대 일기' 카테고리의 다른 글

군대 청원휴가 나가는 방법, 절차  (0) 2023.01.21
진짜 짜증나  (1) 2022.11.27
군대 사지방 좀 가소로움...ㅋㅋ  (4) 2022.11.20
솔직히 군생활 외롭다  (2) 2022.11.19
오늘 유격훈련 끝!  (2) 2022.11.17

우리는 이전 시간들을 통해서 여러 가지 html 파일과 css파일을 만들었다.

이렇게 우리가 css파일과 html파일을 계속 생성하면 어떻게 될까??

 

당연히 파일이 난잡해진다!

예시를 들어보기 위해 잔뜩 만들어봤다.

html과 css가 섞여서 찾기 불편해진다.

이를 해결하기 위해 html은 html만의 폴더에, css는 css만의 폴더에 따로 저장할 것이다.

여러 가지 방법이 있지만 필자는 메인 폴더에 html만 남겨두고 css폴더와 image폴더를 생성 후 지난 시간에 만들었던 파일들을 정리해볼 것이다.

 

images폴더와 styles폴더가 추가됨

 

이렇게 새로운 폴더를 만들고 아래 파일들을 드래그해 넣어주기만 하면 된다.

 

정말 깔끔하게 정리가 되었다.

 

그런데, 이 상태로 index.html을 실행시키면 어떻게 될까??

 

다른 폴더로 옮긴 CSS와 image가 적용되지 않은 것을 볼 수 있다.

 

왜냐하면 파일 위치를 옮겼다는 것은 즉 다른 링크를 가지게 됐다는 것인데 

index.html의 <link> 파트를 보면 css와 image의 링크가 변경되지 않은 것이 보일 것이다.

 

이를 해결하는 방법은 간단하다.

 

컴퓨터를 많이 만자는 사람은 알 것이지만 컴퓨터에게 파일 위치를 지정해주는 표기법이 따로 있다.

style.css를 이용해서 예를 들어 보자.

 

style.css는 메인 폴더 안의 styles 폴더 안에 존재한다.

이 문장을 알고리즘 느낌으로 표현하면 

메인 폴더 -> styles폴더 -> style.css으로 된다.

 

 

컴퓨터에게 이를 지시하는 법은 간단하다.

->를 / 로 바꿔주면 끝이다.

 

그러면 우리는 

<link rel="stylesheet" href="shared.css"에서
<link rel="stylesheet" href="styles/shared.css"로 바꿔주면 된다
 

이제 모든 링크의 주소를 고쳐 쓰고 다시 코드를 실행해보자!

 

<html>
  <head>
    <title>My Daily Challenge</title>
    <link rel="stylesheet" href="styles/shared.css">
    <link rel="stylesheet" href="styles/style.css" />
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <img src="images/challenge.jpg" alt="A trophy">
    <h1>Sia Challenge</h1>
    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
    <p>
      I will acheve this goal by diving into
      <a href="https://www.google.com">more learning resources</a>.
    </p>
  </body>
</html>

 

모든 링크를 수정했다.

 

CSS와 image가 다시 적용되었다.

다시 원래처럼 작동하는 것을 볼 수 있다!

 

이제부터는 이렇게 폴더에 따로 파일을 생성해서 철저히 분류해주면서 공부하겠다.

모두 전 포스팅에서 필자가 냈던 과제를 스스로의 힘으로 잘 풀었기를 진심으로 바란다.

필자의 답안을 공개함으로써 두 번째 진도의 시작을 밟아보자!

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Upcoming Challenges</title>
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>My Upcoming Challenges</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
  </body>
</html>

 

필자 같은 경우는 다음과 같이 body를 작성했다.

여기서 주목할 점은 <a href="index.html"> ~~~ 부분이다

여기서 여러분들은 하이퍼링크에 자신이 작성한 html 파일을 쓴다면 페이지가 그 html 파일을 연다는 것을 알 수 있다!

 

그리고 index.html과 full=week.html을 완전히 연결시켜보겠다.

full-week에서 index.html과의 연결은 마쳤으니

이젠 index.html에서 full-week와 연결시켜주겠다.

다시 index.html 파일로 들어가서 이전에 우리가 구글의 하이터링크를 달았던 곳을 full-week.html로 바꾸고 단락도 살짝 바꾸겠다.

 

<html>
  <head>
    <title>My Daily Challenge</title>
    <link rel="stylesheet" href="style.css" />
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <img src="images/challenge.jpg" alt="A trophy" />
    <h1>Sia Challenge</h1>
    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
    <p>
      Explore the
      <a href="full-week.html">full week</a>.
    </p>
  </body>
</html>

그럼 이제 index와 full-week는 서로 연결되었다!!!

 

다시 full-week.html로 돌아와서 이제 해드와 바디를 다 채웠다.

그렇다면 이제 어떤 작업을 하면 될까?

 

그렇다 바로 CSS코드를 작성해야 한다.

그러면 바로 새로운 CSS파일을 만들어주자!

 

필자는 헷갈리지 않기 위해 full-week.css로 파일을 새로 만들겠다.

full-week.html 파일에 들어있는 태그들을 보자.

body, h1, p, a의 태그가 있다

그러니 필자는 각각의 CSS 코드를 입력해주겠다.

또 동시에 사이트의 통일성을 위해 배경색과 글 폰트 등등을 통일해주겠다.

 

body {
    background-color: rgb(233, 215, 207);
    text-align: center;
    color: rgb(83, 75, 75);
  }
  
  h1 {
    font-family: "Oswal", sans-serif;
  }
  
  p {
    font-family: "Fira Sans", sans-serif;
  }
  
  a {
    font-family: "Fira Sans", sans-serif;
    text-decoration: none;
    color: rgb(167, 1, 78);
  }
  
  a:hover {
    text-decoration: underline;
  }

 

위 코드를 보니 style.css와 겹치는 부분이 정말 많이 보인다.

우리같이 코드를 작성하는 부류의 인간들은 중복되는 코드가 있는 거를 불편히 여기는 경우가 많다 (아니라면 죄송합니다)

하지만 실제로 같은 코드를 여러 번 작성하는 것은 그만큼 공간을 더 차지하기에 기계적으로 비효율적인 것 또한 사실이다.

 

그렇기에 우리는 공유 CSS파일을 이용하겠다.

 

우선 공유 CSS파일을 저장하는 CSS파일을 하나 더 만들자.

필자는 파일 이름을 shared.css로 짓겠다.

 

그런 후 style.css와 full-week의 중복되는 css코드를 찾고 공유 CSS폴더로 옮겨주자.

 

body 부분과 h1의 글꼴, p의 글꼴 a의 모든 부분, a:hover의 모든 부분이 일치한다.

이를 복사해 shared.css 파일에 넣어준 후 중복되는 부분만 지워주자.

 

full-week.css는 아예 다 비웠다.

 

위와 같이 정리할 수 있다!

 

그렇다면 우리는 html에서 CSS를 불러오는 방법을 달리 해줘야 한다.

 

1. 공유 CSS를 불러와서 기본 정보를 모두 받음.

2. 그 html만의 CSS를 불러와서 추가적인 정보를 받음.

 

이런 과정을 거치려면 어찌하면 좋을까?

 

답은 간단하다.

링크를 2번 쓰면 된다

 

[index.html]

대충 shared.css 불러오는 링크

대충 style.css 불러오는 링크

 

[full-week.html]

대충 shared.css 불러오는 링크

대충 full-week.css 불러오는 링크

 

이를 바로 적용해보겠다.

 

<html>
  <head>
    <title>My Daily Challenge</title>
    <link rel="stylesheet" href="shared.css">
    <link rel="stylesheet" href="style.css" />
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <img src="challenge.jpg" alt="A trophy">
    <h1>Sia Challenge</h1>
    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
    <p>
      I will acheve this goal by diving into
      <a href="https://www.google.com">more learning resources</a>.
    </p>
  </body>
</html>

 [index.html의 코드]

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Upcoming Challenges</title>
    <link rel="stylesheet" href="shared.css">
    <link rel="stylesheet" href="full-week.css">
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>My Upcoming Challenges</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
  </body>
</html>

 [full-week.html]의 코드

 

이렇게 여러 개의 html 파일과 css코드를 만들고 공유 css파일을 만드는 것까지 해봤다!

 

모두 연습을 개을리 하지 않고 꾸준히 자신의 목표를 향해 나아가기를 진심으로 바란다!!

오늘은 재목 그대로 두 번째 HTML 파일을 추가해보겠다.

두 번째 HTML 파일이 존재하는 이유가 무엇일까?

우리가 흔히 다른 사이트를 사용해보면 알 것이다.

가장 흔한 쿠O 을 예시로 들어보자.

쿠O에는 메인 화면, 상품을 진열하는 화면, 각 상품별 화면, 구매 화면, 개인정보 보는 화면 등등 많은 페이지가 존재한다.

일방적으로 한 페이지당 하나의 HTML 파일이 필요하다고 보면 된다.

그렇기에 여러 기능을 추가하기 위해서는 두개 이상의 HTML 파일을 추가하는 것은 거의 필수라고 볼 수 있다.

 

파일 추가하는 방법은 간단하다!

비주얼 스튜디오 코드에서 파일 추가버튼을 누르고 이름을 지어주면 된다.

필자는 full-week.html로 파일을 추가했다.

 

오늘 비주얼 스튜디오의 매우 꿀팁을 알려주겠다!

full-week.html 파일을 열면 빈 화면이 뜰 것이다.

여기서! 를 입력하고 엔터를 클릭하면 

아래와 같이 기본 틀을 자동으로 만들어준다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

처음 이 기본 뼈대를 보면 아무것도 모르겠지만

앞서 공부했던 우리는 어느 정도 틀이 보인다.

그럼에도 불구하고 아직 모르는 것이 보이지만 간단히 설명하겠다.

 

가장 위의 <!DOCTYPE html>은 지금 사용하는 html의 버전을 뜻한다.

html은 어느날 뿅! 생긴 것이 아니라 역사적으로 여러 버전이 출시되면서 지금 버전에 이르렀다,

우리가 최신 html을 사용한다는 것을 알려주는 역할을 한다.

 

두 번째로 <html lang="en">인데, 눈치가 빠른 사람은 바로 삘이 왔을 것이다.

바로 html에서 사용하는 언어가 영어입니다! 라고 알려주는 역할을 한다. (참고로 한국어는 kr을 쓴다)

 

<head> 바로 아래 있는 meta는 아직 배우지 않았으니 살짝 지워주자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이제 우리에게 익숙한 모습이 나왔다.

title은 사이트의 제목이라고 기억하고 있는가?!

그렇다면 바로~ 바꿔주는 작업을 해주자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Upcoming Challenges</title>
</head>
<body>
    
</body>
</html>

 

 

그 다음에는 우리가 공부하던 index.html에서 사용하는 글꼴을 복사해서 붙여 넣어주자.

왜냐하면 full-week.html 안에는 글꼴에 대한 주소가 없기 때문이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Upcoming Challenges</title>
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
</head>
<body>
    
</body>
</html>

제목을 넣고 글꼴만 추가했을 뿐인데 뭔가 많이 한 것 같이 보인다.

 

이제 body 값을 추가해주겠다.

 

다만 바로 보여주지 않을 것이다.

 

오늘 포스팅에서 처음으로 여러분들이 연습할 수 있게 과제를 주겠다.

<body> 안에 넣을 값들을 알려주고 한번 스스로 작성해보기를 바란다.

 

다만 너무 어렵지 않게 기본 틀은 줄 것이다.

 

<body>

    제목

    index.html로 가는 하이퍼링크

    문단 1

    문단 2

    문단 3

</body>

 

여러분이 스스로 생각할 기회를 주는 것이다.

그러니 최대한 index.html 파일을 보지 않고 body를 채워보기를 바란다!

 

다음 포스팅에서 바로 답안지 공개와 함께 다음 진도를 나가보겠다.

 

challenge.jpg
0.03MB

공부 시작하기에 앞서 위 이미지를 다운로드한 후 자신의 폴더 안에 넣기를 바란다!

 

지난 시간에 글꼴을 다루는 법을 배웠다.

필자는 블로그 포스팅 후 새로운 글자를 추가해서 지난글과는 코드가 살짝 다를 수 있다는 점을 염두에 두어주면 좋겠다!

 

<html>
  <head>
    <title>My Daily Challenge</title>
    <link rel="stylesheet" href="style.css" />
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Sia Challenge</h1>
    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
    <p>
      I will acheve this goal by diving into
      <a href="https://www.google.com">more learning resources</a>.
    </p>
  </body>
</html>

<지난 시간과는 살짝 다른 HTML코드 (글꼴 코드만 추가되었음)>

 

h1 {
    font-family: "Oswal", sans-serif;
    text-align: center;
    color: rgb(255, 251, 0);
  }
  
  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(170, 96, 83);
    font-size: 59px;
    font-weight: bold;
  }

<p태그의 글꼴만 수정되었음>

 

그러면 지금부터 우리의 사이트에 이미지를 사용하는 방법을 알아볼 것이다!

우선 다운로드 받은 이미지가 html과 같은 파일 안에 들어있어야 한다.

 

본격적으로 이미지를 삽입하는 작업에 앞서 우리가 올릴 이미지는 사이트에 들어가 직접 우리 눈에 보이는 시각적 콘텐츠이다.

그렇다면 이미지를 담당하는 태그는 <body>안에 들어가야 한다.

이미지의 삽입을 지시하는 태그는 <img>이다

이는 <link>와 비슷한 점이 있는데 바로 닫는 태그가 없다는 점이다.

이과같이 파일의 위치를 나타내는 태그는 공통적으로 닫는 태그가 존재하지 않는다.

 

html 코드 창에서 img 입력 후 Tab을 누르면 img태그의 기본 뼈대가 나타난다.

<img src="" alt=""> 의 형태를 가진다

src는 이미지 파일이 존재하는 위치를 입력해주면 된다.

alt는 만약 오프라인 상태등의 이유로 이미지 로딩에 실패할 때 이미지를 대체할 텍스트를 의미한다.

그러면 각각에 맞게 내용을 작성해보겠다.

<img src="challenge.jpg" alt="A trophy" />

src값에는 이미지의 이름만 작성했다 (같은 폴더 안에 있으니 다른 폴더로 찾아갈 필요가 없다)

alt값에는 이미지 모양이 트로피니까 A trophy로 입력했다.

 

그렇다면 한번 실행시켜보자.

<html>
  <head>
    <title>My Daily Challenge</title>
    <link rel="stylesheet" href="style.css" />
    <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=Oswald&display=swap"
      rel="stylesheet"
    />
    <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@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <img src="challenge.jpg" alt="A trophy">
    <h1>Sia Challenge</h1>
    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
    <p>
      I will acheve this goal by diving into
      <a href="https://www.google.com">more learning resources</a>.
    </p>
  </body>
</html>

<body> 바로 아래 <img>가 추가 되었다.

 

이미지가 추가되었다!

이미지가 추가되었다!

하지만 정말 엉성하고 보기 불편하게 이미지만 툭! 던져 졌다.

필자는 이 디자인이 매우 불편하니 자세를  고쳐 앉음에서 끝내지 않고 이미지 스타일을 바꿔주겠다.

그러기 위해선 img태그의 CSS 코드를 작성해줘야 한다.

 

이미지의 위치를 바꿔주는 작업은 조금 복잡하니 이미지의 크기부터 바꿔보겠다.

그러기 위해서는 CSS 코드에서 이미지의 가로 값과 새로 값만 바꿔주면 된다

 

h1 {
    font-family: "Oswal", sans-serif;
    text-align: center;
    color: rgb(255, 251, 0);
  }
  
  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(170, 96, 83);
    font-size: 59px;
    font-weight: bold;
  }

  img {
    width: 200px;
    height: 200px;
  }

<img>의 CSS 코드가 작성된 것을 볼 수 있다.

다시 코드를 실행해보자.

 

이미지가 작아졌다.

실제로 이미지가 작아졌다.

필자는 또 네모보다는 동그라미를 더 좋아하니까 이미지 모양을 바꿔주겠다!!

 

h1 {
    font-family: "Oswal", sans-serif;
    text-align: center;
    color: rgb(255, 251, 0);
  }
  
  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(170, 96, 83);
    font-size: 59px;
    font-weight: bold;
  }

  img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
  }

 

border-radius의 값을 (정사각형 기준) 가로 세로의 절반 값으로 입력해주면 원 모양이 된다!

 

둥글어졌다

필자는 바로 가로 세로의 값의 절반이 되면 원이 된다고 주입식 교육을 해버렸다.

만약 이 글을 읽는 독자가 있다면 border-radius에 다양한 값을 넣어보며 어떤 변화가 생기는지 확인 해보길 바란다!

 

이제 이미지를 가운데로 두는 작업을 해야 한다.

이는 지금까지 필자가 기록한 기술 중 가장 어려운 작업이니 정신 바!짝! 차리고 따라오길 바란다.

 

필자는 언젠가 한번 "모든 태그에 대한 CSS 코드를 작성할 수 있다"  라고 글을 쓴 기억이 있다.

그 말은 즉, <body>의 태그에도 CSS코드를 적용할 수 있다.

그러면 한번 생각해보자.

body에 CSS코드를 적용하면 어떻게 될까?

 

3분만 생각하고 스크롤을 내려보자 

 

 

 

 

 

 

 

<body> 태그 속에 있는 모든 <h1>, <p>, <a> 등등의 태그에 영향을 미친다.

예를 들어서 body에 속성 값을 RED로 정했다면 속성값을 적용하지 않은 태그에 대해서는 body의 속성 값이 대입된다.

이렇게 말로만 하면 너무 어려우니 글자 색을 통해 예시를 보여주겠다.

 

body {
  color: rgb(83, 75, 75);
}

h1 {
  font-family: "Oswal", sans-serif;
  text-align: center;
  color: rgb(255, 251, 0);
}

p {
  font-family: "Fira Sans", sans-serif;
  text-align: center;
}

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

a:hover {
  text-decoration: underline;
}

#todays-challenge {
  color: rgb(170, 96, 83);
  font-size: 59px;
  font-weight: bold;
}

img {
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

body태그는 통상적으로 가장 위에 쓰기에 필자도 가장 위에 추가하였다.

body에 color값을 작성하고 p의 color값을 제거하였다.

그러면 어떻게 될까?

 

 

위 사진과 달리진 것이 없다

color값을 부여받은 h1은 부여받은 색의 글을 띄고 color값을 부여받지 못한 p는 body에서 입력된 색상을 따라간다.

 

조금만 더 나아가 body에 배경색과 각 문단 간의 간격을 설정하는 요소도 넣어보고 모둔 태그에 동통적으로 들어있는 text-align: center값도 다 지우고 body에 넣어주겠다.

 

body {
  color: rgb(83, 75, 75);
  text-align: center;
  background-color: rgb(233, 215, 207);
  margin: 50px;
}

h1 {
  font-family: "Oswal", sans-serif;
  color: rgb(255, 251, 0);
}

p {
  font-family: "Fira Sans", sans-serif;
}

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

a:hover {
  text-decoration: underline;
}

#todays-challenge {
  color: rgb(170, 96, 83);
  font-size: 59px;
  font-weight: bold;
}

img {
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

background-color은 말 그대로 사이트 배경의 색을 의미한다.

text-align은 텍스트 정렬을, margin은 문단간의 간격을 의미한다.

한번 코드를 다시 실행시켜보겠다.

이미지가 가운데로 이동되었다.

위와 같이 아주 훌륭하게 잘 반영되었고 이미지가 가운데로 이동된 것을 볼 수 있다.

 

그러면 이런 질문을 하는 사람이 생길 수 있다.

"엥! body에 굳이 text-align을 넣어야 해?? img안에 text-align을 넣으면 안 될까?"

라고 생각할 수 있다.

하지만 이는 틀렸다

 

왜냐하면 text-align은 태그 사이의 있는 값에만 적용되는 값이다.

이게 무슨 상관이냐 할 수 있지만 

img태그에는 닫는 태그가 없기에 태그 사이 값이라는 개념 자체가 없다.

그렇기에 굳이굳이 body에 text-align을 넣어야 한다.

이는 명백히 body라는 열고 닫는 태그 안에 존재하는 img에게 영향을 주기 때문이다.

 

오늘 수업은 매우 어려웠을 것이라 생각한다.잘 복습하고 자주 연습하는 습관을 가졌으면 좋겠다.

 

모두 포기하지 말기를 바란다.포기하는 건 한 순간이지만 후회하는 건 남은 일생동안 계속될 지어니...

+ Recent posts