1주차 정리 (05/16 ~ 05/20)

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

안녕하세요

1주차 정리 (05/16 ~ 05/20) 본문

프론트엔드 국비교육

1주차 정리 (05/16 ~ 05/20)

sakuraop 2022. 5. 22. 21:23

5월은 하루에 5시간 강의라서 점진적인 적응을 하기에 좋은 것 같습니다.

국비교육 외에도 개인적인 일이나, 운동, 언어 공부도 쉬지 않기 위해 힘내야하는데 제대로 잠을 못 자서 하루 24시간이 온전하게 24시간으로 다가오질 않습니다.

수면 사이클이 엉망이라 아직 많이 피곤하지만 다음 주 부터는 이 사이클도 맞출 수 있도록 열심히 자야겠습니다.

주차별 기록에는 중요한 것, 잊기 쉬운 것, 완전기억으로 만들 수 있을 만한 내용들, 그리고 작업물들을 정리해 복습하기 쉽도록 해야겠습니다.

1주차 노트

[1일차]

-extentions-

Auto Rename Tag (열림 태그와 닫힘 태그를 동시에 수정합니다.)

아래는 개인적으로 필수라고 생각하는 extentions 입니다.

prettier (코드 줄 정리)

ESLint (맞춤법을 검사하여 오류를 찾아줌)

Material Theme (코드에 시각적 효과 추가)

Material Icon Theme (확장자 icon 으로 시각적 효과 추가)

code runner : js 코드 실행결과 출력 (node.js 설치 요구)

UTF-8

자주 쓰는 tag 목록

<h1>Lorem ipsum dolor sit amet. 
<h2>Lorem ipsum dolor sit amet. 

<ul> 

<figure>Lorem ipsum dolor sit amet. 

<em>Lorem ipsum dolor sit amet. 

<section class="box"> 

reset.css

설정 초기화. 중요합니다.

* : all. 모든 것에 적용
inherit : (여기에서는 브라우저가) 본래 가지고 있는 성질을 상속받습니다.
      * {
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
        box-sizing: border-box;
      }
ul, ol 앞의 점과 숫자 없애기
      }
      ul,ol{
          list-style: none;
      }
a 효과 색상 없애기
      a {
        text-decoration: none;
        color: inherit;
      }
strong,em 강조, 기울기 없애기
      strong,em {
          font-style: normal;
      }
줄 간격 줄이기
      body {
          line-height: 1;
      }

[2일차]

배운 내용을 바탕으로 웹페이지의 일부를 따라서 만들어 보았습니다.
nav, div, section, ol, li, h1, h2, p 등등의 올바른 쓰임새는 적응이 되려면 시간이 조금 필요할 것 같습니다.

웹 확대 배율에 따라서 section의 width 가 조절이 됩니다.

pixabay main

jquery를 배우는 이유
리액트를 하게 되면 jquery는 쓸 일이 거의 없으나,
실제로 리액트만으로 개발하는 기업은 적고 95%는 옛날 방식으로 짜여있습니다.

box의 기본성질
0. display : block
1. transparent
2. width : auto, height : auto
3. vertical 옆으로 오는 것을 허용하지 않습니다.

inline의 기본성질
1. transparent
2. width / height 가 없습니다.
3. horizontal 옆으로 오는 것을 허용합니다.

경로 입력 방식입니다.
./ 형제 폴더
../ 부모 폴더
../../ 부모 폴더의 부모 폴더로
index.html 에서 형제 파일로 이동하기 위해서는 파일 이름만 링크하면 됩니다.
다른 폴더 안의 파일로 이동하기 위해서는 아래와 같이 입력하면 됩니다.
./형제폴더이름/파일이름
../부모폴더이름/파일이름
../ 상대적으로 작동하기 때문에 "상대경로"라고 부릅니다.
<a href="../index.html">
http:// 에 등록한 경로를 "절대경로"라고 부릅니다.
<a href=""http://naver.com">box 01

css 스타일은 헤드 안에 적용합니다.
<link rel="stylesheet" href="../css/box01.css" />
</head>

width : 100% 와 auto 의 차이
width : 100%는 (부모)박스를 기준으로 100%입니다. 크기가 변하지 않습니다.
}
.box02 {
  margin-left: 100px;
  width: 100%;
  background: #ff0; /*노란색*/
}
auto 는 상대적입니다. margin-left 로 왼쪽에서 줄어든 만큼 크기가 변합니다.
.box03 {
margin-left: 100px;
background: #0f0; /*녹색*/
}

빛의 삼원색
color:#fff; /*흰색*/
background: #f00;
background: #ff0;
background: #0f0;

red green blue
Full 0 0
Full Full 0
0 Full 0

margin: auto 중요합니다. 가운데로 위치합니다.
홈페이지를 만들 때의 표준 사이즈는 1200px 입니다.
.box00{
    width: 1200px;
    margin: 0 auto;
    background: #333;
    color:#fff; /*흰색*/
}
박스를 가로 중앙으로 위치하기위해서는 magin: 0 auto; 입니다. 기억하세요.

중요한 박스 성질 - box-sizing: border-box;
모든 박스 사이즈에서 border와 padding을 width 안쪽으로 밀어넣습니다.
*{
box-sizing: border-box;
}
.box{
width: 600px;
border: 1px solid #333; // border: 1px 로 solid 스타일로 #333 색상을 부여합니다.
}
border가 더해져 box 사이즈가 600px이 아닌 602px가 되었습니다.
.box02 {
padding: 30px;
background: #f00;
}
padding이 더해져 box 사이즈가 662px가 되었습니다.
이 크기가 늘어나는 문제를 해결하기 위해서 모든 box에 box-sizing: border-box; 를 지정합니다.

margin 겹침 현상
.box{
    margin:30px auto;
    width: 600px;
    border: 1px solid #333;
}
margin : 30px; : 설정대로라면 박스마다 margin이 30px이 되어야 합니다.
따라서 박스가 두 개라면 박스 사이의 margin은 위 아래 더해 총 60px이 되어야 합니다.

하지만 margin은 아래 위로 겹칩니다. 부모 자식간에도 겹칩니다.
결과적으로 박스 사이의 margin이 30px이 됩니다.
margin 사이즈는 한 방향으로만 지정합니다.

글자 tag의 성질
<strong class="box box03">Lorem ipsum dolor sit.</strong>

사이즈를 줄 수 없습니다.
아래 위로 margin padding 이 적용이안됩니다.
좌우로 margin padding 은 적용이 됩니다.

그런데 특이한 성질이 있습니다.

기본적인 글자 성질을 지니고 레이아웃을 차지하지 않음에도 padding 자체는 시각적으로 적용됩니다.

글자 속성(맨 아래의 투명한 블럭 h1)에 padding이 시각적으로 적용된 모습

글자 속성을 가진 tag 들은 기본적으로 height와 width가 없습니다.

하지만 padding은 적용 '된 것 처럼' 보입니다.

'된 것 처럼' 보인다고 표현 한 이유는 위의 붉은색 block 과 겹쳐지는 모습을 볼 수 있기 때문입니다.

실제로 padding이 다른 block 들과 동일한 방식으로 적용이 되었다면 겹쳐지지 않고 아래로 밀려나야 합니다.

이는 버그로 치부하고 조심해야 하는 부분이 아니라, 경우에 따라 활용을 하면 css 효과를 입히는 것이 용이할 것입니다.

display: flex
box를 가로로 배열합니다. auto가 적용됩니다. auto를 통해 사이즈에 맞춰 작아집니다.

inline-block
img는 기본적으로 inline 속성을 가지고 있습니다.
동시에 block의 성질도 지니고 있어 크기를 지정할 수 있습니다. (이를 display :inline-block 이라고 합니다.)

한 contrainer 안의 서로 다른 사이즈의 이미지를 동일하게 만들 수 있습니다.
.basic01 figure {
flex: 1;
}
모든 .basic01안의 figure 는 이미지 크기가 제각각이어도 flex: 1 에 맞춰 크기가 변합니다.

.basic01 {
padding: 100px 0; /*표준사이즈 입니다.*/

[3일차]

.basic .container {

display: flex;

width: 1200px; /*표준 사이즈*/

margin: 0 auto; /*자동으로 채우기*/

}

.basic nav {

margin: 0 0 0 auto; /*중요합니다. nav를 기준 왼쪽(menu01)에 있는 객체와 거리를 두어 양 끝으로 배치합니다. */

}

.header01 {
display: flex;
}

.header02 {
display: flex;
justify-content: center;
}

.header03 {
display: flex;
justify-content: space-between;
}

.header04 {
display: flex;
justify-content: space-between;
}

.header05 {
display: flex;
}

.header05 nav {
margin: 0 0 0 auto;
}

html 제작 표준

github.io
github.io(깃허브 호스팅)를 통해서 개발한 프로젝트를 업로드를 합니다.
github에서 제공하는 서버가 유지되어 포트폴리오로 이용 가능합니다.
트래픽이 많아도 이용가능합니다.
DB는 없기 때문에 서버와 관련하여 등록을 할 수는 없습니다.
파일크기가 20mb 넘으면 업로드 할 수 없습니다.
github.io 만드는 방법
repository 이름을 설정합니다. youngentry.github.io
add a README file 체크합니다.
settings > Pages > 주소로 접속가능합니다.

중요한 속성입니다. contrainer의 표준 형태를 외웁니다.
.basic .container {
  display: flex;
  width: 1200px; /*표준 사이즈*/
  margin: 0 auto; /*자동으로 늘리기*/
}

이미지 다운로드 하는 방법 : f12 > sources > img > 파일찾기

자주 이용하는 sementic tag는 의미를 기억하여 잘 활용합니다.

width: 100%는 부모에서 받아오는 너비만큼 가득 채웁니다.
flex: 1; 빈 공간을 채웁니다.
.basic nav {
  display: flex;
  flex: 1;
  background: yellow;
}

[4일차]

오늘 수업 중 배운 내용으로 구현한 화면입니다.

[close 버튼을 클릭하면 팝업창이 사라집니다.]

[menu 버튼을 클릭하면 X버튼으로 모양이 변하면서 왼쪽에서 메뉴 창이 나타납니다.]

[기존에 만든 css와 semantic tag는 전부 지우고 배운 내용을 기반으로 만들어 본 pixabay 메인화면입니다. 새로운 내용을 배울 때마다 업데이트하기 때문에 스크린샷과는 다른 화면이거나 없는 주소일 수도 있습니다.]

display 속성
display: none; 없앱니다.
display: block; 나타냅니다. box 속성으로 만듭니다.
display: inline-block; inline(가로배열, 띄어쓰기)속성과 box(size)의 속성을 갖습니다.
display: flex;
+
display: inline; 박스의 속성을 없애고 inline 속성으로 만듭니다.(잘 안씁니다.)

position 속성
position: static; 모든 태그는 기본적으로 static 상태입니다. 이후에 배우는 중요한 속성입니다.
position: relative; 기준이 됩니다.
position : absolute;
자신의 좌표(top, right, bottom, left)를 갖습니다.
맨 앞으로 떠오릅니다.
겹치기 위해 이용합니다.
화면 밖으로 나가게 되면 스크롤 바가 생깁니다.
자식에서 빠져버리게 됩니다.
부모를 기준으로 하고 있다면 width 값이 사라져 쪼그라듭니다.
body를 기준으로 변하게 됩니다.
자식의 기준이 될 수 있습니다.
position: fixed;
기준이 없습니다.
화면(벽 포트)을 기준으로 상대적인 위치가 정해집니다.
화면 밖으로이동하여도 스크롤 바가 생기지 않습니다.
맨 앞으로 떠오릅니다.
스크롤을 이동하여도 따라다닙니다.

z-index: ; layout의 순서를 정할 때 이용합니다.

.popup {
    position: absolute;
    top:50%;
    left: 50%;
    width: 450px;
    height: 350px;
    background: red;
}
body를 기준으로 왼쪽 위 꼭짓점이 top: 50%; left: 50%; 에 위치하게 됩니다.

한 가운데로 이동시기키 위해서는 바로 아래의 transform을 이용합니다.

transform: ; 크기가 변하는 것 처럼 보이더라도 layout을 깨지 않습니다.
    transform: translateX(-50%);

transform이 두 번 사용된다면 두 번째 transform이 첫 번째 transform 을 덮어씁니다.
    transform: translateX(-50%);
    transform: translateY(-50%);

올바른 표현은 한 transform에 입력하는 것입니다.
    transform: translateX(-50%) translateY(-50%);

축약형은 다음과 같습니다.
    transform: translate(-50%, -50%);

중요합니다. 팝업창은 이대로 형태를 외웁니다.
.popup {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 350px;
    background: red;
}

자바스크립트를 이용해 close를 누르면 팝업 창이 닫히도록 합니다.
<script>
document.querySelector('.popup button')
</script>
.addEventListener('click', function()) : 이벤트('click')를 실행하면 function()을 실행합니다.
이벤트는 형태가 정해져 있습니다. ('dbclick', 'mouseover', 'scroll', 'hover' 등등 )
<script>
document.querySelector('.popup button').addEventListener('click', function(){})
</script>
선택자로 ".popup"을 선택한 뒤 style.display = "none"; 으로 설정합니다.
    <script>
      document
        .querySelector(".popup button")
        .addEventListener("click", function () {
          console.log("done");
          document.querySelector(".popup").style.display = "none";
        });
    </script>
close button의 'click' 이벤트를 실행하면 팝업 창이 display: none 되어 사라지게 됩니다.
<div class="popup" style="display: none;">
<button>close</button>
</div>

shortcut : ul>li*6>a{menu0$} 
        <li><a href="">menu01</a></li>
        <li><a href="">menu02</a></li>
        <li><a href="">menu03</a></li>
        <li><a href="">menu04</a></li>
        <li><a href="">menu05</a></li>
        <li><a href="">menu06</a></li>

position: fixed; 를 이용해 옆에서 나타나는 모션을 구현합니다.
아주 많이 사용하는 position 기술입니다. 중요합니다.
        <li><a href="">menu06</a></li>
    </ul></nav>
    <div class="mopen">
        <button>열고닫기</button>
    </div>

nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 100vh;
    background: #fff;
}
nav의 position: absolute; 로 인해서 button이 가져렸습니다.

absolute; 속성은 화면을 넘어 레이아웃을 차지할 경우 스크롤 바가 생깁니다.
nav {
    position: absolute;
    top: 0;
    left: 100%;
    width: 500px;
    height: 100vh;
    background: #fff;
}

fixed 속성은 스크롤 바가 생기지 않습니다.
nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 500px;
    height: 100vh;
    background: #fff;
}
클릭했을때 나타나도록 하기
classList.add("on"); 으로 nav에 클래스명을 부여할 수 있습니다. (on/off 형식에는 아래의 toggle을 이용합니다.)
nav.on {
left: 0;
}

toggle 을 활용하면 click 이벤트가 발생할 때 현재 "nav.on" 이라면 .on을 지우고 "nav" 라면 .on을 추가합니다.
      document.querySelector(".mopen").addEventListener("click",
        function () {
          document.querySelector("nav").classList.toggle("on");
        });

  transition: 0.5s; transition을 이용하면 부드럽게 나타나고 사라지는 연출이 가능합니다.
nav {
  position: fixed;
  top: 0;
  left: -500px;
  width: 500px;
  height: 100vh;
  background: #fff;
  transition: 0.5s;
}

span과 같은 inline 속성은 width와 height가 없습니다.
하지만 양쪽에서 방향을 지정하면 width를 지정하지 않아도 사이의 간격 만큼 span이 나타나게 됩니다.
left: 5px;
right: 5px;

주의사항입니다.
.mopen span {
  position: absolute;
  top: 5px
  left: 5px;
  right: 5px;
  height: 3px;
  background: #f00;
}
상위에서 지정된 값( top: 5px )이

.mopen span:nth-child(4) {
bottom: 5px; // top: 5px 로 인해서
}
하위에서 동일한 역할을 가지게 되면 bottom: 5px;은 적용이 안됩니다.

display:none(과 같이 수치가 없는, 중간단계가 없는 속성)은 trasition 적용이 안됩니다.
이를 대신하여 opacity: 0; 을 활용하면 됩니다.
.mopen.on span:nth-child(1) {
opacity: 0;
}

.mopen.on span:nth-child(2) {
transform: rotate(45deg); 
}

this 를 활용하면 event에서 선택한 명령어( document.querySelector(".mopen") )를 축약할 수 있습니다.
document.querySelector(".mopen").addEventListener("click", function () {
        document.querySelector("nav").classList.toggle("on");
        this.classList.toggle("on");
      });

transition은 event와 함께 애니메이션을 줍니다.
keyframes는 자기 스스로 움직입니다. (앞으로 배우게 됩니다.)

[5일차]

js를 적용하는 3가지 방법을 배웠습니다. (head style/ body style/ DOMcontent~)
font-family주소 폰트를 적용하는 방법을 배웠습니다.
가상요소선택자를 배웠습니다. ::after ::before

css 마우스이벤트 hover:를 학습했습니다.
변화를 눈으로 확인하면서 웹을 만들 수 있기 때문에 다른 것보다 재밌게 할 수 있습니다.

[pxxxbay 화면 따라 구현하기. 업데이트 됨에 따라서 스크린샷과 다를 수 있습니다.]

[XEicon주소] CDN(Content Delivery Network) 아이콘을 적용하는 방법을 배웠습니다.

글자 줄바꿈은 <br />입니다.
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
        Libero nemo optio harum sit blanditiis cupiditate explicabo! Magni
        suscipit minima nisi!
      </p>

width 속성과 max-width 속성
width: 100%; 속성은 부모 사이즈를 따라 크기가 커졌다 줄어들었다 변합니다.
max-width: 100%; 크기가 줄어들기는 하나, 이미지의 기본 크기 이상으로는 커지지 않습니다.

이미지 사이 간격이 보일 경우 없앨 수 있습니다.
reset.css로 img 사이의 틈을 지웁니다.
img {
vertical-align: middle;
}

#event figure {} 후손 중에서 찾습니다.
#event>figure {} 자식 중에서만 찾습니다.

서로 다른 사이즈의 이미지가 첫번째 이미지의 크기에 따라서 변합니다. 이미지 레이아웃을 맞출 때 이용합니다.
#event figure {
flex: 1
}

(자바스크립트의 최신문법은 인터넷 익스플로러에서 작동하지 않습니다. gap이 원인이구나 하는 것을 떠올려야 합니다.)

gap은 보통 30px입니다.
#event .container {
gap:30px;
}

hover 마우스를 객체 위로 위치할 때 변화하는 효과를 줄 수 있습니다.
#event .container figure:hover img {
transform: scale(2); /* 2배로 커집니다. */
}

transition은 변화하는 대상(img)에 부여합니다. transform과 헷갈리지 않아야 합니다.
#event img {
transition: 0.5s;
}

#event .container figure:hover img {
transform: scale(2);
}

overflow: hidden; 박스의 사이즈를 넘어서는 부분은 나타나지 않도록 합니다.
#event figure {
overflow: hidden;
}

무언가를 넣을 예정인 자리에는 "#!"을 입력합니다.
<a href="#!"></a>
depth 는 4 이상이면 좋지 않습니다.
#event .container figure a {} XXX
#event figure a {} OOO

글자를 한 가운데로 배열하기 위해서 margin을 이용하면 글자의 크기에 따라 양 옆의 사이즈가 달라지게 될 수 있습니다. ( "WWW a 123") a를 기준으로 양 옆의 글자 수는 3글자 이지만 길이가 다르기 때문에 a는 한 가운데로 오지 않게 됩니다.
#event figure a {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 30px;
}

absolute는 기준을 잡아주지 않으면 body가 기준이 됩니다.
#event figure a {
  position: absolute;
  top: 0;
  left: 0;
}

만일 figure를 """기준"""으로 만들고 싶다면 figure에 position: relative; 속성을 주면 됩니다.
#event figure {
position: relative;
}

#event figure a {
position: absolute;
top: 0;
left: 0;
}

more가 나타나는 연출을 합니다.
#event figure {
  position: relative;
  flex: 1;
  overflow: hidden; /* 크기를 벗어나면 사라지게 합니다. */
}

#event figure a {
  position: absolute;
  top: -40px; /* -40px만큼 위로 이동시키면 overflow: hidden 속성으로 인해 보이지 않게 됩니다. */
  left: 0;
  padding: 10px 30px;
  background: #333;
  color: #fff;
  transition: 0.2s; /* 부드럽게 나타나는 연출을 합니다. */
}
#event figure:hover a {
  top: 0; /* 마우스를 hover하면 more가 나타납니다. */
}

가상요소선택자를 통해 css로 box를 만들 수 있습니다. ::after ::before
div 빈 박스로 막대나 빈 박스 들을 만드는 것은 웹 표준에 어긋납니다.
        <h2>
        < 이 곳은 before 입니다. >
            Lorem ipsum dolor sit amet.
        < 이 곳은 after 입니다. >
        </h2>
#event h2::after {
  content: "'amet.' 뒤에 나타나기";
}

h2 양 옆에 붉은색 선을 가로로 만들 수도 있습니다. before, after를 함께 이용합니다.

#event h2::before {
  content: "";
  display: inline-block;
  width: 100px;
  height: 1px;
  background: #f00;
  margin: 0 10px;
  vertical-align: middle;
}
#event h2::after {
  content: "";
  display: inline-block;
  width: 100px;
  height: 1px;
  background: #f00;
  margin: 0 10px;
  vertical-align: middle; /* vertical-align 속성으로 한 가운데로 위치합니다. */
}

vertical-align의 기준

bottom : 레이아웃

top : 레이아웃

middle : top-bottom의 한 가운데입니다.

baseline : 글자의 바닥이 기준입니다.

CDN(Content Delivery Network)은 지리적으로 분산된 여러 개의 서버입니다.
웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높입니다.
무료로 어디에서나 이용가능한 소스로 이해하면 됩니다.

font를 적용하는 방법입니다. (font는 한 가지 또는 두 가지만 씁니다.)

[https://fonts.google.com/] 주소로 이동합니다. >

trending 순으로 정렬되어 있습니다. 많이 이용하는 폰트를 우선하여 이용합니다. (Noto Sans가 인기가 많습니다.)
font-weight는 100 300 400 500 700 900 등 정해져 있습니다. + 를 눌러 스타일을 추가합니다. >

@import를 체크합니다. <style> </style> 사이의 @import를 복사합니다. >

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'

css의 가장 위에 붙여넣습니다. >

body에 font-family를 적용시킵니다. >

body {
font-family: "Noto Sans KR", sans-serif;
}
font-size는 홀수일 때 가독성이 좋습니다. 중요합니다. 14px은 반드시 피합니다.

icon을 적용하는 방법입니다.

[https://xpressengine.github.io/XEIcon/started.html] 주소로 이동합니다. >
//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css
위의 코드를 복사합니다. >

css의 가장 처음에 다음과 같이 입력합니다. >
@import url(https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css')

icon을 이용하기 위해서는 <i>tag를 이용합니다. >
<h2><i class="xi-bars"></i>Lorem ipsum dolor sit amet.</h2>
아이콘의 class="" 클래스명이 아이콘을 결정합니다.

아이콘은 inline-block 입니다.
#event i {
    background: #333;
    color: #fff;
    padding: 10px;
    border-radius: 50%; /* 테두리를 둥글게 만듭니다. */
}

미묘하게 높이가 틀려있다면 vertical-align: middle;을 적용합니다.

#event i {
  background: #333;
  color: #fff;
  padding: 10px;
  vertical-align: middle;
  border-radius: 50%;
}

position: static; 으로 되돌리는 과정은 중요합니다.

다른 레이아웃에 간섭하지 않는 absolute는 공간을 차지하지 않습니다.
경우에 따라 공간을 차지하도록 해야합니다. static은 공간을 차지합니다.

width는 auto와 100%인 경우를 잘 구분해야합니다.

vscode 코드입력창 오른쪽의 코드 작게 보기 없애는 법

settings > editor.minimap.enabled 체크해제합니다.

'프론트엔드 국비교육' 카테고리의 다른 글

5월24일 7일차 - 헤더 메뉴 구현하기, 슬라이드 활용하기 (0)	2022.05.24
5월23일 6일차 - slick 슬라이드 구현, 3단 이미지 코딩 (0)	2022.05.23
5월20일 5일차 - 마우스이벤트 hover, font, icon (0)	2022.05.20
5월19일 4일차 - popup창 구현 (jquery) (0)	2022.05.19
5월18일 3일차 - navigation bar (box 강의 semantic tag 기억하기) (0)	2022.05.18

'프론트엔드 국비교육' Related Articles

안녕하세요

1주차 정리 (05/16 ~ 05/20) 본문

1주차 정리 (05/16 ~ 05/20)

-extentions-

'프론트엔드 국비교육' 카테고리의 다른 글

티스토리툴바