본문 바로가기
반응형

분류 전체보기

 (164)
#2. 자바스크립트(javascript) 변수와 console.log # 자바스크립트 변수(variable)에 대해 알아보도록 하겠습니다. # Visual Studio Code 및 Extension 설치 방법
#1. 자바스크립트(Javascript ) async와 defer # Javascript 첫 시간으로 우리가 작성한 Javascript가 어떤 순서로 실행되는지 간단하게 알아보도록 하겠습니다. # async 와 defer 의 차이를 알고 어느 방식이 더 좋은 방식인지 확인해보도록 하겠습니다. # Visual Studio Code 및 Extension 설치 방법 c 의 순서로 바뀌면서 문제가 생길 수 있습니다. 다음 예시는 defer를 사용했을 때의 예시입니다. 이 경우 a, b, c 파일을 모두 다운로드 받고 HTML이 모두 parsing 된 다음부터 순차적으로 javascript를 실행합니다. 이 때문에 사용자들은 빠르게 page를 확인할 수 있고, 순차적으로 javascript가 실행되기 때문에 순서가 바뀔 걱정을 하지 않아도 됩니다. 지금까지 javascript의..
[첫번째 Project] :: 반응형 Nav Bar 만들기 3. # 이번 시간에는 Nav bar를 꾸미고, 크기에 윈도우의 크기에 따라 반응하는 반응형으로 만들어보도록 하겠습니다. # 이 장에서는 Javascript가 일부 사용됩니다. 크게 어렵지 않은 부분이라 쉽게 따라하실 수 있을 거라고 생각합니다. # Visual Studio Code 및 Extension 설치 방법
[첫번째 Project] :: 반응형 Nav Bar 만들기 2. # 오늘은 지난번에 만들었던 HTML에 CSS를 덧붙여 Nav bar를 꾸며보도록 하겠습니다. # CSS에서 색깔을 변수로 사용하는 방법과 Item 배치하는 방법에 대해서 알아보도록 하겠습니다. # Item 배치를 공부하시고 싶은 분은 "FlexBox" 와 "Display & Position" 을 공부해보시기 바랍니다. # Visual Studio Code 및 Extension 설치 방법 1) 현재 상태 지금까지 작성한 HTML을 확인해보면 왼쪽과 같은 모양인 것을 확인할 수 있습니다. 우리는 이제 CSS를 활용해 왼쪽을 오른쪽의 모습으로 바꾸도록 하겠습니다. 2) 전체 HTML 아래 과정을 진행하기 전에 CSS 파일을 HTML에 불러와서 사용해야합니다. 그 방법을 간단히 설명드리도록 하겠습니다. 1. ..
#5. CSS에서 색깔을 변수로 사용하는 방법 # 이번 장에서는 CSS에서 색깔을 변수로 사용하는 방법에 대해 알아보도록 하겠습니다. # CSS를 작성하는데 색깔이 많은 부분에서 사용됩니다. 색의 변경이 필요할 때 하나하나 바꾸는 것이 아닌 # 같은 성질을 가진 색끼리 변수로 묶어서 변경할 수 있습니다. # 비전공자가 이해한 CSS CSS :: 색을 변수로 사용하는 방법 1) 기본 문법 변수명은 앞에 "--"를 붙여주고 뒤에 이름을 붙여줍니다. 적용하고 싶은 부분에 "var()" 함수를 놓고 안에 변수명을 입력해줍니다. 2) 사용 예시 # CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference # CSS reference: https://www.w3schools.com/cs..
[첫번째 Project] :: 반응형 Nav Bar 만들기 1. # 오늘은 "반응형 Nav Bar 만들기 1."으로 HTML을 작성하고, CSS를 적용해보도록 하겠습니다. # 중간에 중요한 내용, 필수적으로 짚어야 할 내용이 있는 경우 따로 작성하도록 하겠습니다. # Visual Studio Code 및 Extension 설치 방법 # 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성 - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다. # Full script in Github :: Dony Noh Project GitHub - SudonNoh/Front-end Contribute to SudonNoh/Front-end development by creating an account on GitHub...
VScode(Visual Studio code) 및 Extension 설치 방법 # 프로젝트 진행에 앞서 Visual Studio code 설치와 유용한 Extension 설치를 진행하도록 하겠습니다. # 비전공자가 진행한 PROJECT Visual Studio 설치 1) 설치 아래 링크로 접속해 컴퓨터 사양에 맞는 Visual Studio code를 설치합니다. 설치 방법은 간단합니다. 동의 후 모든 절차를 예로만 입력하시고, 필요한 사항은 체크 후 설치하시면 됩니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and..
#4. CSS FlexBox(Flexible Box module) 사용법 # 일명 flexbox라고 불리는 Flexible box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. # 이번 장에서는 flexbox의 주요 기능에 대한 내용을 공부해보도록 하겠습니다. # 비전공자가 이해한 CSS Flexbox 일명 flexbox라고 불리는 Flexible Box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. flexbox는 container에 속성값이 존재하고, item들에 각각 속성값을 지정할 수 있습니다. flexbox에는 방향이 존재합니다. main axis(중심축)와 cross axis(반대축) 입니다. cross axis은 mai..
#3. CSS "100%" vs "100vh" 의 차이점 # css를 만들 때 100% 와 100vh 등으로 사이즈를 사용하는 경우가 있습니다. # 이는 반응형 웹을 개발하는데 중요한 부분이기 때문에 짚어보도록 하겠습니다. # 반응형 웹은 tablet, mobile phone, desktop, labtop 등을 구분해 화면을 보여주도록 하는 방법입니다. # 비전공자가 이해한 CSS 100% vs 100vh ! 100%는 부모 태그의 100%를 사용한다는 의미입니다. 만약 부모 태그가 100%가 아니라면 자식 태그를 100%로 설정하더라도 이는 부모 태그 크기의 100%이지 화면의 100%가 아닙니다. 즉, 부모 태그가 화면의 50%라면, 자식 태그를 100%로 설정하더라도 이것은 부모 태그가 지정한 50%를 100% 보여준다는 뜻입니다. 결과적으로 화면의 50..
#2. CSS display 와 position 이해하기 ! # CSS를 활용하는데 가장 중요한 부분은 display와 position 입니다. # content와 box들을 어떻게 배치하고, 보여주는지에 따라 웹 페이지의 가독성이 달라지기 때문입니다. # 같은 content라도 가독성이 좋은 사이트가 더 많은 선택을 받는 것은 당연한 일입니다. # 이번에 배울 내용은 display와 position을 이해해 웹페이지의 가독성을 높이는 방법입니다. # 비전공자가 이해한 CSS 1. Display display 속성에는 inline, inline-block, block 이 세가지 속성값이 존재합니다. 각각 어떻게 다른지 살펴보겠습니다. 1) inline inline은 이미 선헌한 width와 height을 무시하고 content 자체만을 꾸며주는 것을 말합니다. c..
반응형

티스토리툴바