fe_d5nghyun.log https://velog.io/ FE개발자로 가보자. Mon, 25 Jul 2022 18:24:33 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed fe_d5nghyun.log https://velog.velcdn.com/images/fe_d5nghyun/profile/a353a4ee-332b-4cfe-845e-87927b0a139c/social_profile.png https://velog.io/ Copyright (C) 2019. fe_d5nghyun.log. All rights reserved. <![CDATA[박스모델과 box-sizing]]> https://velog.io/@fe_d5nghyun/%EB%B0%95%EC%8A%A4%EB%AA%A8%EB%8D%B8%EA%B3%BC-box-sizing https://velog.io/@fe_d5nghyun/%EB%B0%95%EC%8A%A4%EB%AA%A8%EB%8D%B8%EA%B3%BC-box-sizing Mon, 25 Jul 2022 18:24:33 GMT 박스모델이란 ???

html의 각 요소들은 박스형태로 구성하기때문에 레이아웃과 매우 밀접한 관계이다. 그만큼 매우 중요하니 다들 숙지를 해야한다!!!

박스모델의 구성

  • 여백을 나타내는 margin
  • 테두리를 나타내는 border
  • 테두리와 컨텐츠 사이의 여백을 나타내는 padding
  • 컨텐츠

이렇게 말하면 당연히 어려우니까, 그림으로 보시죠 🔥

항상 요소들은 위 그림과같이 박스형태로 된것을 볼 수 있습니다(f12버튼 누르면 개발자도구 열림)

쉽게 생각해서 사람의 몸으로 표현을하자면 뼈는 컨텐츠이고 살과 뼈 사이에 지방(?)이 패딩입니다. 테두리는 살 입니다. 마진은 공기라고 생각하시면 됩니다.(내 몸을 제외한 모든것)

이해가 안돼도 괜찮아요. 실제로 padding이 무엇인지 해보면 감이 오실겁니다. (어차피 margin과 padding 등등 본인이 레이아웃 짜다보면 다시 기초를 보게돼어있어요)

box-sizing 이란 ???

box-sizing은 내가 정한너비가 padding과 border를 포함한 너비인지, 포함하지 않은상태에 너비인지를 정하는 속성이라고 생각하면 이해가 더 쉽다.

box-sizing 속성값

  • content-box (기본값) 컨텐츠를 기준으로 너비를 지정함.
  • border-box 테두리를 기준으로 너비를 지정.
    div {
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 1px solid red;
        box-sizing: content-box; /* 설정 안해도 기본값이다. */
    }

위와 같은 코드가 있다고 가정을 해보면, 우리가 생각한건 너비, 높이가 같은 300px 정사각형 박스가 나와야하지만 box-sizing에 기본값인 컨텐츠를 기준으로 너비를 지정하기때문에 padding값 만큼 더해주어야 합니다.

❗️이때 패딩값을 더할때에는 항상 *2를 해주어야합니다. 패딩과 마진은 상하좌우가 있기때문에 padding: 20px은 상하좌우 모두다 20px씩 주기때문에 width와 height는 340이 됩니다.

만약에 테두리를 기준으로 (border-box)를 사용하게되면 컨텐츠 영역은 260이되고 40px이 패딩값이 됩니다. 박스모델에서보면 컨텐츠 -> 패딩 -> 테두리 -> 마진으로 가기때문입니다.

그래도 이해가 안가시는분들은 이렇게 생각하세요!!!

  • content-box: 내가 설정한 너비에 패딩값 만큼 더해준다.
  • border-box: 내가 설정한 너비가 패딩에 포함이 된다.

처음에는 아 이런거구나 하고만 넘어가도 상관없으니 모를때마다 반복해서 보다보면 어느순간 팍 이해가 될거니 걱정들 안하셔도됩니다!

참고자료

Css 아이콘 제작자: Flat Icons - Flaticon

]]> <![CDATA[Cascading Style Sheet]]> https://velog.io/@fe_d5nghyun/Cascading-Style-Sheet https://velog.io/@fe_d5nghyun/Cascading-Style-Sheet Mon, 18 Jul 2022 08:19:46 GMT Cascading Style Sheet (CSS)

CSS는 Cascading Style Sheet의 약자입니다. Cascading은 계단식을 의미하며, "위에서 아래로 우선순위를 정한다" 라고 생각하시면 됩니다.

중요한건 문서가 위에서 아래로 읽어내려가기때문에 위에있는 코드보다 아래에 위치한 코드가 마지막으로 적용된다는것입니다.

h1 {
    color: red;
}

h1 {
    color: blue;
}

h1 {
    color: yellow;
}

위에 코드를 보면 h1 선택자에 color속성이 3번이나 중첩되어있는데 계단식을 떠올리면서 이해해보시면 맨 처음 h1부분에는 컬러가 레드였다가 맨 마지막 코드인 color: yellow로 최종적으로 적용됩니다.

이건 css파일 안에서만 작동되는것이 아니라,

<!DOCTYPE html>
<html>
<head>
  <title>Cascading Style Sheet</title>
  <link rel="stylesheet" href="./style.css" />
  <link rel="stylesheet" href="./style2.css" />
</head>
</html>

외부링크 방식으로 불러올때에도 마찬가지로 HTML도 위에서 아래로 읽기때문에 style2.css가 최종적으로 적용되는것을 알 수 있습니다.

국비지원이나, 독학이나 부트스트랩이건, 만들어진 템플릿을 수정할 때 잘 안돼서 !important를 사용하는경우가 많은데 !important는 절대적으로 사용하지 마시고(유지보수가 매우힘듬)

" 왜 안되는지에 대해 생각해보시면 좋을것 같습니다. "

CSS문서 자체에서도 생각도 해보아야하고 내가 링크를 건 HTML파일에서도 순서가 잘 맞는지 꼭 생각해보세요 !!

CSS 우선순위

  1. !important
  2. 인라인방식 (HTML태그에다가 style속성 사용하는 것.)
  3. 아이디 선택자
  4. 클래스 선택자
  5. 타입선택자 (태그 선택자)

여기서 말하는 우선순위는 위에 얘기했던거랑은 조금 다릅니다. 위에는 명시도(얼마나 자세하게 선택자를 잡는지)가 같고 중복된 속성에서는 맨 아래에 있는 코드가 적용되는거지만 여기서 얘기하는 CSS 우선순위는 코드읽는거랑 상관이 없습니다.

!important

절대 사용하지마세요, 물론 사용할 때도 있지만 !important를 많이 사용하게되면 나중에 유지보수할때 너무 힘듭니다.

인라인방식

인라인방식도 많이 안씁니다. html은 뼈대를 구성하는용도이지 여기다가 css까지 같이 붙여넣게되면 이것역시 가독성도 떨어지고 파일의 분리가없어서 작업속도도 안나고 유지보수 하기에도 굉장히 힘듭니다. 무엇보다 반응형 웹에서는 어떻게 할 수가 없습니다.

아이디 선택자

한국 에이전시에서는 아이디 선택자를 사용하는걸 거의 본적이 없는데요. 아이디 선택자는 1개 이상 사용할 수 없고 정말 특별할 때 사용하는게 좋습니다. (일반적으로 클래스를 많이 사용합니다.) CSS도 모듈화 방식으로 많이 사용하기에 아이디보다 클래스를 사용하는게 더 좋습니다.

클래스 선택자

클래스는 다양한 확장이 가능합니다. 예를들어 버튼을 만든다고하면, 버튼에대해 사이즈들이 있을것입니다.

button.large {
    width: 300px;
    height: 56px;
}

button.medium {
    width: 200px;
    height: 48px;
}

button.small {
    width: 150px;
    height: 36px;
}

위에 방식처럼 사이즈나, 컬러나 다 다르기때문에 클래스를 사용하게되면 여러개의 확장성 있는 버튼들을 만들 수가 있습니다. 클래스명만 바꾸어주면 되는것이죠. 이런 이유로 클래스를 더 많이 사용합니다.

타입 선택자

타입선택자는 태그 선택자라고 생각하시면 됩니다. 태그 선택자 또한 많이 사용합니다. 클래스를 주지 않게되면 선택자가 많이 겹치게 되기때문에 일반적으로 ul > li a 이런식으로 많이 작성합니다. (명시도를 많이 따집니다.) 에이전시에서는 위에처럼 한줄로 코딩을 많이합니다. 서비스, 플랫폼 회사에서는 여러줄로 코딩을 많이합니다.

이건 장단점이 있기에 내가 속해있는 기업에 컨벤션을 맞춰가는게 좋습니다 :)

한줄 코딩

div { width: 300px; height: 300px; }
div ul { display: flex; }
div ul li { flex: 1; }

여러줄 코딩

.box {
  width: 300px;
  height: 300px;
}

.box__lists {
  display: flex;
}

.box__list {
  flex: 1;
}

참고자료

https://www.flaticon.com/kr/free-icons/css

]]> <![CDATA[CSS 기초]]> https://velog.io/@fe_d5nghyun/CSS-%EA%B8%B0%EC%B4%88 https://velog.io/@fe_d5nghyun/CSS-%EA%B8%B0%EC%B4%88 Sat, 16 Jul 2022 12:26:19 GMT CSS란 ???

css는 CascadingStyleSheet의 약자입니다. Cascading(계단식)처럼 위에서 아래로 스타일이 적용되는 문서라고 이해하시면 됩니다.

위에는 스타일 문서의 작동원리지만, CSS는 html의 뼈대에 디자인을 입혀 가독성을 더 뛰어나게하고, 웹사이트의 분위기를 한층 더 업그레이드 해줍니다. 또한 CSS로 반응형 웹을 만들 수 있습니다.

CSS 문법과 규칙

선택자 { 속성1: 속성값1; 속성2: 속성값2; }

  1. 선택자(html태그)를 적어준다.
  2. 중괄호를 열어준다
  3. 속성 : 속성값; 을 넣어주고
  4. 중괄호를 닫아준다.

❗️여기서 중요한건 속성 :(콜론) 속성값을 넣어준다음에 ;(세미콜론)을 넣어줘야만 합니다. 속성이 하나만 들어가는게 아니라 여러개 들어간상태에서 세미콜론을 빼먹게되면 그 이후에 css(스타일)이 적용이 안됩니다.

CSS 연결방법

인라인 스타일 방식

인라인 스타일은 html 태그에다가 작성하는 방식을 말합니다. 이 방법을 사용하게되면 너무나도 안좋습니다

  1. 유지보수 관리가 힘들다.
  2. 반응형 웹을 만들 수가 없다.
  3. html은 뼈대의 역할이지만 css도 같이 사용하게되면 가독성이 너무 떨어진다.
<!-- 인라인방식
 <h1 style="속성: 속성값;">DH Blog!!!<h1> 
-->
<h1 style="color: red; font-size: 20px; ">DH Blog!!!<h1>

내부 스타일 방식

내부 스타일 방식은 head태그에다가 style태그를 넣어서 사용하는 방식이고, 가볍게 무엇을 만들어볼 때 많이 사용하지만 실제로 작업할때에는 사용하지 않는다.

<!DOCTYPE html>
<html>
<head>
    <title>DH Blog</title>
    <style>
        h1 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>DH BLOG CSS PART</h1>
</body>
</html>

외부링크 방식

외부링크 방식은 무조건적으로 사용한다고 생각하면 좋습니다. 아니 무조건 사용하셔야합니다. 외부링크 방식은 확장자명(.css) 파일을 새로 만들어서 head태그에서 불러오는 방식입니다.

<!DOCTYPE html>
<html>
<head>
    <title>DH Blog</title>
    <link rel="stylesheet" href="CSS 경로" />
    <link rel="stylesheet" href="./css/style.css" />
</head>
<body>
    <h1>DH BLOG CSS PART</h1>
</body>
</html>

혹시나 rel="stylesheet"에서 오타가 나게되면 스타일 문서로 읽질못합니다. 매우 주의하셔야합니다. 아니면 vscode에서 emmet기능을 이용하시는게 좋습니다. (link치고 enter 누르시면 됩니다.)

참고자료

Css 아이콘 제작자: Flat Icons - Flaticon

]]> <![CDATA[폼태그]]> https://velog.io/@fe_d5nghyun/%ED%8F%BC%ED%83%9C%EA%B7%B8 https://velog.io/@fe_d5nghyun/%ED%8F%BC%ED%83%9C%EA%B7%B8 Thu, 14 Jul 2022 16:33:09 GMT 클라이언트와 서버

클라이언트와 서버에 대해 간단하게 한번 살펴보겠습니다.

클라이언트는 웹 브라우저(크롬, 사파리, 엣지 등)을 말합니다. 서버는 서비스를 제공하는 컴퓨터를 말합니다. 클라이언트와 서버는 서로 요청과 응답을 합니다. 웹브라우저를 통해 주소창에 naver.com을 치고 들어갈때 실제 네이버 서버한테 물어봅니다.

웹 사이트 들어갈때

클라이언트: "나 웹 브라우저인데 네이버야 메인페이지좀 줄 수 있어 ???" 서버 : "알겠어 내가 html파일 줄게"

이런식으로 클라이언트가 요청을 하고 서버는 응답을 합니다. 결론은 클라이언트가 서버한테 요청을하고 웹사이트를 다운받는거고, HTML에 들어가는 CSS파일, JS파일, 오디오, 이미지, 비디오 등등 웹사이트에서 보여줘야하는 모든것들을 다운받게 됩니다. 이때 HTML파일을 읽을때 맨 위에서부터 아래로 읽게됩니다.

폼태그란 ?

폼태그는 사용자한테 입력받아 서버로 데이터를 전송하는 태그입니다. 로그인이나, 검색, 회원가입, MBTI 검사 등등에 사용하는것들을 폼태그입니다.

<form method="POST or GET" action="서버로 전달할 URL">

</form>

폼태그의 주요속성

  • method - GET, POST 서버로 데이터를 전송할때의 방식.
  • action - 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함.
  • name - 폼의 이름

GET

GET 방식은 URL 끝에 데이터를 붙여 보내며 데이터가 외부에 노출되어 보안에 취약합니다. 일반적으로 Read(읽을 때)사용합니다.

POST

POST 방식은 지정된 리소스에서 데이터를 처리할 수 있습니다. (추가/수정/삭제 등) 데이터가 외부에 노출되지 않기 때문에 보안상의 이유가 있다면 POST 방식을 사용하는 것이 적절하겠습니다.

⌨️ 사용자 입력을위한 input태그

input태그란 사용자가 입력을 할 수 있는 태그를 말합니다. 로그인할때 예를 들자면 아이디 입력란, 비밀번호 입력란, 로그인하기 버튼이 있습니다. 이러한 입력란과, 로그인하기를 input태그를 사용하여 만들 수 있습니다. 추가적으로 라디오버튼, 체크박스, 제출, 검색등등 다양한 태그들이 많습니다.

❗️input태그는 단일태그입니다!! 이점 유의

<form method="POST" action="/practice">
  <input type="text" />
  <input type="password" />
  <input type="radio" />
  <input type="checkbox" />
  <input type="search" />
  <input type="submit" />
</form>

type

type을 지정하여 원하는 형식을 만들 수 있습니다. 더 많이보려면 https://www.w3schools.com/html/html_form_input_types.asp 참고해주세요.

name 속성

name은 서버로 전달되는 이름을 말합니다. 필수로 적어주어야 인풋에 있는 값을 폼태그를 이용해 서버로 전달됩니다. (서버개발자가 값을 받을 수 있습니다.)

<input type="text" name="id" />

placeholder 속성

placeholder는 힌트를 표시해주는 속성입니다. 이름이 조금 어려워서 그렇지 다들 많이 보셨을겁니다.

11번가 사이트인데 위에처럼 아이디 입력란에 아이디라고 회색으로 텍스트가 있는데요, 저렇게 힌트를 표시해주는것을 placeholder라고 합니다.

<input type="text" name="id" placeholder="아이디." />
<input type="password" name="password" placeholder="비밀번호는 8자~20자" />

autofocus 속성

웹 사이트 들어가자마자 자동으로 입력란에 포커스가되어서 클릭없이 바로 입력 되는것을 말합니다. 로그인페이지로 접속을하면 우리가 아이디쪽에 클릭하지않고 바로 텍스트를 입력하는 경험을 하셨을텐데요, 이렇게 자동으로 포커스되는것을 autofocus라고 합니다.

❗️중복해서 써도 맨처음 적용한 태그 하나만 적용됩니다.

<input type="text" name="id" placeholder="아이디." autofocus />
<input type="password" name="password" placeholder="비밀번호는 8자~20자" />

input타입 submit

submit은 제출하다라는 뜻입니다. submit버튼을 누르면 폼태그에 있는 action값으로 데이터가 전송됩니다. value속성은 버튼의 이름을 지정할때 사용합니다.

<input type="submit" value="버튼이름(마음대로 바꾸세요)" />

실행결과

input타입 라디오와 체크박스

라디오 박스는 하나만 선택이 가능합니다. 즉 복수선택이 안됩니다. 체크박스는 여러개 중복선택이 가능합니다.

라디오박스

라디오박스를 사용할때에는 name값이 같아야하고 value는 달라야합니다! name값이 달라지게되면 라디오박스가 중복선택이 됩니다. 이건 의도와 맞지않는것이니 주의 하셔야합니다.

❗️name값이 달라지거나 안넣게되면 라디오박스가 중복선택이 된다.

<form>
  <h4>성별</h4>
  <span>male</span>
  <input type="radio" name="gender" value="male" />
  <span>female</span>
  <input type="radio" name="gender" value="female" />
</form>

체크박스

체크박스는 중복이 선택가능합니다. 라디오박스와 마찬가지로 name속성값이 같아야하고 value는 달라야합니다!

❗️체크박스도 name값이 같아야하고, value값이 달라야지만 서버로 올바른 값이 전달될 수 있습니다.

<h4>당신의 취미는 ???</h4>
<span>축구</span>
<input type="checkbox" name="hobby" value="soccer" />
<span>노래</span>
<input type="checkbox" name="hobby" value="sing" />
<span>춤</span>
<input type="checkbox" name="hobby" value="dance" />
<span>게임</span>
<input type="checkbox" name="hobby" value="game" />

input태그와 연동하는 label태그

밑에 사진을보면 의뢰자 성명이라는 텍스트를 눌러도 바로밑 입력란에 포커스가 되는 경험을 해본적 있으실겁니다. 이때 텍스트(label태그)와 input태그가 같이 연동이 되어있는겁니다. 사용자 경험을 높이기위해 많이 사용하고 있습니다.

label태그와 input태그를 연동을 시키려면 2가지 방법이 있습니다.

첫번째 연동방법

label과 input태그가 분리되어 있을 때 label태그의 for속성값과 input태그의 id속성값이 같아야합니다.

<label for="값이 같아야함!!">아이디</label>
<input type="text" id="값이 같아야함!!" placeholder="아이디"/>

밑에 코드처럼 같아야합니다.

<label for="user__id">아이디</label>
<input type="text" id="user__id" placeholder="아이디"/>

두번째 연동방법

label태그안에 input 태그가 있을 때 label태그의 for속성을 안넣어줘도되고, input태그의 아이디 속성도 필요가없습니다.

<label>아이디: <input type="text" placeholder="아이디"/></label>

어떠한 방법을 사용해도 상관없습니다. 항상 디자인 시안을보고 결정하시는게 좋고 모르실때에는 두가지 방법 모두 다 써보고 뭐가 더 나은지 선택하시면 됩니다.

간단하게 로그인 만들기

최대한 시멘틱태그를 활용해서 만들것입니다. fielset과 legend태그를 배우지않았지만 예제를 통해서 한번 만들어보도록 하겠습니다. 비슷한 유형으로 table태그의 caption이 있습니다.

  • fielset태그는 폼태그안에 섹션을 말합니다.

  • legend태그는 섹션의 제목을 말합니다.

    <form>
<fieldset> <!-- fielset태그는 폼태그안에 섹션을 말합니다. -->
  <legend>로그인</legend> <!-- legend태그는 섹션의 제목을 말합니다. -->

  <div>
    <label for="id">아이디</label>
    <input type="text" name="id" id="id" placeholder="아이디를 입력하세요." />
  </div>

      <div>
    <label for="pw">비밀번호</label>
    <input type="password" name="pw" id="pw" placeholder="비밀번호를 입력하세요." />
  </div>

  <!-- submit을 누르면 데이터가 서버로 전달되게 하는 버튼입니다 -->
  <!-- value라는 속성을 이용해서 이름을 지어줄 수 있습니다. -->
  <input type="submit" value="로그인" />
</fieldset>
</form>

참고자료

https://mber.tistory.com/44 http://www.tcpschool.com/html-tags/form https://ofcourse.kr/html-course/form-%ED%83%9C%EA%B7%B8 https://www.w3schools.com/html/html_form_input_types.asp

]]> <![CDATA[react 시작하기]]> https://velog.io/@fe_d5nghyun/react-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 https://velog.io/@fe_d5nghyun/react-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 Sun, 10 Jul 2022 14:56:33 GMT Create React App

리액트를 개발하기전에 가장 쉽게 사용하는 방법은 cra(create react app)이다. cra를 사용하게되면 자동적으로 업데이트가 되고, 유지보수도 가능하며 쉽게 시작할 수 있다.

https://create-react-app.dev/

Node js 설치

https://nodejs.org/ko/ 사이트에 들어가서 nodejs를 최신버전으로 설치한다.

npx create-react-app 만들 폴더이름

위 코드를 작성하면 react를 설치할 수 있다.

참고자료

https://create-react-app.dev/

]]> <![CDATA[리액트 사용이유.]]> https://velog.io/@fe_d5nghyun/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%82%AC%EC%9A%A9%EC%9D%B4%EC%9C%A0 https://velog.io/@fe_d5nghyun/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%82%AC%EC%9A%A9%EC%9D%B4%EC%9C%A0 Sun, 10 Jul 2022 13:15:59 GMT 리액트는 자바스크립트의 라이브러리이다. 근데 왜 리액트가 핫한걸까 ???

리액트를 사용하는 이유는 SPA(Single Page Application)이다. 앱처럼 빠르게 동작을한다. 앱은 빠르지만 웹은 페이지 이동을하게되면 서버에 요청을 하게되고 서버는 응답을 해주어야하는데 이런식으로 html파일들을 받는게 느릴수밖에없다.

그렇지만 자바스크립트는 DOM을 조작할 수가 있다. 이 말은 서버한테 요청을 안해도 자바스크립트로 제어를 해서 사용자한테 더 빠르고 매끄럽게 보여줄 수 있다라는 말이다.

그래서 리액트 사용하는 이유는 ???

  • 자바스크립트로 DOM을 조작하기때문에 html파일을 불러오지도않아도 되고, UI 라이브러리이기때문에 순수 자바스크립트로 만든것보다 쉽게 제어가 가능하다.

  • 기존에 바닐라 자바스크립트 작성하게되면 굉장히 복잡하지만 리액트를 사용하면 작은단위로 쪼개어 만드는 Component로 재사용 가능성을 높여 유지보수와 관리를 쉽게 할 수 있다.

  • 가상 돔(Virtual DOM)으로 UI가 업데이트가 되었는지 안되었는지 비교 후에 바뀐부분만 업데이트를 하기때문에 굉장히 빠르다. (소규모에서는 큰차이가 없지만, 대규모 프로젝트에서의 성능차이는 어마무시하다.)

Component

컴포넌트는 html, css, 어떤 로직을 위한 자바스크립트의 결합이다. UI를 구성하는것들을 작은 단위로 쪼갠것을 의미한다. 마치 레고처럼 조립해서 만들어서 하나의 UI를 만들 수 있다. 컴포넌트는 결국 하나의 파일에 모든 html, css, js가 들어간 UI보다는 작은단위로 쪼개어 각각의 역할이 분명하고 명확해지는 방식이다.

물론 재사용성이 리액트, 뷰, 앵귤러에서만 사용하는건 아니다. 재사용성은 모든 프로그래밍에 중요한 개념이다.

]]> <![CDATA[앵커, 이미지, 오디오, 비디오 태그]]> https://velog.io/@fe_d5nghyun/%EC%95%B5%EC%BB%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%98%A4%EB%94%94%EC%98%A4-%EB%B9%84%EB%94%94%EC%98%A4-%ED%83%9C%EA%B7%B8 https://velog.io/@fe_d5nghyun/%EC%95%B5%EC%BB%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%98%A4%EB%94%94%EC%98%A4-%EB%B9%84%EB%94%94%EC%98%A4-%ED%83%9C%EA%B7%B8 Sun, 10 Jul 2022 10:08:34 GMT a(Anchor)태그

html은 Hyper Text Markup Language라고 했다. 여기서 중요한건 Hyper Link를 만드는 태그가 바로 a태그다. anchor에 약자인데, 이 뜻은 '닻을 내리다' 이다. 마치 배가 닻을 걸듯이 "웹 사이트에 링크를 건다, 걸다" 라는뜻으로 앵커태그인것이다. 이런거 알면 또 재미가 있죠 ??? a태그는 다른 웹사이트로 연결해주는 태그라고 생각하면 됩니다.

a태그의 속성

a태그는 링크를 걸때 옵션으로 href 속성을 가진다. href는 hypertext reference의 약자로 HTML의 이름에 걸맞게 이동할 페이지의 링크를 적어주면 a태그로 감싸진 요소를 눌렀을 때 그 페이지로 이동하게 됩니다.

<a href="https://www.naver.com/">네이버 바로가기</a>

저번시간에 배운 속성 = "속성값" 기억날텐데요. href라는 속성을 적고 = 기호를 붙이고 어디로 이동할지 경로를 적어주어야합니다. 현재 우리는 naver로 했습니다. 이제 경로에 대해서 알아야하는데요, 경로에는 절대경로와 상대경로가 있습니다. 일반적으로 웹 사이트를 만들때에는 상대경로를 많이 사용합니다.

절대경로

최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식이다.

상대경로

현재 파일이 존재하는 디렉토리를 기준으로 해당목표 파일까지의 위치를 작성한 경로이다.

위와같이 https://www.naver.com/은 웹에서의 도메인 주소이기때문에 절대경로에 해당한다.

경로 찾아가기

경로를 찾아가기 위해서는 현재위치와 상위위치(현재위치에서 이전폴더) 다음폴더(다음위치)를 알아야한다.

현재위치(디렉토리)는 ./ 를 사용한다. 상위디렉토리는 ../를 사용한다. 현재위치에서 그 다음 디렉토리를 가려면 / 를 사용하면된다.

현재 사진에 보이는 index.html파일에서 about.html을 접근하려면 현재위치(지금은 index.html파일 기준)에서 src라는 디렉토리를 이동하고 그 안에있는 파일인 about.html을 적어주면된다.

<a href="현재위치에서 -> src폴더로 이동을하고 -> about.html을 넣어주면 된다.">소개</a>
<a href="./src/about.html">이렇게 작성하면 된다.</a>

이런식으로 작성하게되면 파일을 연결할 수 있다.

반대로 about.html기준으로 index.html을 연결을하려면 

<a href="현재위치에서 -> 상위폴더(practice 폴더)로 이동을하고 -> index.html을 넣어주면 된다.">소개</a>
<a href="./../index.html">이렇게 작성하면 된다.</a>

현재위치를 나타내는 ./는 적어도되고 안적어도된다. 저같은 경우엔 상위폴더로 올라가야하는거라면 ./를 안적어줍니다.(가독성이 떨어짐) 그래서 다시 고쳐서 써보자면 이런식으로 작성하는게 더 보기좋다.

<a href="../index.html"></a>

가장 중요한 경로에 대해 배웠기때문에 앞으로 배울 img, audio, vedio태그는 공짜라고 생각하면된다.

a태그의 속성

가장많이 사용하는것만 알려주겠다.

<a href="https://www.naver.com/" target="_blank">새창을 열어서 바로가기</a>

target="_blank"는 현재 내 페이지에서 이동을하는게 아니라 새로운 창을 열어서 이동한다. 더 자세한것들은 https://www.w3schools.com/html/html_links.asp 여기서 보길바란다.

img태그

img태그는 image를 넣을때 사용하고 웹 접근성을 위해 의미가있는 이미지 (해당상품)에 대체택스트를 넣어주어야한다.

<img src="이미지경로" alt="대체텍스트" />

img태그에 경로와 a태그의 경로는 똑같다. 단지 src냐 href냐 속성이름의 차이이다. 대체텍스트가 필요한 이유는 이미지가 없을때 글로 보여준다. 그리고 시각장애인들한테는 이미지를 볼 수 없기에 대체텍스트를 읽어준다.

audio, video태그

오디오파일과 비디오파일을 사용할때에 사용한다.

<audio src="오디오경로" controls></audio>
<video src="비디오경로" controls></video>

오디오와 비디오파일은 controls라는 속성만 넣어주면 리모컨처럼 조작할 수 있는 버튼들이 생긴다. 또한 무한루프, 자동재생과 같은 속성들도 있으니 참고해보자. 참고로 속성을 넣었는데 안되는 경우도있지만 비디오와 오디오는 웹 보안적인 문제가 있어서 자동재생하려면 소리를 음소거해야하는 경우가 있다. 안될때에는 구글에다가 검색을 해보자

https://www.w3schools.com/html/html5_video.asp https://www.w3schools.com/html/html5_audio.asp

참고자료

https://velog.io/@ryurbsgks5114/%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C%EC%99%80-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C https://www.w3schools.com/html/html5_video.asp https://www.w3schools.com/html/html5_audio.asp

]]> <![CDATA[목록 태그]]> https://velog.io/@fe_d5nghyun/%EB%AA%A9%EB%A1%9D-%ED%83%9C%EA%B7%B8 https://velog.io/@fe_d5nghyun/%EB%AA%A9%EB%A1%9D-%ED%83%9C%EA%B7%B8 Sun, 10 Jul 2022 08:52:01 GMT 목록태그

목차나 음식에 필요한 재료들 같이 목록이 있는 태그에 사용을한다. 목록태그에는 순서가 있는 목록과 순서가 없는 목록이 있다.

ol태그

ol태그는 ordered list의 약자이고, 순서가 있는 목록을 말한다. 책에서 나오는 목차를 보면 순서가 있다. 이럴때 ol태그를 사용하면 된다. 그 다음에는 li태그를 사용해야한다. list의 약자이다.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

순서가 있는 목록은 사진과같이 번호가 붙는다.

속성이란?

html에서는 속성(Attribute)이라는것이 있다. 내 생각이지만 속성은 태그의 고유한 옵션이라고 생각하면 좋다. 특정태그에만 가능한 옵션인것이다. 그렇기때문에 옵션이 없는 div같은 태그에 속성을 넣어도 당연히 안된다. 처음에는 이러한것들을 헷갈려하니까 조심해야한다. 속성은 html태그에 사용하고 문법은 다음과 같다.

<ol 속성="속성값">

이런 형태인데 속성과 속성값은 문법인것이다. 우리가 없는걸 만들어내면 아무런 작동이 안된다. 그렇기때문에 어떤 태그에 무슨 속성이 있고 어떤 속성값이 있는지 자세하게 확인 할 필요가있다. 말이 좀 길었지만 다시 돌아와서 ol태그에서의 속성은 다음과 같이있다.

영어이긴하지만 괜찮다. 위에 글을 읽어보면 ol태그의 type속성은 목록마커유형을 바꾸는 것이다. 목록마커유형이 기본값으로는 숫자가 붙는것이고, type="A"로 바꿔주면 숫자가 아닌 대문자 알파벳으로 나온다.

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

이렇게 앞에 붙어있는 목록마커유형을 바꿀 수 있다. 사실 저러한 형태들을 사용을 안하기때문에 포스팅에 쓰지말까 고민했지만 일단은 알아두면 좋기에 써봤다.

ul태그

ul태그는 unordered list의 약자이고 순서가 없는 목록을 나타낸다. 위와 마찬가지로 ul태그 안에는 li태그를 사용해야한다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

순서가 없는 목록은 위 사진과같이 점표시로 나온다.

여기서 주의해야할것은 ol태그나 ul태그를 사용할때에 li태그를 써야한다는것이다. ul태그안에 li가 없고 div를 쓰는경우에는 태그에 의미가 이상해진다. 목록태그안에 리스트가 나와야 정상인데 div같이 의미없는 태그를 사용하게되면 리스트가 없게 되는것이다.

이밖에 dl, dt, dd 내용을 정의하는 목록태그가 또 있다. 주로 사전에서 많이 사용을한다. 밑에 참고사이트에서 확인해보면 좋을것이다. 영어여도 겁먹지말고 한번 봐보자!

참고자료

https://www.w3schools.com/html/html_lists_ordered.asp

]]> <![CDATA[텍스트 관련 태그]]> https://velog.io/@fe_d5nghyun/%ED%85%8D%EC%8A%A4%ED%8A%B8-%EA%B4%80%EB%A0%A8-%ED%83%9C%EA%B7%B8 https://velog.io/@fe_d5nghyun/%ED%85%8D%EC%8A%A4%ED%8A%B8-%EA%B4%80%EB%A0%A8-%ED%83%9C%EA%B7%B8 Sat, 09 Jul 2022 16:39:05 GMT 제목을 나타내는 hn태그

hn태그라고 했지만 h는 heading의 약자이고 n은 number를 의미합니다. h1부터 h6까지 있습니다. 한번 코드로 보시죠

<h1>제목태그 입니다.</h1>
<h2>제목태그 입니다.</h2>
<h3>제목태그 입니다.</h3>
<h4>제목태그 입니다.</h4>
<h5>제목태그 입니다.</h5>
<h6>제목태그 입니다.</h6>

이렇게 작성을 해보면 다음과 같이 나옵니다.

우린 여기서 중요한걸 알 수 있습니다. 가장 눈에 띄는건 폰트 사이즈가 바뀌죠, 폰트 사이즈가 바뀐다는건 시각적으로 봤을때 중요도가 달라진다는 얘긴데요. 가장 중요한 제목일수록 h1태그를 사용해야합니다. 그 다음으로 중요한 제목이면 h2태그를 사용하는게 좋죠.

일반적으로는 h1태그는 로고에 많이 쓰입니다. 그리고 h1태그 같은경우에는 중복 안되게 사용하는게 좋습니다.

만약에 가장 중요한제목이 아닌데 h1태그를 쓰게되면 웹 문서의 의미가 맞지않게됩니다. 예를들어 누가봐도 설명글인데 hn태그 사용하는게 올바르지 않다는것이죠.

문단을 나타내는 p태그

paragraph의 약자로 앞글자만 따와서 p태그라고 합니다. 문단태그는 설명글에 많이 씁니다. (문단이면 그냥 사용함)

<p>문단태그입니다.</p>

문단태그는 hn태그와 다르게 폰트가 굵지도않고 폰트사이즈도 작습니다.

strong태그와 b태그

strong태그

strong태그는 말 그대로 중요한 내용을 강조할때 사용합니다. 학교 다녔을때를 떠올리면 선생님들이 교과서에 밑줄이나 형광펜으로 중요한부분 표시하라고 하는데 이때 웹에서는 strong태그를 사용합니다. 태그에 의미에서도 중요하다고 표시를 합니다.

<p>html은 <strong>링크이동</strong>이 가능한 문서다.</p>

이렇게 태그안에 태그를 사용할 수 있습니다. 그리고 strong태그를 사용하게되면 폰트두께가 두꺼워집니다.

b태그

b태그는 bold의 약자입니다. 디자이너분들이라면 잘 아실텐데요. b태그는 단지 디자인적인 요소이기때문에 의미가없습니다.

<p>html은 <b>링크이동</b>이 가능한 문서다.</p>

결과는 위와 동일합니다. 항상 html을 작성할때 결과가 잘나온다고 끝이 아닙니다. 본인이 의미있는 태그를 사용하였는가에 생각을 많이 해보셔야합니다.

strong태그와 b태그의 차이점은 의미가 있냐 없냐의 차이입니다.

em태그와 i태그

em태그

em태그는 emphasis의 약자입니다. 강조라는 뜻이죠. strong태그는 폰트두께가 두꺼웠다면 em태그는 글자를 기울입니다.

<p>강조할때 사용하는 <em>강조</em>태그입니다.</p>

i태그

i태그는 italic의 약자입니다. 이 태그역시 em태그와 동일한 결과가 나오지만, 의미없이 디자인적으로 기울인 태그입니다.

이외의 다른 텍스트 태그

  • small 태그
  • sub 태그
  • sup 태그
  • s 태그
  • 등등...

자주 사용하는것들로 알려드렸지만, 혹시나 더 알고싶으신분들은 https://www.w3schools.com/tags/default.asp 여기 사이트오셔서 보시면됩니다.

참고자료

https://www.w3schools.com/tags/default.asp

]]> <![CDATA[시멘틱 태그]]> https://velog.io/@fe_d5nghyun/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8 https://velog.io/@fe_d5nghyun/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8 Sat, 09 Jul 2022 15:28:08 GMT 시멘틱 태그란 ???

시멘틱은 (의미론적인)이라는 뜻이다. 풀이를 해보자면 의미있는 태그를 말한다. 웹 사이트에서 내용이 잘 나온다고 전부가 아니다. 조금 더 자세히 알아보자면 웹 문서 자체가 의미가 있어야 가치가 있는것이다. 나중에 배울 CSS로 아무리 멋있고, 화려하게 디자인을 해도 문서 자체의 의미가없으면 내용만 있는 껍데기일 뿐이다.

말이 길었지만 다시 돌아와서 시멘틱 태그를 사용하면 무엇이 좋은지 알아보자.

  1. 시각 장애인이 스크린 리더기를 통해 웹 사이트의 구조를 쉽게 파악이 가능하다.
  2. 작업자 입장에서 소스코드를 볼때 파악하기 쉽다(가독성)
  3. 검색엔진최적화(SEO)로 만드는 사이트의 우선순위를 올릴 수 있다.

SEO(검색엔진 최적화: Search Engine Optimization)

SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

주요 시멘틱 태그

1. header 태그

일반적으로 header태그에는 로고와 메뉴를 감싸는 부분을 말한다.

  • 하나 이상의 제목 요소(h1 ~ h6)
  • 로고(logo)나 아이콘(icon)
  • 저자(author) 정보

<header>
  <h1>
    <a>
      Logo
    </a>
  </h1>

  <nav>
    <ul>
      <li>메뉴 1</li>
      <li>메뉴 2</li>
      <li>메뉴 3</li>
    </ul>
  </nav>
</header>

푸터태그에는 회사정보와 관련된 내용이 들어간다.

  • 저자(author) 정보
  • 저작권 정보
  • 연락처
  • 사이트맵(sitemap)
  • 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
  • 연관 페이지 등

3. 메뉴를 나타내는 nav태그

nav태그는 각각의 메뉴들을 묶은것을 말한다

<nav>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</nav>

4. 독립적인 컨텐츠를 나타내는 article태그

블로그의 포스트나 뉴스사이트의 기사처럼 독립된 내용에 사용한다.

  • 포럼(forum) 포스트
  • 블로그 포스트
  • 보도 기사
  • 논평(comment) 등

5. 핵심내용을 나타내는 main태그

메인 컨텐츠(내용)을 정의할때 사용한다.

  • 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다.

의미있는태그(sementic)와 의미없는태그(non-sementic)

  • div와 span태그는(non-sementic) 의미가 없는 태그로 분류가 됩니다.
  • div와 span을 제외하고는 sementic으로 분류가 됩니다.

이외에도 굉장히 많다. W3C SCHOOL 사이트에 가면 다양한 의미있는 태그들을 볼 수 있다. https://www.w3schools.com/html/html5_semantic_elements.asp

참고자료

https://poiemaweb.com/html5-semantic-web http://www.tcpschool.com/html-tags/main

]]> <![CDATA[HTML의 선언문과 기본구조]]> https://velog.io/@fe_d5nghyun/HTML https://velog.io/@fe_d5nghyun/HTML Sat, 09 Jul 2022 14:34:36 GMT Hyper Text Markup Language(HTML)

Hyper Text란 웹페이지에서 다른페이지로 이동 가능한것을 말한다. HTML의 뜻을 풀어보자면 "링크이동이 가능한 언어" 이다.

앞으로 배울목차이다.

  1. HTML의 선언문과 기본구조
  2. 시멘틱태그
  3. 텍스트 관련 태그
  4. 목록 태그
  5. 앵커, 이미지, 오디오, 비디오 태그
  6. 폼태그

1. HTML의 선언문과 기본구조

HTML 선언문

<!DOCTYPE html>
이 문서가 html이라고 알려주는 선언문이다.

HTML 기본구조

<!DOCTYPE html>
<html>
<head>
  // 웹사이트가 해석하는 정보는 여기로!
</head>
<body>
  // 실제 내용을 보여주려면 여기에다가 작성
</body>
</html>

HTML의 기본구조이다.

  1. HTML 문서다 라고 선언해준다.
  2. html의 시작과 끝을 나타내는 html태그를 사용한다.
  3. 웹 사이트가 해석하는 정보를 담는 head태그를 사용한다.
  4. 실제 보여줘야할 내용이 body태그 안에 들어간다.

요즘은 VSCODE나 다른 에디터들에서 emmet이라는 기능때문에 ! + tab을 누르면 자동완성이 되지만 처음 배울때에는 직접 하나하나씩 타이핑하는게 더 좋다, 실제로 퍼블리싱하는 사람들한테 에밋기능을 사용하지말고 작성하라고하면 다들 헷갈려한다. emmet기능에 너무 의존하지는 말자!

]]> <![CDATA[[JS] 변수에 대하여]]> https://velog.io/@fe_d5nghyun/JS-%EB%B3%80%EC%88%98%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC https://velog.io/@fe_d5nghyun/JS-%EB%B3%80%EC%88%98%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC Sun, 12 Jun 2022 17:11:50 GMT 변수

변수는 하나의 값을 지정하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.(입문자들한테 이렇게 말하면 다들 너무 어려워한다 ㅋㅋㅋ..)

나는 처음 배울때 변하는값이 변수다 라고만 생각했다.

변수는 선언단계와 초기화단계가 있다.

  • 선언단계: 변수이름을 등록해서 자바스크립트 엔진에 변수에 존재를 알린다.
  • 초기화단계: 값을 저장하기위한 메모리공간을 확보하고 undefined를 할당해 초기화한다.

변수선언이 런타임(소스코드 실행)이전에 먼저 실행된다. 변수, 함수, 클래스등 선언문들을 코드의 선두로 끌어올려진것처럼 동작하는 특징을 호이스팅이라고한다. 모든 선언문들은 런타임 이전에 실행된다.

변수할당(값의 할당)은 순차적으로 실행되는 시점인 런타임에 실행이된다!

변수선언

변수선언 3가지 방법이 있다. 하나씩 어떤 차이점이 있는지 알아가보자.

  • var (es5)
  • let (es6)
  • const (es6)

문제가 많은 var

  1. 중복선언이 가능하다
  2. 함수레벨 스코프(함수를 기준으로 유효범위)
  3. 변수선언 이전에 undefined를 나타내는 호이스팅.
  4. 전역으로 선언한 전역변수와 전역함수 선언하지않은 변수에 값을 할당하면 window의 프로퍼티가된다.
    var name = 'dongs';
    var name = 'dong'; 

    // 에러가 안난다.

    var x = 5;
    y = 10;
    console.log(window.x) // 5
    console.log(window.y) // 10

    function number(){
      var x = 10;

      console.log(x); // 10
    }

    number();
    console.log(x); // 5

var 대신 let

  1. 중복선언이 안된다.(중복선언시 syntax Error 발생)
  2. 블록레벨 스코프({} 중괄화 기준으로 유효범위)
  3. 호이스팅이 안되는것처럼 동작한다.

let은 호이스팅이 안되는것처럼 동작한다. 안되는것도 아니고 안되는것처럼은 무엇일까 ???

let 키워드로 선언한 변수는 선언단계와 초기화단계가 분리되어 진행된다. 모든 선언문들은 런타임 이전에 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 따라서 변수가 초기화되지않은 상태일때 변수를 접근하려고하면 ReferenceError를 발생시킨다.

스코프의 시작지점과 변수 선언문까지 변수를 참조할 수 없다. 이것을 TDZ(Temporal Dead Zone)일시적 사각지대라고 부른다.

    let name = 'Dongs';
    console.log(name) // Dongs

    if(true){
      /** 
      * 스코프의 시작지점
      * 사이구간을 TDZ라고 한다.
      */
      // console.log(name) ReferenceError

      let name = 'Dong' // 변수 선언문
      console.log(name) // Dong
    }

결론은 let도 호이스팅이 된다.

재할당이 금지된 const

  1. const로 선언한 변수는 선언과 동시에 초기화해야한다.
  2. 블록 레벨 스코프
  3. 재할당이 안된다.
  4. 원시값은 변경이 안된다. (Object는 가능하다)
  5. let과 마찬가지로 호이스팅이 안되는것처럼 동작한다.
const name = 'dongs';
// name = 'Hello'; TypeError Assigment to constant variable

const obj = {
  name: 'Dongs',
}

obj.name = 'Dong'

// 객체는 변경 가능한값이다.
// 위코드는 재할당이 아니라 객체를 변경시킨거다.
console.log(obj)
]]>