프론트엔드 기록

고정 헤더 영역

글 제목

메뉴 레이어

프론트엔드 기록

메뉴 리스트

  • 홈
  • 태그
  • 방명록
  • 분류 전체보기 (70)
    • HTML, CSS (14)
    • 리액트 (32)
    • 자바스크립트 (13)
    • 혼자 공부하는 머신러닝+딥러닝 (2)
    • 쿠버네티스 (0)
    • 코딩테스트 준비 (0)
    • 리액트 스터디 (4)
    • DIY (2)

검색 레이어

프론트엔드 기록

검색 영역

컨텐츠 검색

분류 전체보기

  • [자바스크립트] 만 나이 계산기 코드 분석

    2023.04.09 by front-hyun

  • [자바스크립트] 문자열, 배열, 조건문, 반복문, 에러 처리, 함수

    2023.04.09 by front-hyun

  • [자바스크립트] 변수, 주석, 자료형, 연산자

    2023.04.04 by front-hyun

  • [CSS] transition, animation, flexbox, Tailwind CSS

    2023.03.29 by front-hyun

  • [CSS] 기초(03/23)

    2023.03.25 by front-hyun

  • 2주차 웹, HTML 기초, CSS 기초(03/20)

    2022.04.28 by front-hyun

[자바스크립트] 만 나이 계산기 코드 분석

시연 영상 보고 짠 코드 let nyear; function cal(nyear, nmonth, nday){ console.log(`생년월일\n ${nyear}-0${nmonth}-0${nday}`); let date=new Date(); let year=date.getFullYear()-nyear-1; console.log(`만 나이\n귀하의 만 나이는 ${year} 입니다.`); } cal(1995, 3, 4); let nyear;: nyear라는 이름의 변수를 선언하고 있습니다. 이 변수는 함수의 매개변수와 동일한 이름이지만, 함수 내부에서 선언된 변수가 함수의 매개변수를 가리게 되므로, 함수 내부에서는 nyear 변수가 매개변수로 사용되지 않고 전역 변수로 사용됩니다. function cal(nye..

자바스크립트 2023. 4. 9. 21:30

[자바스크립트] 문자열, 배열, 조건문, 반복문, 에러 처리, 함수

문자열 문자열 선언 큰 따옴표("")보다는 작음 따옴표('')를 주로 사용합니다. 문자열에 따옴표가 포함된 경우 문자 연결 연산자(+)나 이스케이프 문자를 사용합니다. let greeting = "Hello"; let farewell = 'bye'; let sentence = greeting+'\n'+ farewell; console.log(sentence); //숫자->문자열로 변환되어서 병합 //피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환(연산자가 +인 경우만) console.log(farewell+2); 이스케이프 문자 백슬래시(\)로 시작되는, 컴퓨터를 제어하는 목적으로 사용되는 특수한 문자입니다. \n, \t, \b, \', \", \\ 템플릿 리터럴 ES6에서 추가되었으며, 백틱(..

자바스크립트 2023. 4. 9. 21:16

[자바스크립트] 변수, 주석, 자료형, 연산자

자바스크립트 소개 ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. 뒤에 숫자는 버전을 뜻하고 ES5는 2009년 ES6는 2015년에 출시되었다. script 태그 사용 태그의 위치가 중요합니다. html 태그 아래에 위치하는 것이 좋습니다. 변수 데이터를 담아 놓기 위한 공간입니다. var num = 10 + 20; var은 키워드, num은 식별자, =은 대입 연산자, 10+20은 표현식이며 표현식의 값은 30입니다. 키워드 어떤 역할이나 기능이 정해진 특별한 단어 식별자 변수, 함수 등에 부여되는 이름, '변수명'이라고도 합니다. 키워드는 식별자로 사용 불가합니다. 식별자 명명 규칙 키워드 사용 불가, 공백 포함 불가, 한글 불가, 숫자로 시작 불가, 특수문자..

자바스크립트 2023. 4. 4. 09:03

[CSS] transition, animation, flexbox, Tailwind CSS

전환 효과 / Flexbox 전환? CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것입니다. EX) 빨간색 요소에 :hover 가상 클래스 선택자를 적용하여 마우스를 올렸을 때 파란색으로 변하게 하는 경우 -> 이런 전환이 발생할 때, 전환 효과를 직접 속성으로 지정할 수 있습니다. 전환 효과 사용시 transition-property, transition-duration 지정은 필수적입니다. transition-property 전환 효과를 적용할 대상 속성을 지정 transition-duration 전환 효과의 지속 시간을 설정 transition-delay 전환 효과 발생 지연 transition-timing-function 전환 효과의 진행 속도 지정 전환 효과가 가능한 ..

HTML, CSS 2023. 3. 29. 00:33

[CSS] 기초(03/23)

CSS의 특성: 폭포수, 상속, 우선순위 CSS는 Cascading Style Sheets의 약어입니다. Cascade란 폭포란 뜻인데 이것에서 유추가 가능합니다. CSS는 폭포수가 아래로 떨어질 때처럼 CSS에서 스타일이 적용될 때는 우선순위를 가지고 적용이 되기 때문에 이 모습이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다. 같은 태그에 대한 규칙이 있는 경우 -> 마지막으로 작성된 규칙이 적용됩니다. Inheritance(상속)이란? 부모 요소의 css 규칙을 자식 요소가 상속하여 적용하는 것입니다. 자식 요소가 css 규칙을 가지고 있다면 이를 우선하여 적용합니다. Specificity란? css 규칙이 서로 충돌할 때 어떤 것을 적용할지 결정합니다. ..

HTML, CSS 2023. 3. 25. 02:49

2주차 웹, HTML 기초, CSS 기초(03/20)

더보기 Web의 등장 2000년대 초반에는 초고속 인터넷망을 사용했으며, CSS만 수정을 했습니다. 1990년에 팀 버너스리가 세계 최초의 웹 브라우저 WWW을 만들고 웹이 대중화되기 시작했습니다. 최초의 웹 사이트: http://info.cern.ch/ PC 통신과 WEB의 차이 PC 통신은 반 유선 공중전화망(PSTN)과 모뎀을 통해 연결되며, 연결되는 반대편에서 사전에 정해진 사업자 또는 개인이 서비스를 제공하는 폐쇄적인 형태이며, 속도가 느립니다. 반면, WEB은 개방되어 있고, 광랜(FTTH)를 사용하여서 속도가 빠릅니다. 1세대, 2세대, 3세대 웹의 발전과 특징 1. Web 1.0 :정보 제공 위주, 정적 어느 누구나 프로그램을 대중에게 공개할 수 있는 세상이 도래했었습니다. 전통적인 웹 시..

HTML, CSS 2022. 4. 28. 00:17

추가 정보

인기글

최신글

페이징

이전
1 ··· 6 7 8 9
다음
TISTORY
프론트엔드 기록 © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바