memostack
article thumbnail
HTML 문서에 javascript 추가시 주의할 점 (브라우저 구문분석 순서)
Frontend/HTML, CSS, JS 2021. 12. 28. 19:25

HTML 문서에 js 추가시 주의할 점 브라우저는 html 문서를 위에서부터 아래로 한줄 씩 읽어 내려간다. 브라우저에서 아직 읽지 않은 요소를 js에서 참조하려고 하면, 해당 요소를 찾지 못하게 된다. 예를들어, 아래 코드를 보면 initial value 만약, head 태그 내부와 같이 상단에 javascript를 추가 하게되면, 그 아래에 위치한 요소들은 (js를 읽는 시점에) 아직 브라우저에서 읽지 못했기 때문에 js 파일에서 특정 요소를 참조할 수 없다. 그래서 '개발자 도구'를 열어서 확인해보면 아래와 같이 참조할 수 없다는 오류를 확인할 수 있다. Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 이 문제를 해결하..

article thumbnail
HTML 블록(block) , 인라인(inline), 인라인 블록(inline-block)
Frontend/HTML, CSS, JS 2021. 12. 23. 19:31

블록 요소 (Block Element) 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨 {width: 100%; height: auto;} 와 같은 css 속성을 default로 가진다고 생각하면 됨 width, height로 크기를 지정할 수 있음 padding, margin으로 상하좌우 여백을 지정할 수 있음 여러개의 블록 요소들이 있을때, 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치할 수 있음) 위와 같은 특징으로 블록요소는 보통 레이아웃을 잡을때 자주 사용한다 블록 요소의 종류: div, h1, p 예시 1. div 태그 width 값을 따로 설정하지 않아도, 블록요소는 기본적으로 최대 너비로 설정된다. 이것은 블록 요소입니다 예시 2. 블록 요소에 크기 지정 블록 요..

article thumbnail
HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그)
Frontend/HTML, CSS, JS 2021. 12. 21. 19:16

HTML의 기본 문법 HTML은 꺽새괄호와 태그명, 속성/값을 이용하여 표현한다. 과일 사과 오렌지 바나나 속성과 값 HTML은 속성(Attributes)과 값(Value)을 가질 수 있다. ... 클릭하면 네이버로 새탭으로 열어서 이동하는 태그를 예를들면 NAVER로 이동 href와 target은 속성(attributes)이고, https://www.naver.com과 _blank는 값(value)이 된다. 부모/자식 요소 태그(Tag)와 요소(element)는 엄밀히 따지만 조금 다른 의미를 가지지만, 비슷한 의미로 생각하면 된다. 아래와 같이 하나의 태그 안에 여러개의 태그가 존재할때, 제목 내용1 내용2 밖을 감싸고 있는 div 태그를 부모 요소(parent element)라고 하고, 내부에 있는..

article thumbnail
html 문법과 태그의 종류
Frontend/HTML, CSS, JS 2021. 12. 16. 21:46

HTML HTML은 Hyper Text Markup Language의 약자로, HTML 문서를 구성하기 위해 사용하는 언어이다. HTML Tags (Element) HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 가장 기본이 되는 단위이다. 꺽쇠 괄호와 태그명으로 아래와 같이 표현한다. ... html의 기본 문법에 대한 설명은 아래 링크 참고 2021.12.21 - [Front End/HTML, CSS, JS] - HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그) HTML 태그의 종류 html의 태그는 굉장히 많은데 굳이 외울 필요는 없고 어떤 태그가 있는지 보고 사용할때 "이런 태그가 있었던거 같은데?"라고 생각하면서 찾아서 사용하면 된다. ..

article thumbnail
날짜/시간 라이브러리 moment.js 버그?
Frontend/HTML, CSS, JS 2021. 12. 16. 19:40

moment.js moment.js는 날짜와 시간을 간편하게 다룰 수 있도록 도와주는 라이브러리이다. 프로젝트를 하면서 거의 필수적으로 사용하는 라이브러리 moment.js의 자세한 내용은 아래 링크 참고 https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620"..

article thumbnail
웹(Web)에서 HTML, CSS, JS의 역할
Frontend/HTML, CSS, JS 2021. 10. 27. 21:16

웹 개발을 위한 기초 언어 3가지 웹개발에서 사용하는 언어는 대표적으로 HTML, CSS, Javascript 3개가 있습니다. 프론트엔드(Front-end) 개발자라면 반드시 알아야 하는 언어중 하나입니다. 다른 프로그래밍 언어에 비해 쉽다고 생각할 수도 있지만, 또 그렇게 쉽지도 않아서 우습게봐선 안됩니다. 항상 기초가 튼튼해야한다는 것을 기억해야합니다. HTML 웹의 구조를 담당하는 HTML은 Hyper Text Markup Language의 약자입니다. 단순히 웹 페이지의 구조(뼈대)를 만들기 위해 사용하기 때문에 HTML만으로는 디자인적으로 예쁘게(?) 만들 수 없습니다. 애초에 용도가 꾸미기 위한 용도가 아니기 때문입니다. HTML과 HTML 태그에 대한 상세정보는 아래 링크 참고 2021.1..

article thumbnail
CSS를 이용하여 이미지를 정사각형 모양으로 자르기
Frontend/HTML, CSS, JS 2021. 7. 25. 00:32

이미지를 정사각형으로 만들기 단순히 image의 width와 height를 동일하게 해도 되지만, 그렇게하면 이미지가 늘어지거나 축소된다. (보기 좋지 않음) index.html index.css body { padding: 0; margin: 0; width: 100%; } img { width: 500px; height: 500px; } 본 글에서는 위와같이 하는 방법이 아닌, 비율은 유지하면서 정사각형을 벗어나는 부분은 보이지 않도록 하는 방법을 소개한다. 이미지를 정사각형 모양으로 자르기 아래와 이미지 같이 가로, 세로의 길이가 다른 이미지가 있을때 정사각형 모양으로 이미지를 자르는 방법을 살펴보자 (아래 '브레이브걸스' 이미지는 세로보다 가로가 더 길다) 정사각형 영역을 벗어나면 이미지의 비율은..

article thumbnail
Javascript의 forEach, map, filter 함수
Frontend/HTML, CSS, JS 2020. 11. 9. 23:01

forEach() 배열의 원소를 하나씩 꺼내, 반복하여 작업을 할때 사용한다. const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => { // 각 원소를 하나씩 꺼내어 console.log로 출력한다. console.log(number); }); 1 2 3 4 5 map() 배열의 각 원소 값을 변경하여 새로운 배열을 생성할 때 사용한다. const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 각 원소를 제곱한 새로운 배열을 반환한다. const newNumbers = numbers.map((number) => number * number); console.log(newNumbers); [1, 4, 9, 16, 2..

Javascript 연, 월, 일 계산하기 (날짜 조작)
Frontend/HTML, CSS, JS 2020. 7. 3. 21:31

Javascript 에서 날짜 조작하기 현재 시간 가져오기 // 오늘 const today = new Date(); console.log(today.toLocaleString()); // 특정 날짜 const date = new Date(2020, 7, 2); console.log(date.toLocaleString()); 연도 더하기/빼기 setFullYear()와 getFullYear()를 활용 // 내년 const nextYear = new Date(2020, 7, 2); nextYear.setFullYear(nextMonth.getFullYear() + 1); console.log(nextYear.toLocaleString()); 월 더하기/빼기 setMonth()와 getMonth()를 활용 /..