s_yoonj.log https://velog.io/ 기록은 기억을 이긴다 🐾 Tue, 11 Oct 2022 14:07:54 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed s_yoonj.log https://velog.velcdn.com/images/s_yoonj/profile/e827bdc1-3f05-4647-8da5-f9c9ec41d48a/image.jpg https://velog.io/ Copyright (C) 2019. s_yoonj.log. All rights reserved. <![CDATA[HTML의 텍스트 요소]]> https://velog.io/@s_yoonj/HTML%EC%9D%98-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9A%94%EC%86%8C https://velog.io/@s_yoonj/HTML%EC%9D%98-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9A%94%EC%86%8C Tue, 11 Oct 2022 14:07:54 GMT 1. 제목

<h> 태그

  • 제목과 소제목 및 단락을 기술하는 개념

  • 가장 큰 <h1>태그부터 가장 작은 <h6>태그가 있다.

  • 태그의 중요도도 ~6으로 갈수록 낮아짐

  • h1태그의 경우 검색엔진최적화(SEO)에 중요한 요소이므로 꼭 사용하되 가장 중요한 큰제목(대주제)이므로 각 페이지에서 한 번만 사용하는 것이 좋습니다.

  • h태그를 전부 사용할 필요는 없지만 검색엔진이 문서를 분석할때 h2태그도 추출하므로 중요한 키워드를 포함시키는 것이 좋다.

  • h태그의 위 아래로는 약간의 여백이 자동으로 삽입됩니다.


✍🏻입력

<h1>h1의 크기입니다!</h1>
<h2>h2의 크기입니다!</h2>
<h3>h3의 크기입니다!</h3>
<h4>h4의 크기입니다!</h4>
<h5>h5의 크기입니다!</h5>
<h6>h6의 크기입니다!</h6>

💻출력

h1의 크기입니다!

h2의 크기입니다!

h3의 크기입니다!

h4의 크기입니다!

h5의 크기입니다!
h6의 크기입니다!

2. 본문

<p> 태그

  • p태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.
  • p태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다.

<br> 태그

  • 줄 바꿈을 해주는 태그
  • 기본적으로 HTML코드는 가독성 향상을 위해 코드상에서 엔터로 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지않습니다.
  • 그래서 줄바꿈을 하려면 직접 줄 바꿈을 한다는 br태그를 사용해야 합니다.
  • br태그는 닫는태그가 없는 빈 태그입니다.

<hr> 태그

  • 수평 가로 구분선을 만들어주는 태그
  • 단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 사용

<pre> 태그

  • 띄어쓰기나 줄바꿈이 화면에 직접 적용되지않는 HTML코드를 작성한 텍스트 서식 그대로 표현해주는 태그
  • pre 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.

<q> 태그

  • 짧은 잉용구 q태그는 앞뒤에 자동으로 큰따옴표가 붙습니다.

<blockquote> 태그

  • 길이가 긴 인용문은 blockquote태그고 표현하며 인용 부분을 별도의 단락으로 구분하여 나타냅니다.

<figure> 태그

  • figure 태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다.

  • figure 요소의 콘텐츠는 문서의 내용과는 연관성을 가지지만, 해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안 됩니다.

  • figure 태그는 HTML5에서 새롭게 추가된 요소입니다.

<figcaption> 태그

  • figcaption 태그는 figure 요소에 대한 설명을 정의할 때 사용합니다.

  • figcaption 요소는 figure 요소의 첫 번째 자식 요소이거나 마지막 자식 요소로만 위치할 수 있습니다.

  • figure 요소에서 한번만 사용할 수 있습니다.

  • figcaption 태그는 HTML5에서 새롭게 추가된 요소입니다.

✍🏻예제

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

3. 포맷팅

텍스트에 다양한 효과를 주는 태그

<b>, <strong> 태그 : 강조효과

  • b태그는 단순히 화면의 텍스트를 굵게 표현해줌
  • strong 태그는 텍스트를 굵게 표현해주면서 그 내용이 중요하다는 의미도 함께 포함

<i>, <em> 태그 : 이탤릭체

  • i태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 줍니다.

  • em태그는 텍스트를 이탤릭체로 변환해주면서 그 내용이 중요하다는 의미도 함께 포함


📌검색엔진은 strong태그나 em태그를 사용하여 강조된 텍스트를 더 중요하게 인식합니다.

<mark> 태그 : 하이라이팅(highlighting) 효과

✍🏻예제

"이 부분"만 하이라이팅하고 싶어요.

"이 부분"만 하이라이팅하고 싶어요.

<del> 태그 : 삭제(delete) 효과 / 텍스트 중앙에 가로줄

✍🏻예제

"이 부분"을 지운 것처럼 하고 싶어요.

"이 부분"을 지운 것처럼 하고 싶어요.

<ins> 태그 : 삽입 효과 (insert) / 텍스트 밑에 가로줄

✍🏻예제

"밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.

"밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.

<code> 태그

  • 컴퓨터 코드(code)의 일부분을 나타낼 때 사용
  • 컴퓨터 코드 : XML 요소의 이름이나 파일 이름, 컴퓨터 프로그램의 코드, 컴퓨터가 인식할 수 있는 문자열 등
  • ✍🏻예제*
    <code>System.out.println(var);</code>
    System.out.println(var);

<kbd> 태그 : 키보드(keyboard) 입력을 나타낼 때 사용

✍🏻예제

   <p>
   <kbd>ALT</kbd>키와 <kbd>F4</kbd>키를 동시에 누르면
  포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다.
  </p>

ALT키와 F4키를 동시에 누르면 포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다.

<sup>, <sub> 태그 : 위첨자 / sub아래첨자 효과

✍🏻예제

<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>

X2 + Y3 = Z

물을 나타내는 화학식은 H2O 입니다.

4. a태그와 하이퍼링크

  • a태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용

  • a태그는 링크의 목적지를 가리키는 href 속성을 가져야하며, 만약 없다면 다른 속성들도 사용할 수 없습니다.

  • 링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 이것은 target 속성으로 변경할 수 있습니다.

  • 링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다.

    • 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)

    • 방문했던 링크(visited link) : 밑줄, 보라색(purple)

    • 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)

📌a태그의 taget속성

속성값 설명
_blank 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈
_self 링크된 문서를 링크가 위치한 현재 프레임에서 오픈 (기본값 생략가능)
parent 링크된 문서를 현재 프레임의 부모 프레임에서 오픈
top 링크된 문서를 현재 윈도우 전체에서 오픈
프레임 이름 링크된 문서를 명시된 프레임에서 오픈

5. 엔티티(Entity)

  • HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 *문자셋을 엔티티(entity)라고 합니다.

✍🏻문법

&엔티티이름; 또는 &#엔티티숫자;

✍🏻예제

<p> <p>태그는 두 번째로 큰 제목을 나타내는 태그입니다.</p>

<p>&lt;p&gt;태그는 단락을 나타내는 태그입니다.</p>

태그는 두 번째로 큰 제목을 나타내는 태그입니다.

<p>태그는 단락을 나타내는 태그입니다.

  • 위 예제처럼 <p>의 경우 p태그로 인식되어 브라우저상에 보여지지 않는다.
  • 이럴때 태그를 온전히 보여질 수 있도록 사용하는것이 엔티티
  • 엔티티(entity)의 이름은 대소문자를 구분합니다.

대표적인 엔티티

문자 이름 16진수 숫자 설명
&nbsp; &#160; 줄 바꿈 없는 공백
< &lt; &#60; 보다 작은
> &gt; &#62; 보다 큰
& &amp; &#38; AND 기호
" &quot; &#34; 큰따옴표
' &apos; &#39; 작은따옴표

이외에도 악센트나 심볼특수문자(수학 용어, 그리스 문자, 국제 통화 등) 다양하게 제공

6. 문자셋

  • 문자셋이란 하나의 언어권에서 사용하는 언어를 표현하기 위한 모든 문자(활자)의 모임
  • 웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 합니다. 따라서 HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시합니다.
  • ✍🏻예제*
    <!DOCTYPE html>
<html lang="en">
```

문자셋의 종류

현재 사용되는 대표적인 문자셋(character set)

1. ASCII 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.

2. ANSI 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.

3. ISO-8859-1 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.

4. ✅UTF-8 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.

📌 출처

]]> <![CDATA[브라우저의 동작원리]]> https://velog.io/@s_yoonj/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC https://velog.io/@s_yoonj/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC Mon, 10 Oct 2022 11:50:29 GMT 들어가기에 앞서

HTML, CSS, JavaScript 요약

  • HTML 웹문서를 만들기 위해 사용하는 마크업 언어 웹페이지의 뼈대가 되는 부분
  • CSS 마크업 언어의 스타일을 지정해주어 컨텐츠 구조를 꾸며주는 정적 언어 웹의 시각적인 표현을 담당
  • JavaScript 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어 웹 페이지에 기능을 더해 HTML 웹 페이지를 동적이게 만들어줌

CSS의 경우 HTML 문서의 head 영역 안에서 <link> 태그를 통해 연결하거나 <style>태그를 통해 직접 스타일 정보를 정의합니다.

<link href="main.css" rel="stylesheet">

JavaScript의 경우 HTML 문서의 body영역 내에 <script>태그를 사용하여 스크립트 코드를 요소 내부에 직접 명시하거나 src 속성을 사용하여 css파일처럼 외부 스크립트 파일을 참조할 수 있습니다.

<script src="JSscript.js">

브라우저란?

브라우저는 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어

우리가 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지 파이어폭스 등을 브라우저 혹은 웹 브라우저라고 합니다.

브라우저의 주요 기능

브라우저는 서버로부터 데이터를 전송받고, 렌더링 엔진을 사용해 이를 텍스트 및 이미지 등으로 변환을 해줍니다. 해당 데이터는 HTML 코드로 작성되어 있으며, 브라우저는 이러한 HTML코드를 읽고 최종화면을 사용자에게 표시하는 역할을 합니다.

사용자가 선택한 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다.

브라우저의 기본 구조

1. 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 2. 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 3. 렌더링 엔진 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. 4. 통신 HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨. 5. UI 백엔드 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용. 6. 자바스크립트 해석기 자바스크립트 코드를 해석하고 실행. 7. 자료 저장소 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일을 합니다. 브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있습니다.

렌더링 과정

렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 시각적으로 출력되는 과정을 말합니다.

브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행합니다.

  1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다.
  2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
  3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행한다.
  4. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

** 파싱이란?* 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리를 생성하는 일련의 과정을 말한다.

📌출처

]]> <![CDATA[HTML이란 무엇일까? 핵심정리]]> https://velog.io/@s_yoonj/HTML%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC https://velog.io/@s_yoonj/HTML%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC Mon, 10 Oct 2022 10:54:26 GMT 🤔 html이란?

📖정의

HTML이란 Hypertext Markup Language의 약자로 프로그래밍 언어는 아니지만 웹 페이지와 그 내용을 구조화하기 위해 사용하는 마크업 언어입니다. 즉, 웹 브라우저를 통해 사용자에게 보여지는 웹문서를 작성하기 위한 언어입니다.

Hyper Text 웹 페이지를 다른 페이지로 연결하는 링크

웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성되며, 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.

기본구조

1  <!DOCTYPE html>
2  <html>
3    <head>
4      <!-- HEAD 영역 -->
5    </head>
6    <body>
7      <!-- BODY 영역 -->
8    <body>
9  </html>

  • <!DOCTYPE html> : html 문서 타입 명시 (html5)

  • html : 웹페이지의 시작과 끝, 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 (최상위 요소)

    • head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보

      • meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시
      • title

    • body : 웹 브라우저 화면에 나타나는 모든 콘텐츠

요소(Element)

요소의 구조

1  <h1>This is Title!</h1>
    2  <h2>fix you</h2>
    3  <p>
    4  HTML 소개 / 1. HTML은 어떻게 생겼을까
    5  </p>
  • 여는 태그 (opening tag) : <요소의 이름>
  • 닫는 태그 (Closing tag) : </요소의 이름> (여는 태그와 동일한 요소의 이름)
  • 내용 (Content) : 요소의 내용 (실질적으로 보여지는 부분)**
  • 요소 (Element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 합니다.

태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장


빈태그(empty tag)

  • 이미지(image), 수평선(hr), 줄바꿈(br) 등 종료태그 없이 시작태그만을 가지는 태그를 빈태그라고합니다.
  • <img> 태그같은 경우 종료태그는 따로 가지지 않지만 해당 요소의 내용이 끝났다라는 의미로 꺽쇠를 닫기전 (/) 슬래시를 기재해 주기도합니다. 기능상으로는 있어도 없어도 상관없지만 협업에 있어 원활한 소통과 이해를 돕기위해 한가지의 방식으로 통일하여 사용하는 것이 좋습니다.

예시

1  <br>
2  <hr>
3  <img src="http://image.url/images/icon.jpg"/>
4  <meta charset="utf-8">
5  <input type="text" name="name">

<br> </br> 동일하게 작동

📌 일관성 있게 코드 작성하기



요소의 중첩

  • 요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.
  • 이렇게 여러 요소가 중첩될 경우에는 열린 순서의 반대로 닫혀야만 한다.
  • 이렇게 서로의 포함관계(부자관계)를 구분하기 위하여 들여쓰기를 사용한다.

예시

    1  <html>
    2   <head>
    3     <title>요소의 중첩</title>
    5   </head>
    6
    7   <body>
    8     <h1>요소안에 <strong>다른 요소가</strong> 들어 갈 수도 있습니다 </h1>
    9     <ul>
    10       <li>하나</li>
    11      <li>둘</li>
    12      <li>셋</li>
    13    </ul>
    14   </body>
    15  </html>

블록 레벨 요소 vs 인라인 요소

tag가 정의될때 블록인지 인라인인지 정의되어 태어남. 하지만 변경이 가능하다. 법칙에 대한 이야기 (문서의 흐름에 따라 배치)

1️⃣ 블록(Block)

  • 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. (부모가 허용한 최대한의 가로너비)
  • 상자를 아래로 쌓는 것!

2️⃣ 인라인(Inline)

  • 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.
  • 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다.

📌 포함규칙

  • 같은 형태의 다른 요소를 안에 포함할 수 있다. (블록>블록, 인라인>인라인)


  • 대부분의 블록 요소는 다른 인라인 요소도 안에 포함하라 수 있다.


  • ❗️ 인라인 요소는 블록요소를 포함 할 수 없다.



주석 (Comments)

  • 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다.
  • 주석의 목적은 코드에 메모를 추가하거나, 혹은 사용하지 않는 코드를 임시로 처리하기 위함이다.

출처 https://developer.mozilla.org/ko/docs/Web/HTML

]]> <![CDATA[[Git/Github] Git / Github란?]]> https://velog.io/@s_yoonj/GitGithub-Git-Github%EB%9E%80 https://velog.io/@s_yoonj/GitGithub-Git-Github%EB%9E%80 Wed, 28 Sep 2022 19:24:57 GMT Q1. Git이란?

형상관리도구(Configuration Management Tool)중 하나이다.

형상관리도구는 다른말로 버전 관리 시스템이라고도 한다. Git은 프로젝트 소스코드를 효과적으로 관리할 수 있는 시스템이다.

효과적 관리란?

  • 여러 명이 동시에 작업하더라도 문제 없도록 한다.
  • 소프트웨어의 여러 버전을 동시에 관리할 수 있다.
  • 프로젝트 진행의 모든 로그를 볼수 있으며 해당 시점으로 되돌리는 것도 가능하다.

Q2. Git을 사용하는 이유

프로젝트 시 어떤 기능을 빼거나 더하고 고치고 수정하는 과정은 필수! 기능을 되돌리게 할 수도 있고, 서로 다른 기능의 버전을 유지해야 하는 경우도 있다.

코드 관리 측면

  • 변경된 이력확인
  • 이전 이력으로 되돌리기
  • 다른기능의 버전 코드 유지
  • 현재 최종이 어느시점인지 표현할 수 있음

협업의 측면

  • 각 기능별로 분업 후 하나의 코드로 합칠 수 있음
  • 같은 부분을 수정해 문제가 생기는 경우 안내
  • 협업으로 인한 실수 예방
  • 팀원 간의 커뮤니케이션 지원

    Q3. 기반의 서비스

1. Bitbucket https://bitbucket.org/

Atlassian의 제품들과 연계 (Jira : https://www.atlassian.com/software/jira)

2. GitLab https://about.gitlab.com/

설치형 Git → 용량에 대한 비용 절감, 소스코드의 보안이 좋음

3. Github https://github.com/

분산 버전 관리 툴인 깃(Git)를 사용하는 프로젝트를 지원하는 웹호스팅 서비스

]]> <![CDATA[[클론코딩] 클론코딩 어떻게 공부해야할까? ]]> https://velog.io/@s_yoonj/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B3%B5%EB%B6%80%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C https://velog.io/@s_yoonj/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B3%B5%EB%B6%80%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C Mon, 26 Sep 2022 17:52:07 GMT Q1. [클론코딩] 이란?

"클론코딩"은 실제 존재하는 서비스의 코드를 직접 따라 써보면서 배우는 공부 방식이다.

출처 : 노마드코더

Q2. 클론코딩 따라만 쓰는 것 같은데 공부가 되는걸까?

클론코딩을 활용하여 제대로 공부를 하려면 따라"만" 쓰는것은 그저 복사&붙여넣기와 같다.

<제대로 공부하려면✔>

  • 코드를 써내려가면서 왜 이렇게 했을지 한번 더 생각하고, 이해가 가지 않는 부분은 그때그때 구글링을 통해 이해하고 넘어가도록 하자.

  • 강의를 한번 듣고 결과물이 나옴과 동시에 종료가 아닌 다시 반복해보고 응용해서 나만의 프로젝트 만들어보자.

  • 반복해서 들어도 그냥 듣기만 한다면 더욱 빨리 휘발될 수 있다. 강의를 들으면서 공부한 내용을 기록하고 Github 업로드는 습관화 하자.

  • 이후에는 배운내용을 토대로 직접 만들고 싶은 것을 만들어보면서 복습하자.

]]> <![CDATA[실습환경 세팅]]> https://velog.io/@s_yoonj/%EA%B3%B5%EB%B6%80%EA%B8%B0%EB%A1%9D-%EC%8B%A4%EC%8A%B5%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85 https://velog.io/@s_yoonj/%EA%B3%B5%EB%B6%80%EA%B8%B0%EB%A1%9D-%EC%8B%A4%EC%8A%B5%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85 Sun, 01 May 2022 15:46:22 GMT 웹 에디터와 통합개발환경(IDE)

웹 에디터 (편집기)

  • HTML 문법에 맞추어 편리하게 작서할 수 있도록 도와주는 편집기
  • 문법에 따라 색깔, 들여쓰기 등을 구분할 수 있다.
  • 온라인 웹 에디터 : JS Bin / replit / CODEPEN

통합개발환경 (IDE)

  • 통합 개발 환경(Intergrated Development Environment, IDE)
  • 개발을 할때 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록 한다.
    • 코드를 작성하기 위한 소스코드 편집기
    • 작성한 코드를 실행하기 위한 빌더
    • 작성한 코드에 문제가 없는지 체크해주는 디버거
    • 추가적인 기능을 제공하는 플러그인
  • Visual Studio Code (웹 개발 외에 다양한 프로그램 언어 사용가능), IntelliJ, Xcode (아이폰이나 아이패드 등 앱 개발에 최적화 되어있음), Eclipse 등
]]> <![CDATA[웹 표준·접근성·호환성]]> https://velog.io/@s_yoonj/%EC%9B%B9%ED%91%9C%EC%A4%80%EA%B3%BC-%EC%A0%91%EA%B7%BC%EC%84%B1%ED%98%B8%ED%99%98%EC%84%B1 https://velog.io/@s_yoonj/%EC%9B%B9%ED%91%9C%EC%A4%80%EA%B3%BC-%EC%A0%91%EA%B7%BC%EC%84%B1%ED%98%B8%ED%99%98%EC%84%B1 Sat, 30 Apr 2022 20:10:37 GMT 📑웹 표준 (Web Standards)이란?

웹 표준이란 웹에서 사용되는 표준 기술이나 규칙을 의미하며 사용자가 어떤 브라우저나 기기를 사용하더라도 내용을 동일하게 볼수있도록 하는것을 말합니다.
즉, 웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻하며 HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 합니다.

** 크로스 브라우징 ** 한개의 브라우저가 아닌 여러 브라우저에서 동등한정보를 보여주는 것.

  • HTML5 > W3C에서 2014년에 공식 표준화
  • 2019년에 WHATWG (애플, 모질라, 구글, MS)에 의해 HTML Living Standard가 표준화
  • HTML이 표준화 되기 이전에는 익스플로러의 액티브X처럼 독자적인 플러그인이 존재
  • 웹 표준을 준수하여 작성한다면 운영체제, 브라우저마다 의도된 대로 보여지는 웹 페이지 제작 가능

웹 표준을 준수해야하는 이유

국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다.

웹 표준 장점

** 1. 수정 및 운영관리 용이 ** 콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 제어하게 되어 페이지 제작의 부담 감소 및 관리용이

2. 접근성 향상 웹 표준을 이용해 작성한 문서는 다양한 브라우징 환경에 대응이 가능하며 휴대폰, PDA에서도 정상적인 작동 및 장애인 지원용 프로그램에도 도움이 되므로 사용자나 접속 장치의 접근성이 용이

3. 검색엔진 최적화(SEO) 구조화된 웹페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출 될 수 있도록 검색엔진의 검색결과를 최적화

4. File Size 축소, 서버 저장 공간 절약 효율적인 소스 작성은 파일 사이즈와 서버공간을 절약할 수 있으며 동시에 화면표시에 소요되는 시간을 단축

5. 효율적인 마크업 CSS와 HTML문서를 분리하여 제작할 경우 불필요한 마크업이 최소화되어 페이지 로딩속도 향상

6. 호환성 가능 기존 IE브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저 (크롬, 파이어폭스, 사파리, 오페라 등)에서도 작동

📑웹 접근성 (Web Accessibility)

  • 웹 접근성은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킵니다. 장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이
  • 웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리입니다.*

  • 장애를 갖지않은 사람에게 웹 접근성이 주는 이점
    • 작은 화면, 다른 입력 모드 등을 가진 휴대폰, 스마트 워치, 스마트 TV 및 다른 디바이스를 사용하는 사람
    • 나이가 들어감에 따라 기능적 능력이 변한 연로한 사람
    • 팔이 부러지거나 안경을 잃어버려서 "일시적인 장애"를 겪는 사람
    • 느린 인터넷을 사용하거나 제한적이거나 비싼 대역폭을 사용하는 사람
  • 웹 브라우징에 쓰이는 보조과학기술 : 스크린리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등

📑웹 호환성 (Cross Browsing)

  • 웹 브라우저 버전, 종류와 관계없는 웹사이트 접근
  • 웹 표준 준수를 통한 브라우저 호환성 확보
    • HTML, CSS 문법 준수
    • 동작, 레이아우스 플러그인 호환성

📌 출처

]]>