Web79 서브메뉴 만들어보기와 classList 다루기 서브메뉴를 만들기 위해서는 css를 이용해서 만들 수 있지만 이번에는 bootstrap이라는 프레임워크를 이용해서 만들어보려고 한다. 1. bootstrap이란 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것 2. bootstrap 설치하기 https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter .. 2023. 7. 12. function의 파라미터 문법 함수의 매개변수 알림창 입니다.알림창 숨기기 알림창 보여주기 알림창 입니다.알림창 숨기기 알림창 보여주기 위의 코드와 같이 매개변수를 활용하면 2개의 함수를 한개로 줄일 수 있다. 두개 뿐만 아니라 같은 기능을 하는 여러 함수들을 가변적인 부분에 매개변수를 추가함으로써 함수의 개수를 대폭 감소시킬 수 있다. 2023. 7. 12. 자바스크립트 function 문법 사용법 HTML 내부에 JavaScript 함수 작성 함수적용 사례 살펴보기 알림창 입니다. 알림창 보여주기 알림창 입니다. 알림창 보여주기 2023. 7. 12. 동적 UI만들기 (alert) [ UI를 만드는 단계 ] 1. HTML/CSS로 미리 UI를 디자인한다. 2. 만든 디자인을 숨김처리한다. display: none; 3. 필요할 때 숨김처리를 해제하는 코드를 작성한다. (JavaScript) display: block; Alert 박스 만들기 index.html 알림창 입니다. 알림창 보여주기 알림창 숨기기 main.css /* STEP 02 */ .alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 응용해보기 드롭다운 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 .dropdown-box{ background-color: lightgray; border-rad.. 2023. 7. 11. HTML에서 JS를 포함하는 방법 1. head 내부 : head에 js파일 포함시키기 [head 내부 방법] 1. html 위에서 아래로 읽는다. (html parsing) 2. script 태그를 발견 시 읽던 html을 멈추고 JavaScript 파일을 다운 받아 실행한다. 3. 다시 html 위에서 아래로 읽는다. (html parsing) ⚠️ 이 방법은 좋은 방법은 아니다.⚠️ JavaScript 파일이 크면 다운 받는데 속도가 오래 걸리고 그렇게 오래 걸리게 되면 웹사이트가 사용자에게 노출되는 시간이 오래 걸리기 때문이다. 2. body 끝 : body 맨 끝에 script 파일을 포함시키는 것 [body 맨 끝 방법] 1. html 위에서 아래로 모두 읽는다. (html parsing) 2. html을 모두 읽어 페이지 준.. 2023. 7. 9. [DOM] 제어 대상 찾기 0. NodeList란? : 대상 찾기 메소드의 값으로 반환되는 객체이다. : html문서와 같은 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 1. getElementsByTagName : 문서 내에서 특정 태그에 해당되는 객체를 반환한다. : getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. HTML CSS JavaScript 만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다 HTML CSS JavaScript HTML CSS JavaScript 2. getElementsByClassName : 문서 내에서 특정 클래스 이름에 해당되는 객체를 반환한다. HTML CSS Java.. 2023. 7. 5. Document Object Model(DOM) : 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. : window 객체의 document 프로퍼티를 통해서 사용할 수 있다. : window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 2023. 7. 5. [BOM] 창 제어 1. Window open : window.open 메소드는 새 창을 생성한다. 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. 2. 새창에 접근 2023. 7. 4. [BOM] Navigator 객체 1. Navigator 객체란? : 브라우저의 제품명, 버전 등을 제공하는 객체이다. 주로 호환성 문제를 위해서 사용한다. 브라우저에 따라서 짜놓은 코드가 다르게 행동할 수 있다. 따라서 이때 JavaScript는 해당 브라우저에 따라서 작동하도록 해줄 필요가 있다. 그때 사용하기 위한 객체가 Navigator객체이다. 2. Navigator객체의 기능들 console.dir(navigator); // 전체 프로퍼티에 접근 console.dir(navigator.appName); // 특정 프로퍼티에 접근 위의 코드로 Navigator 객체의 모든 프로퍼티를 열람할 수 있다. App Name 웹브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nesca.. 2023. 7. 4. [BOM] Location 객체 1. Location 객체란? : 현재 브라우저 창에 열려있는 문서의 url을 알려주는 객체이다. 2. 문서의 주소정보 알아내기 console.log(location.href); // 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법 console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash) //url을 필요에 따른 조각으로 나눠서 알아내는 방법 http://127.0.0.1:5500/Location/location.html?id=10#bookmark location.protocol: 통신규약, 사용자가 서버에 접속할 때 어떤 방식으로 통신할 지 정의 locat.. 2023. 7. 3. [BOM] 전역객체 Window 전역객체 Window : 모든 객체가 속한 객체이며, 전역객체이다. : 창이나 프레임을 의미한다. 전역객체라는 의미는 만약 전역변수를 선언한다면 Window의 프로퍼티이고 함수를 선언한다면 Window의 메소드가 된다는 의미이다. 아래의 코드를 보면 전역변수를 호출한 것과 window객체의 프로퍼티를 호출한 것과 같은 결과와 같은 것들을 보여준다. 2023. 7. 3. Browser Object Model(BOM) Browser Object Model 이란? : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. : 예를 들어 현재 열려있는 웹사이트의 URL을 알아내는 것, 현재 동작하고 있는 웹 브라우저의 제품명등을 담아내도록 도와주는 것이 바로 BOM이다. 2023. 6. 30. HTML에서 JavaScript 로드하기 1. inline : 태그에 직접 자바스크립트를 기술하는 방식 장점 태그에 연관된 스크립트가 분명하게 드러난다. 단점 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다. 2. script : 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식 장점 html과 js 코드를 분리할 수 있다. 3. 외부파일의 분리 : js를 별도의 파일로 분리할 수도 있다 장점 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 캐쉬를 통해서 속도 향상, 전송량의 경량화를 도모할 수 있다. [file.html] [file.js] var hw = document.getElementById('hw'); hw.addEventListener(.. 2023. 6. 29. 반응형 헤더 만들기(드림코딩) 0. 레이아웃 구조 파악하기 1) 화면의 가로 크기가 넓은 경우 body header logo menu sns flex(row)와 justify-content: space-between을 사용할 예정 2) 화면의 가로 크기가 좁은 경우 body header logo menu sns flex(column)와 media query를 사용할 예정 1. 구조 만들기 [순서] 1. 전체적인 구조를 시맨틱 태그를 이용해서 만들어준다. DreamCoding Home Gallery Weddings FAQ Bookings 2. CSS 작성하기(넓이가 큰 경우) ✨ style을 작성할 떄는 최상위 레이아웃부터 꾸며주고 그 후에 레이아웃에 내용 부분을 꾸며주는 것이 중요하다. ✨ 1. nav 스타일링하기 세로 정렬된 것.. 2023. 6. 25. [CSS] link & import 1. link : 디자인(CSS)이 동일한 html 파일이 여러개 있을 때 css 파일을 따로 두어 한번에 스타일을 변경시키고 싶을 때 사용 [사용법] CSS 파일을 만들어준다. head 부분에 를 작성해준다. 2. import : link와 사용하는 이유는 동일하지만 사용법이 다르다. [사용법] 아래의 이미지와 같이 style 태그 안에 import를 사용해서 css 파일을 연결할 수 있다. 3. link vs import [link] 장점 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지보수에 용이하다. 직렬 방식이 아닌 병렬방식으로 다운로드를 하여 로딩속도가 빠르다. [import] 장점 하나의 css파일에 여러개의 페이지 css를 로드시켜 편리하다 단점 import를 많이 사용하면.. 2023. 5. 23. [CSS] transition 1. transition이란 : CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. : 속성 변경이 즉시 일어나게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 2. transition의 속성들 transition : transition을 적용할 속성을 작성한다. : transition을 적용할 속성과 지속될 시간을 설정한다. transition: height; transition: all 0.1s; transition-timing-function : 전환 효과의 시간당 속도를 설정한다. linear: 전환 효과가 처음부터 끝까지 일정한 속도로 진행된다. ease: 기본값으로, 전환 효과가 천천히 시작되어, 그 다음에는 빨라지고, 마지막에는 다시 느려진다. .. 2023. 5. 19. [CSS] transform 1. transform 이란 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성이다. 2. transform의 속성 도형에 커서를 올리면 transform이 실행됩니다. rotate(45deg) rotateX(45deg) rotateY(45deg) scale(1.5) scaleX(1.5) scaleY(1.5) skew(45deg, 45deg) skewX(45deg) skewY(45deg) translate(45px, 45px) translateX(45px) translateY(45px) 3. transform-origin 2023. 5. 17. [CSS] blend 1. blend란? : 두개의 이미지 또는 그 이상을 겹쳐놨을 때 다른 색상 차이를 혼합해서 생각지도 못한 효과를 만들어내는 것을 말한다. 2. blend 활용 배경 색상과 배경 이미지를 blend로 혼합해보자. 아래의 코드처럼 배경 색상은 빨간색이고 배경 이미지는 산일 때 background-blend-mode를 사용하면 아래와 같은 결과가 나온다. 배경 색상을 변경하거나 background-blend-mode의 속성을 변경하면 다른 느낌의 이미지를 만들 수 있다. 3. blend의 프로퍼티 요소 설명 normal 기본값, 색상 혼합이 적용되지 않고 상단에 위치한 요소의 색상으로만 표시된다. color 겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조와 채도를 가지되 뒤쪽 요소의 명도를 반영하여 혼합하여 표.. 2023. 5. 17. [CSS] filter 1. filter : filter속성은 요소에 대한 시각효과를 지정한다. (예시로 blur와 같은 것) none : 기본값으로, 이펙트를 없앤다. grayscale(%) : 이미지를 회색조로 변환시킨다. : 0%가 기본값, 100%는 이미지를 완전 회색처리한다. (음수는 없다.) sepia(%) : 이미지를 세피아톤으로 변환시킨다. : 0%가 기본값, 0~100% saturate(%) : 이미지 채도를 지정한다. : 0%는 이미지의 채도를 완전히 없앤다. 100%가 기본값이다. 100%를 넘기면 채도를 높인다. hue-rotate(deg) : 이미지 색조 회전을 적용시킨다. : 0deg~360deg invert(%) : 이미지 색상을 반전시킨다. : 0%는 기본값, 100%는 완전히 반전시킨다. opac.. 2023. 5. 15. [CSS] background background-color : 배경 색상을 부여하는 속성 background-color: ; background-image : 배경 이미지를 부여하는 속성 background-image: url(''); background-repeat : 배경(이미지)의 반복여부를 결정할 수 있는 속성 repeat: 기본값, x와 y축 모두 반복 repeat-x: x축으로만 반복 repeat-y: y축으로만 반복 no-repeat: 반복하지 않음 background-repeat: ; background-attachment : 배경(이미지)의 스크롤 여부를 결정할 수 있는 속성 fixed: 배경 이미지는 스크롤 되지 않는다. scroll: 기본값, 배경 이미지도 같이 스크롤 된다 background-attachment.. 2023. 5. 15. [CSS] float 1. float란? float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다. 하지만 현재 float는 웹 페이지의 레이아웃(Layout)을 작성할 때 자주 사용된다. 보통의 신문, 잡지등에서 이미지를 사용할 때는 이미지 옆에 글이 같이 나온다. 하지만 현재 아래의 코드를 사용하면 이미지 아래에 텍스트가 나오게 된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto reiciendis odio eius soluta dicta ut doloremque recusandae. Impedit accusamus doloremque ipsa, repellendus, hic adipisci non, enim eveni.. 2023. 5. 15. [CSS] media query 1. media query 기본 : 미디어 쿼리는 CSS 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해준다. 반응형 디자인이란 화면에 능동적으로 반응해서 최적화 된 모습을 보여주는 것이다. 미디어 쿼리의 문법 @media (조건) { /*...*/ } /* 사용 예시 - 브라우저의 넓이가 500px 보다 작으면 body의 배경색을 red로 변경한다. */ @media (max-width:500px){ body{ background-color: red; } } 💡 미디어 쿼리를 여러개 사용할 때는 순서를 중요하게 생각해야한다. 케스케이딩 때문에 나중에 나온 것이 우선 순위가 높아진다. "따라서 겹치는 구간이 있을 때는 더 낮은 구간이 우선순위가 높아질 수 있도록 나중에 작성해주어야한다." 미디어.. 2023. 5. 11. [CSS] Multi column 1. Multi column이란? : 아래와 같이 신문같은 자료에서 글이 많은 경우 column(열)을 여러개로 나누어서 글을 읽기 쉽게 하는 것이 바로 Multi-column이다. 2. column 속성들 column-count 입력된 숫자에 따라서 열을 나눈다. column-width 입력된 숫자의 넓이 만큼 열을 나눈다. 브라우저의 크기가 줄어들면 숫자의 넓이를 유지하기 위해서 단의 개수가 조절된다. 💡column-count와 column-width의 관계💡 column-count와 column-width을 같이 사용하면 column-count에 주어진 값 이상의 단락이 생기지 않는다. 다만 브라우저 크기가 줄어들면 단락의 개수는 줄어든다. column-gap 단락끼리의 간격을 조절할 수 있는 속성.. 2023. 5. 11. [CSS] flex 1. flex flex를 사용하기 위해서는 아래의 두 단계 코드가 있어야한다. container와 item이라는 태그가 있는 것이 아니고 해당 역할을 하는 부모, 자식 태그가 있어야한다는 의미이다. container와 item에 부여해야하는 속성 container item 속성 display order flex-direction flex-grow flex-wrap flex-shrink flex-flow flex-basis justify-content flex align-items align-self align-content display: flex; flex를 사용하기 위해서는 바깥쪽에 있는 container에 display: flex;를 작성해주어야한다. flex-direction flex-direct.. 2023. 5. 10. [CSS] position position이란 태그들이 화면상에 어디에 위치할 것인가를 결정하는 것 1. offset 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨저져 있는지 지정한다. right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨저져 있는지 지정한다. top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨저져 있는지 지정한다. bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨저져 있는지 지정한다. 2. position 종류 설명 static 문서의 흐름에 맞춰 배치한다. 기본값이다. relative 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다. absolute relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다. fixed 브라우저 창을 기준으로 위치를 배치한.. 2023. 5. 9. [CSS] margin 겹침 1. 마진겹침(h1끼리) 아래의 코드로 작성하고 살펴보면 아래의 이미지와 같은 주황색부분(마진)이 겹치는 현상이 나타나는데 이것을 마진겹침이라고 한다. hello world! hello world! 이상적으로는 첫번째 hello world!와 두번째 hello world! 사이의 간격이 100px이어야한다. 하지만 위의 이미지를 보면 100px로 설정되어 있다. 왜그럴까? 마진은 위 아래로 마진이 서로 만날때 첫번째 hello world!의 마진값과 두번째 hello world! 의 마진 값중 큰 값으로 합쳐진다. 이렇게 된 이유는 여러 요소를 세로로 배치할 때 맨위의 마진과 아래의 마진에 비해 중간에 있는 마진이 지나치게 커지는 것을 방지하기 위함이다. 2. 마진겹침(부모와 자식) hello world.. 2023. 5. 9. [CSS] box-sizing 1. box-sizing이란 width와 height는 기본적으로 콘텐츠 영역을 기준으로 설정이된다. 즉, 마진, 패딩, 테두리가 얼마인지와 상관없이 width와 height는 콘텐츠 영역에만 적용이 된다. box-sizing 적용 전 사진을 보면 콘텐츠 영역을 기준으로 width가 적용되어 small과 large의 width가 다르게 보인다. (콘텐츠 영역의 width만 적용되었기 때문이다.) 이 문제를 해결하기 위해서는 box-sizing을 사용해야한다. box-sizing: border-box를 설정한다면 테두리가 기준이 되어 width를 적용받게 된다. 따라서 아래의 사진을 보면 small과 large의 width가 같게 보인다. /* 적용 전 */ hello hello /* 적용 후 */ hel.. 2023. 5. 8. [CSS] box-model ⭐️⭐️⭐️ 박스모델이란? : 모든 HTML요소는 박스(box)모양으로 구성되며, 이것을 box-model이라고 한다. : 웹 문서 안에서 여러 요소를 원하는 위치에 배치하려면 CSS 박스모델을 잘 알고 있어야한다. 박스 모델의 기본 구성 콘텐츠 영역(content): 텍스트나 이미지가 들어 있는 박스의 실질적인 부분 패딩(padding): 내용과 테두리 사이의 간격, 눈에 보이지 않는다. 테두리(border): 내용과 패딩 주변을 감싸는 테두리 마진(margin): 테두리와 이웃하는 요소사이의 간격 2023. 5. 8. [CSS] inline-level, block-level inline-level과 block-level inline-level: 콘텐츠만큼만 영역을 차지하는 것 (코딩) block-level: 혼자 한줄을 다 차지하는 것 (hello world!) 이렇게 항상 고정되어있냐? 그건 아니다 아래의 방법으로 level을 변경시킬 수 있다. 2023. 5. 8. [CSS] Emment 단축키 1. HTML 표준문서 생성 "!"치고 "tab" 또는 HTML 입력후 HTML5 선택 2. 하위 요소 생성(>) 3. 동급 요소 생성(+) 4. 반복 태그 생성(*) 5. class와 id 설정(.)(#) 6. 그룹화(()) 7. 속성 [attribute]있는 태그 ([]) 8. 텍스트가 있는 태그({}) 9. 넘버링($) https://www.hanl.tech/blog/emmet-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%B0%8F-%ED%8A%B8%EB%A6%AD-9%EA%B0%80%EC%A7%80/ 2023. 5. 8. 이전 1 2 3 다음
