소프트웨어 언어 학습 흐름모든 소프트웨어 언어는 작성 규칙이 있다.이 작성 규칙을 그 언어의 문법이라고 한다. 소프트웨어 언어 문법을 학습한다는 것은 그 언어에서 제공하는 예약어가 무엇이 있으며 식별자 정의 규칙은 어떻게 되고, 연산자는 무엇이 있는지 등을 학습하는 것이다.• 소프트웨어 문법을 익히고 그 문법에 맞추어 프로그램을 작성한다. ▼코드는 예약어, 식별자, 연산자, 데이터의 조합이다. • 예약어 (let, function, true 등등..) 는 소프트웨어 언어에서 지정한 단어• 식별자 (count, number 등등..) 는 개발자가 구분을 위해 지정한 단어• 연산자 (++, +=, ===, = 등등..) 는 특별한 연산을 위해 지정된 기호 혹은 단어• 데이터는 값 ▼코드는 선언구문과 실행구문..

JavaScript Basic  ◆ ../ 02.JavaScript-Basic / 02.1-getting start 자바스크립트 기초  ▼라인을 구분하기 위한 세미콜론을 강제하지 않는다• 강제하지 않는다는 의미는 써도 되고 쓰지 않아도 된다는 뜻 ▼ window 함수 – alert prompt confirm• 브라우저에서 실행되는 자바스크립트 코드에서 기본이 되는 객체는 window 이다.• window 는 브라우저 자체를 지칭하는 객체이며 이 window 객체에서 제공하는 변수, 함수를 이용해 프로그램을 작성할 수 있다.• window 객체에서 다이얼로그를 띄우기 위한 alert(), confirm(), prompt() 함수를 제공▷ alert()  ▷ confirm() ▷ prompt() ▼ docu..

JavaScript Basic◆ ../ 02.JavaScript-Basic / 02.1-getting start • 브라우저에서 자바스크립트를 실행시키려면 HTML 파일이 존재해야함• 태그를 불러온것 처럼 HTML에 를사용하여 JS파일 실행한다.  자바스크립트 코드 위치 – HTML 실행 순서▼ JS 코드의 위치를 마크업 위에 한번 적용해보자.   검사 -> 콘솔 창에서 에러 메시지 확인하고 해당 오류 해결법은스크립트의 이 부분을 문서의 맨 끝에 두어 문서가 이미 로드되기 전의 모든 것이 되도록 하는 것 필요하므로 순서바꾸기  ▷ 자바스크립트 코드가 작성되는 HTML 문서내에서의 위치가 문제가 될 수 있다.자바스크립트 코드의 내용이 실행되는 HTML 문서의 태그와 관련이 없다면, 즉 자바스크립트 코드..

zigzag 리뷰 ▼ 기본 레이아웃 덩어리를 만드는 첫 번째 단계 (클래스 이름이 그 다음으로 제일 중요!!!!!!!!!!!!!!!!!!) ▼ 독립적인 틀인지 종속적인 틀인지 확인해보자아직 내부에 뭐가 들어갈지 신경 쓰지 않는다그런다음 section의 세부 구성을 한다.    ▼ 배경색은 둘 다 서로 다르는걸 알기에 클래스명을 각각 purple과 white를 지정했다.  ▼ 상단 제목 부분의 레이아웃 덩어리는 3개로 파악 할 수있다.  ▼ 섹션 헤더에 div 덩어리 3개 있다고 볼 수있다.   ▼ 하지만 이 방법보다는 title, description, controls를 한번 더 감싸주고 section과 별개인아예 새로운 컴포넌트로 지정하여 작성해준다. section header에서 flexbox 제거해..

폼 요소를 적절히 초기화하고 최초 스타일 재구축 폼 요소, 최소한의 접근성 확보하기 체크박스와 라디오버튼 커스텀 버튼 커스텀 ◆ (day17/meeting_room) ▼ input은 컨테이너가 아니기에 스타일링을 위하여 한번 감싸주기위해 div를 사용하고 작업한다즉 이 div는 input[type='text']를 한번 감싸는 역할이다.input 자체의 스타일을 커스텀 하면 다양한 입력 필드 유형을 소화하기 어렵기 때문이다 ▼ input의 스타일을 변수값을 설정해서 작업을 유연하게 한다   ■ input의 height, line-height, font-size, padding등, 플러스 알파하여 커스텀 할 수 있는 부분을 CSS Variable로 만들어준다 -> (확장성이 좋아짐) ▼ 62.5= 기본폰트 ..

transform, transition, animation을 복합적으로 활용한 예제폼 요소의 기능적인 측면 이해폼 요소의 기본 스타일 특성 이해하기폼 요소를 적절히 초기화하고 최초 스타일 재구축폼 요소, 최소한의 접근성 확보하기체크박스와 라디오버튼 커스텀버튼 커스텀◆ (day17/music)■ transform, transition, animation 예제    ▼ 아이콘 추가하여 하나로 합친 후 가운데 정렬또는 left 50% right 50% ▼ transform을 사용하여 중앙 정렬 할 수 있다. ▼ 네거티브 마진을 사용하여 중앙 정렬 할 수 있다 ▼ nth-child와 transform translate rotate를 적절히 사용하여 각 아이콘들의 위치를 조정해준다 ▼ rotate로 인해 이미지가..

Animation, Transition 주요 속성과 활용 Transform 주요 속성과 활용 :hover 가상 클래스의 활용 (노트북 이슈로인한 직접 작성한 코드 및 티스토리 내용이 몽땅 날아가버려서 교수님의 자료 + pdf로 대체하겠슴 ㅜㅠ) Transform transform속성은 요소의 크기(scale), 위치(translate), 회전(rotate), 기울기(skew)를 적용할 수 있다.또한 시각적 부분의 변화만을 제공하며 레이아웃에 직접적인 영향을 주지 않는다 (기존 공간 유지) .circle { transform: rotate(45deg) translateX(100px);} 변환 함수변환 함수는 띄어쓰기를 통해 조합하여 사용될 수 있으며, 이때 각각의 변환은 독립적으로 적용되지만,변환의 순서..

Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)flex, grid 실무적인 적용 방법■ Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)▼ 우리가 flex에서 했던 것처럼 레이아웃을 좀 더 유연하게 작업하기위해     주어진 코드를 추가해주었다..l_row {  display: flex;  flex-wrap: wrap;    margin: 0 -20px;    row-gap: 40px;}.l_col {    box-sizing: border-box;    padding: 0 20px;}.l_col_12_12 { width: 100%; }.l_col_11_12 { width: 91.66666667%; }.l_col_10_12 ..

minmax()의 활용 미디어쿼리에 독립적인 반응형 그리드 (auto-fill, auto-fit) 그리드 아이템의 수동 배치 + 셀 병합 이해하기 자동 배치 규칙 이해하기 ◆ (day15/grid)■  그리드 레이아웃그리드 레이아웃 시스템은 그리드 컨테이너(부모 요소)에서 대부분의 레이아웃 작업이 이루어지며, 자식 요소들에 추가적인 레이아웃 관련 작업이 최소화될 수 있게 설계 되었다.그리드 컨테이너 (부모 요소) 집중식 레이아웃 관리: 그리드 컨테이너가 레이아웃의 중심이 된다. 대부분의 레이아웃 정의와 조정이 그리드 컨테이너 (부모 요소) 수준에서 이루어진다.자식 요소의 단순화: 개별 그리드 아이템(자식 요소)에 대한 직접적인 레이아웃 조작이 크게 줄어든다.마크업 간소화: 레이아웃을 위한 추가적인 마크업..

그리드 레이아웃 시스템 이해하기 minmax()의 활용auto-fit, auto-fill 그리드 기법의 변화 예시◆ (day14/grid)DOCTYPE html>html>  head>    title>Gridtitle>    style>      body {        background-color: brown;      }      .playground {        border: 10px solid maroon;        width: 980px;        margin: 0 auto;        border-radius: 20px;        background-color: skyblue;        padding: 10px;      }      .frog {        backgr..