![]()
# flow control 컴퓨터의 기본 동작을 생각해보자 사용자는 컴퓨터에게 명령하고, 컴퓨터는 이를 수행한다 => 개발자는 컴퓨터에게 무언가 명령하고, 컴퓨터는 이를 수행한다 => 특정 trigger로 시작되어 종료되기 까지의 흐름이 존재한다 => 컴퓨터는 이 흐름을 상황별로 제어해야 한다 # flow control 이란? 제어흐름, 흐름제어 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서 goto : 다른 구문에서 시작, 권장 X choice : If-else, switch loop : Collection loop, General loop continue : Loop continuation break : Loop early exit, 함수 실행 정지 # 표현식과 문의..
![]()
오늘은 자바스크립트의 데이터 처리에 대해서 배우는 날이다 기본 개념 및 flow control에 대한 내용이다 자바스크립트의 문법이 부족했던 만큼 더 열심히 듣고 공부해야겠다! # 연산자 연산자란? 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만드는 것 # 단항 연산자 하나의 피연산자만 사용하는 연산 - void : 표현식 평가 시 값 반환하지 않도록 지정 - typeof : 평가 전의 피연산자 타입을 나타내는 문자열을 반환 - delete : 객체의 속성 삭제 # 산술 연산자 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자값을 반환 - ++, --, +, - - 전위 증가감소 연산자 : 피연산자 앞에 위치, ++피연산자, --피연산자 - 후위 증가감소 연산자 : 피연산자 뒤에 위치..
![]()
HTML과 CSS 강의가 끝나고 Javascript 강의가 시작되는 날이다! 이번 강의를 통해 Javascript 역량을 확실하게 향상 시키는 것이 목표이다 JS 첫 강의이기 때문에 오늘은 왜 JS를 공부해야 하는지, 강의 목표는 무엇인지, 실습 환경 세팅 등과 같은 기본적인 내용으로 강의가 진행된다 # 강의 목표와 커리큘럼 왜 Javascript를 사용할까? 유저의 pain point 해결하기 위해 -> 서비스를 만든다 서비스를 만들기 위해 -> 웹 개발을 배운다 웹을 개발하기 위해 -> JS를 배운다 # 브라우저의 개발자 도구 Elements : 로드된 파일의 소스 확인 Console : JS 실행 Source : 현재 브라우저 로드 모든 소스 확인 Network : 네트워크 통신 발생 시 로그 확인..
![]()
# 유연한 상자 만들기 Flexbox Flexbox : 유연함을 가진 일차원 레이아웃을 만들 수 있다 가로축 정렬 : justify-content 세로축 정렬 : align-items 유연성 조절 : flex-grow, flex-shrink 크기 조절 : flex-basis 축 바꾸기 : flex-direction 여백과 순서 : gap, order .wrapper { display: flex; /*내부 요소 가로로 나열*/ flex-direction: column; /* 축 지정 속성 - 기본 값은 가로*/ } 아래의 HTML 코드에 CSS를 적용해서 Flexbox 속성에 대해 알아보자 콘텐츠1 콘텐츠2 콘텐츠3 .wrapper { display: flex; /*내부 요소 가로로 나열*/ flex-di..
![]()
지금까지 배운 HTML과 CSS를 종합해서 간단한 페이지를 만들어보는 시간이다 전체 소스코드를 올릴 수는 없어서 클론코딩을 하면서 알아두면 좋을 내용들을 간략하게 정리하고 완성된 페이지를 포스팅 하려고 한다 # header, main, footer는 레이아웃을 구성하는 태그 한 페이지 한 파일 안에 반드시 한번만 나와야 함 검색엔진이 페이지에 들어오면 header 태그부터 찾아서 어디가 제목인지 파악한다 header 안의 h1을 찾으면 이것이 페이지의 제목이라는 것을 검색엔진이 알게 된다 main 태그와 footer 태그도 검색엔진에게 해당 부분이 main이고 footer 임을 알려줄 수 있다 JINNY # a 태그 href 속성 중 mailto:이메일주소 -> 메일 폼 생성해주는 링크이다 # 블록레벨요..
![]()
# 반응형 반응형이란? 하나의 웹사이트에서 PC, Tablet, Mobile 등 접속하는 기기의 화면 크기에 맞게 사이트가 자동으로 반응하는 기법 적응형이란? 접속하는 기기에 따라 PC용 웹사이트, 테블릿/모바일용 웹사이트를 보여주는 기법 #HTML 반응형 페이지를 만들기 위한 메타 태그 viewport meta 태그를 추가하여 페이지가 호출될 때 보이는 화면을 어떻게 계산해서 보여줄지 정의 name : 메타태그 중 viewport를 사용하겠다고 선언 content : viewport 가 가진 content 값 지정하여 사용 - width : 브라우저에게 페이지의 가로 너비 계산하는 방법 알려줌, device-width 지정 시 접속하는 기기의 브라우저 너비에 맞게 페이지 맞춰줌 - initial-sca..
![]()
# 박스 모델 - 크기 지정, 여백 안녕하세요 반갑습니다 정지은 실습 중이다 .box { width: 700px; height: 700px; background-color: #ddd; } .inner-box { width: 100%; height: 100%; max-width: 50%; } 위의 코드를 적용하면 inner-box의 width가 box class의 크기에 맞춰 100%로 700px가 될 것 같지만 max-width 가 50% 이기 때문에 350px가 최대임, max-height도 동일 margin. padding 은 네 면을 한번에, 각각 지정해 줄 수 있음, padding 도 아래 코드와 동일하게 적용됨 margin: 10px; /*네 면 모두 적용*/ margin: 10px 20px; ..
# 단위 고정 단위 소수점 사용 X 권장 px : 픽셀은 정확한 크기를 나타내야 할 때 사용, 가장 일반적으로 사용 pt : 일반적으로 문서 등에서 사용, 웹에서 자주 사용되지는 않음 상대 길이 단위 브라우저 기본값 16px em : 요소의 글꼴 크기에 상대적인 단위, 합성 값, line-height, letter-spacing 등에서 주로 사용 div { font-size: 50px; } div p { font-size: 1em; } div p a { font-size: 2em; } rem : 합성을 피하기 위해서 만들어진 단위, 전반적인 레이아웃, 폰트 크기 작업 을 할 때 많이 쓰임 div { font-size: 50px; } div p { font-size: 1rem; /*16px 기준*/ } d..
