개발(Develop)/웹(Web)_HTML_CSS_JS7 [JS] 디데이 기능 만들기 / 남은 날짜 시간 구하기 / new Date() Math.floor() 자바스크립트를 사용해 남은 날짜수를 구해보겠다. 이는 D-Day 기능처럼 사용할 수 있다. 자바스크립트 D-Day 기능 만들기 우선, 디데이 기능을 만들어보기 위해서 기준일자를 정할 것인데 나는 '크리스마스 12월 25일'로 하겠다. 우선 완성된 디데이 기능은 아래와 같다. 일, 시간, 분, 초를 나타내주었다. 쉬우면서도 유용하니 같이 한번 해 보도록 하자. 1. 디데이를 나타내줄 태그에 id 값을 지정해준다. index.html 파일 Time Until Christmas 2. querySelector을 사용해 id 값으로 찾은 h2 요소를 변수에 저장해준다. app.js 파일 const remainTime = document.querySelector("#remain-time"); 3. 함수를 만들고 2.. 2022. 1. 20. [JS] 실시간 시계 두자릿수 출력 / Date 두 자리수 만들기 / 시계 만들기 / padStart() / getDate() 오늘은 자바스크립트를 활용해 홈페이지에 '시계'를 출력해볼 것이다. HTML 요소와 Javascript를 활용해 시계 만들어보기. 순서는 아래와 같다. 1. HTML 파일에 시계를 출력할 태그를 생성하고 id 값을 지정한다. 2. 자바스크립트를 통해 해당 id 로 요소를 가져와 변수에 저장한다. 3. new DATE( )를 사용해 시간을 받고, 계속적으로 갱신해준다. 4. 시간을 출력할 때 1자릿수를 2자릿수로 바꿔준다. 그럼 바로 위와 같은 순서로 진행해보자. 1. 우선 HTML 파일에 시계를 출력할 태그를 만들고 id 값을 지정해준다. 2. 자바스크립트 파일에서 id 값을 query.Selector()을 활용해 가져온다. const clock = document.querySelector("#clock.. 2022. 1. 19. [CSS] CSS 초기화 / 리셋(reset) CSS / CSS 리셋 하는 방법 / Reset CSS 2.0 Eric Meyer’s / CSS 기초 지식 reset CSS란? 우리가 html로 코드를 작성하고 브라우저로 실행을 해보면 내가 적용을 하지 않았는데도 자동으로 margin이 들어간 경우를 흔히 봤을 것이다. 이는 '웹 브라우저'마다 default 값으로 스타일이 적용되어 있기 때문에 우리는 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기 위해 이런 default 디폴트 값을 초기화 해주어야 한다. 아래와 같이 자동으로margin: 8px; 값이 들어간 것을 확인할 수 있다. 그러면 같이 CSS 초기화를 해보도록 하자. 1. 구글에 "Reset CSS"라고 검색을 하고 초기화 코드를 찾는다. 나는 아래 사이트에서 가져왔다. https://cssdeck.com/blog/scripts/eric-meyer-reset-cs.. 2022. 1. 5. [CSS] 반응형 웹 만들기 / 뷰포트(viewport) 크기 확인하기 / 미디어 쿼리 알아보기 / 뷰포트란 / 뷰포트 사이트 / yesviz 요새 웹 디자인은 데스크탑으로 웹 사이트를 접속하나 모바일을 통해 웹 사이트를 접속하나 맞춤형으로 웹 디자인이 변경이 된다. 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여주는 것을 '반응형 웹 디자인'이라고 한다. 이런 반응형 웹 디자인에서 가장 기본적인 개념은 '뷰포트(viewprot)'라는 것이다. 뷰포트는 스마트폰 화면에서 실제 내용이 표시되는 영역으로 뷰포트를 지정해주게 되면, PC화면이나 모바일 화면에 맞추어 확대하거나 축소해서 레이아웃을 표시할 수 있다. 이런 뷰포트는 태그를 이용해 태그 사이에 작성을 하는데 기본형태는 이다. 뷰포트(viewport) 단위 뷰포트의 단위는 vw (viewport width) : 1vw는 뷰포트 너비의 1%와 같다. vh (viewpro.. 2021. 12. 26. [HTML] 웹페이지 콘텐츠 섹션(section) 나누기/ 콘텐츠 판별을 위한 태그(tag)/ 태그로 콘텐츠 틀 잡기 웹 페이지를 만들 때 섹션(section, 구획)을 나눠야 한다. 예를 들면 네이버의 모바일 화면을 살펴보자. 네이버가 검색엔진이다 보니, 검색을 하는 부분이 가장 중요해 '검색어를 입력해주세요'를 가장 우선적으로 두었고, 맨 아래에 이용약관, 개인정보처리방침, 고객센터 등 사용자가 잘 이용하지 않는 부분은 맨아래(footer)로 작게 두었다. 우선순위에 따라 콘텐츠들을 다르게 배치하였고 해당 콘텐츠 요소들마다 섹션(section)이 나눠진 것을 볼 수 있다 ! 네이버의 화면을 HTML 태그로 단순하게 표현을 하면 아래와 같이 나타낼 수가 있다. 영어로 적힌 부분은 HTML에서 사용할 수 있는 '태그(tag)'이다. 콘텐츠들의 섹션(section)을 나누는 태그(tag)들에 대해서 알아보도록 하겠다. 제.. 2021. 6. 18. [웹기초] 브라우저란 무엇인가, HTML이란, CSS란, JavaScript란 무엇인가/ 웹개발 기초부터 공부 기본기를 갖추지 못 하면 나중에 어려운 문제에 직면했을 때 무너질 가능성이 크기에 이제부터는 정말.. 우리가 흔히 사용하는 브라우저가 무엇이고.. 등등 기초부터 차근차근 공부해 가보도록 하겠습니다. 우리가 사용하는 크롬, 인터넷 익스플로러, 사파리 등을 뜻하는 '브라우저'는 무엇일까? 브라우저에는 아래와 같은 종류가 있다. 여기서 1개 이상은 사용해보았을 것이다. '브라우저(Browser)'란 무엇인가? 브라우저는 간단히 말하면 '웹 정보를 화면에 표시하는 소프트웨어'를 말한다. Browse 는 둘러보다, 훑어보다, 인터넷을 돌아다니다라는 뜻을 가지고 있는 영어단어로, 브라우저가 무엇인지 영어 해석으로 조금 유추해볼 수 있을 것 같다. 조금 더 깊게 들어가면 브라우저는 인터넷 상에 연결된 '웹 서버'에 .. 2021. 6. 17. HTML/CSS/JavaScript를 개발하는 사람이라면 무조건 알아야 하는 사이트+사용법+자세한설명 내가 하던 웹 공부는 책이나 유튜브 강의가 전부였다. 책이 안내해주는 대로, 유튜버가 말하는 대로만 안내해주고 나온 대로만 하다보니 모르는 내용이 나오면 그냥 "아~ 이렇게 사용하는구나"하고 암기식으로 외우고만 넘어갔다. 어떠한 함수가 나오면 여기에는 어떤 input값이 들어가야 하고, 어떠한 형식으로 써야 하고, 정확히 어떤 기능을 활용하고 싶을 때 사용해야 하는지를 몰랐다. 그러다가 Google에 모르는 내용을 검색을 하고 난 이후로 나의 웹 공부 스타일은 물론 지금까지 무엇을 공부했나 싶었다. 책과 강의를 보며 끌려다니는 것이 아니라 궁금하거나 모르는 내용에 대한 호기심이 생기면 바로 찾아보고, 더욱 정확하게 알게 되고, 필요할 때 사용하는 방법을 알게 되었다. HTML / CSS / JavaScr.. 2021. 5. 16. 이전 1 다음
