개발자가 되고 싶어서 만든 tistory 개발자가 되고 싶어서 만든 tistory

코딩을 할 때 효과적인 방식은 html은 html파일에만 쓰고 css는 css파일에만 쓰고 자바스크립트는 로직만 처리하게끔 분리하는것이다. 간단한 예시로 어떻게 자바스크립트가 로직을 처리하며 html과 css를 조작할 수 있는지 알아보자. 다음의 html과 javascript 코드가 있다. This worksconst title = document.querySelector("#title"); 여기서 내가 하고싶은건 브라우저에서 클릭이라는 이벤트를 실행할때마다 타이틀의 폰트컬러가 바뀌게 하는 것이다. 이를 실행하기 위해서 필요한건 첫째로 클릭에 대한 새로운 클래스를 선언해주는 거다. h1 { color: #fd79a8; } .clicked { color: #a29bfe; } const CLICKED_CLA..

웹페이지를 보면 자바스크립트의 코드인 javascript:void(0)를 인라인 형태로 사용된 것을 자주 볼 수 있다. 이 코드의 역할은 무엇이고 어떤 경우에 사용되는지 알아보도록 하겠다. 먼저 이 코드는 어디서 볼 수 있을까? 바로 내부링크가 위치한 a 태그의 속성으로 사용된 것을 흔히 보게된다. 예를 들어 아래와 같은 경우이다. 우선 이 코드를 실행하면 어떻게 나타나는지 콘솔창에 입력해보겠다. 그 결과 아래와 같이 나타난다. void(0); // 입력결과는 아래처럼 undefined가 출력됨 undefined 보는 것처럼 undefined를 반환해주는 함수라는 것을 알게되었다. 그렇다면 왜 이 코드를 사용하는 것일까? # void(0)을 사용하는 이유는?위에 결과 보여주는 것처럼 그 이유는 바로 un..

1. javascript 의 이해 자바스크립트는 프론트엔드 개발에서 정적인 웹 문서에 동작을 부여하기 위해 탄생한 언어입니다. 기존에 있던 html css 코드를 바꿀 수 있고, 동적인 웹을 만드는데 필요한 코드가 javascript 이다. javascript 는 웹개발, 리액트 등을 사용해서 하이브리드를 개발하는데도 사용하고 있습니다. 간단한 예시를 보도록 하겠습니다. 자바스크립트가 html 태그를 생성해 준 것이지요. 웹 프론트엔드를 사용할 때 자바스크립트를 활용하는 방법입니다. 자바스크립트를 외부로 연결해서 만들어 보겠습니다.

반응형 웹 메뉴바를 만듭니다. 모바일 폰(576px) 노트북 (992px)을 기준으로 하여 반응형 네비게이션 바를 만들어 봅니다. 미션. 노트북 화면 크기에서는 메뉴를 텍스트 형태로 표시 미션. 모바일 폰 화면크기에서는 메뉴를 햄버거바로 표시 (클릭 시 메뉴표시 등 이벤트는 아직 안함) - html - 홍길동 컴퍼니 소개 포토폴리오 후기 신청하기 문의 - css - *{ margin: 0; padding: 0; box-sizing: border-box; } nav{ margin-top: 2rem; display: flex; flex-direction: row; justify-content: space-between; background-color: black; color: blanchedalmond; p..

flex box를 사용한 레이아웃은 CSS3에서 처음 등장하였고 반응형 웹 제작을 더욱 간편하게 해주는 도구 중 하나입니다. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN 일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주 developer.mozilla.org 선언하기 위해서는 display 속성에 flex를 넣어주면..

css 박스 모델 페이지 요소들은 모두 네모난 박스입니다. 박스에는 padding, border, margin 영역이 존재합니다. padding: 컨텐츠에서 테두리까지의 공간 border: 테두리 margin: 테두리 바깥 공간 css 레이아웃 크게 두가지 css 속성으로 레이아웃을 결정합니다. 1. display block: 언제나 줄을 바꾸면서 등장 inline: 컨텐츠 크기만큼 차지하며 공간이 남으면 옆으로 채워짐 inline-block: 줄을 바꾸지 않고 block 형태로 들어옴 flex: 중요하기에 아래에서 별도로 다룸 display 속성은 기본적으로 display 속성은 block 입니다. display 속성을 inline으로 할 경우. 위에 적힌 width, height는 무시해버린다. in..

css 문법 css 를 통해서 어떤것을 할수 있을까? 이전의 html통해서는 사진넣고 input태그 만들어 보고 제목등 이런식으로 문서의 뼈대, 문서에 어떠한 요소들이 있어야 하는지 뼈대만 정의한거구요. css라는것은 그 정해진 뼈대에 살을 붙이는 행위입니다. 색깔도 칠하고, 오른쪽 왼쪽 정렬도 할 수 있고, 기타 등등 좀 더 문서를 예쁘게 꾸미기 위해서 등장한 기술이예요. css문법의 핵심은 "어디를 어떻게 꾸미고 싶은가" 입니다. css적용하는 방법은 3가지가 있는데 파일을 분리해서 css적용하는 것을 추천합니다. ****** id 와 class ****** id와 class가 뭐가 다른걸까?? 의미차이이다. id는 특정 하나의 요소에만 css를 적용하고 싶을 때 사용하는 속성이다. class는 어떤..

HTML 문법 ~~ 여는 태그, 닫는 태그가 존재하고, 가끔가다 각종 태그마다 속성이 존재하는데 똑같은 태그여도 어떤 옵션을 넣을지 설정해 주는 거라고 보시면 됩니다. HTML을 배울 때는 태그 종류가 굉장히 많습니다. 필요할 때 찾아쓰는 형식으로 진행하고 있습니다. HTML 구조를 볼 건데요. vscode를 열어 볼게요. 그리고 폴더와 파일을 만들어 보겠습니다. 1. file >> open folder 클릭 2. 가져올 folder를 선택하여 가져오면 됩니다. 가져올 폴더가 없다면 새로만들기>>폴더 바로 만들어서 폴더선택으로 가져오면 됩니다. 3. 선택된 SSAC05라는 폴더를 가져온 것을 확인할 수 있습니다. 4. SSAC05 폴더 안에 stydy 폴더 하나를 만들어 볼건데요. SSAC05가 열려있는..