프론트엔드 HTML CSS JAVASCRIPT32 [HTML, JAVASCRIPT] 요소가 화면에 들어왔는지 확인하는 방법, Intersection Observer API Intersection Observer API Intersection Observer는 보통 스크롤 이벤트에 반응하는 Lazy loading이나 애니메이션 트리거링을 할 때 주로 사용됩니다. 하지만 이것 자체로는 스크롤 이벤트를 직접 처리하는 도구는 아닙니다. 본질적인 기능은 훨씬 더 단순합니다. Intersection Observer API의 기능은 단순히 특정 요소가 사용자의 뷰포트(화면) 혹은 다른 요소 안에 들어왔는지 감지하는 것입니다. lazy loading에서 어느 시점에 데이터를 추가로 요청할 것인지 판단하는 것과 애니메이션 트리거링에서 언제 애니메이션을 시작할지 판단하는 것은, 모두 특정 요소를 적절한 곳에 위치시킨 후 Intersection Observer를 활용하여 그 요소가 화면에 들.. 2024. 1. 23. [HTML, CSS] display 속성 차이(block, inline, inline-block) CSS display 속성 display 속성값은 요소에 적용되는 방식에 따라 display-outside와 display-inside으로 나뉩니다. display-outside 요소를 둘러싼 레이아웃에서 해당요소가 어떻게 위치하는가와 관련됩니다. block, inline, inline-block 등이 있습니다. display-inside 요소 내부의 자식요소들을 정렬하는 방법을 설정합니다. flex, grid, table 등이 있습니다. display-inside는 자식요소를 어떻게 정렬하는지 결정하는 속성입니다. 여기에 flex나 grid등의 값을 설정해서 요소들을 정렬할 수 있습니다. flex, grid 레이아웃 시스템에 관한 내용은 이 글에서는 다루지 않고 여기서는 display-outside 속.. 2023. 12. 31. [HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리 HTML 요소에 그림자 추가하는 방법 CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 다양한 예시를 통해서 shadow 속성들을 살펴보겠습니다. 1. box-shadow /* | | */ box-shadow: 60px -16px red; /* | | | */ box-shadow: 10px 5px 5px black; /* | | | | */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | | | */ box-shadow: inset 5em 1em gold; 값의 개수에 따라 속성값이 적용되는 방식이 다 다릅니다. 길이가 2개 있으면 각각 offsetX, offsetY 길이가 3개 있으면 각각.. 2023. 12. 31. [HTML, CSS] 하트 만드는 방법 - before, after HTML 삽입 미리보기할 수 없는 소스 CSS로 하트 만들기 간단하지만 잘 안 되는 하트 만들기. 가상요소 ::before와 ::after 그리고 border-radius와 transform 속성을 활용합니다. ::before 요소의 앞에 가상의 자식 요소를 생성합니다. ::after 요소의 뒤에 가상의 자식 요소를 생성합니다. 가상 요소 before와 after는 각각 하트의 봉우리가 됩니다. 구현 HTML 삽입 미리보기할 수 없는 소스 1. heart 클래스에 ::befor와 ::after를 추가합니다. .heart { width: 300px; height: 300px; background: #ea2027; } .heart::before { content: ""; width: 300px; height.. 2023. 12. 28. [HTML, CSS] transform, transition으로 요소 이동 및 변형시키는 방법 / 동적인 효과(애니메이션) HTML 삽입 미리보기할 수 없는 소스 transform / transition css 속성 transform과 transition을 사용하면 위에 움직이는 도형처럼 html 요소에 동적인 효과들을 줄 수 있습니다. transform 속성은 요소에 회전, 크기 조정, 이동, 기울임 등의 변형을 주고, transition 속성은 변형의 제어를 담당합니다(동작 시간, timing-function 등). 참고로 transition으로 제어할 수 없는 속성들은 keyframe과 css animation 속성을 활용해야 합니다. 이 글에서는 transition과 transform만 사용해서 간단한 효과를 추가하는 방법을 살펴보겠습니다. 1. transform div가 하나 있습니다. HTML 삽입 미리보기할 수 .. 2023. 12. 28. [HTML, CSS] flexbox(display: flex) 총정리 flex는 grid만큼 다양한 기능을 가지고 있지는 않지만, 대부분의 레이아웃은 flexbox의 조합만으로도 충분히 구현이 가능합니다. grid layout에 관해서는 아래 깔끔하게 잘 정리된 글을 링크로 남깁니다. https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com Flex Layout Flex Layout은 css의 Flexbox를 활용한 화면구현 모델입니다. 복잡한 레이아웃을 간단하게 구현하거나 콘텐츠를 자동으로 정렬하는데 초점이 맞춰져.. 2023. 12. 28. [HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) 스크롤바 생성 overflowcss속성 overflow로 자식 요소의 크기가 부모 요소의 크기를 초과했을 때 스크롤바 생성을 제어할 수 있습니다. 수직과 수평 방향은 각각 oveflow-x, overflow-y로, 두 개를 동시에 제어할 때에는 overflow 속성을 사용합니다. overflow 속성을 사용할 때 주의할 점은 자식 요소의 크기가 부모 요소의 크기를 초과했을 때 출력 방식을 제어하는 속성이므로 부모 요소의 크기가 명시적으로 설정되어 있지 않은 상태에서는 의도한대로 제어되지 않습니다.overflow-x수평 방향 제어overflow-y수직 방향 제어overflow모두 제어 overflow-y 속성을 적용하면서 예시를 살펴보겠습니다. 1. visible속성을 설정하지 않을 때 적용되는 defa.. 2021. 4. 1. [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (2) - flex, grid 레이아웃 네이버 UI 클론코딩 (2) - flex, grid 레이아웃 이전 글에서 완성한 header, footer에 이어 이 글에서는 main 영역을 만들어보겠습니다. main에서는 모든 요소를 세부적으로 카피하지는 않고 레이아웃을 구현하는 작업을 두 가지 방식으로 살펴보겠습니다. 큰 단위부터 작은 단위로 grid cell로 나눠서 할당 1. 큰 단위부터 작은 단위로 가장 큰 요소부터 시작해서 하위 요소들을 점진적으로 나눠주는 방식입니다. body를 header, main, footer의 영역으로, main을 또다시 각 구역으로, 각 구역을 다시 세부적으로 계속 나눠줍니다. 우선 main영역을 크게 아래와 같이 나눠보겠습니다. 여기서는 flex와 grid 레이아웃을 자유롭게 사용할 수 있습니다. 이전 글에서도 .. 2020. 3. 28. [HTML, CSS] box-sizing 속성 / 테두리도 크기에 포함시키기 CSS box-sizing 속성 box-sizing 속성은 요소의 크기가 계산되는 방법을 결정합니다. content-box(기본값), border-box 두 가지 값이 있습니다. content-box 설정한 크기가 padding, border, margin을 제외한 순수한 요소의 크기가 됩니다. border-box 설정한 크기가 (요소 + padding + border)의 크기가 됩니다. 그림으로 보면 아래와 같습니다. content-box border-box 예시 content-box container 안에 box 두 개가 있습니다. box-sizing 속성은 따로 설정하지 않았으므로 기본값인 content-box입니다. 초록 빨강 container안에 green_box와 red_box가 딱 맞게 들어.. 2020. 3. 22. [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (1) 네이버 UI 클론코딩 (1) 네이버 사이트를 그대로 카피하면서 레이아웃을 잡는 연습을 해보겠습니다. 웹개발 초기에는 이렇게 잘 만들어진 사이트를 클론코딩하는 게 실력향상에 큰 도움이 됩니다. 레이아웃 설계 간단한 웹사이트라도 항상 설계를 먼저 하고 나서 작업에 들어가시는 게 정신건강에 좋습니다. 설계 시 가장 먼저 할 일은 페이지를 가장 큰 단위로 나누는 일입니다. 여기에는 정해진 규칙은 없고, 사이트의 목적에 따라 다양한 형태가 존재하지만 일반적으로는 header, main, footer의 세 가지 영역으로 나뉩니다. HTML5 요소로는 각각 랜드마크 요소인 네이버를 시작페이지로 쥬니어네이버 해피빈 검색 검색 메일 카페 블로그 지식iN 쇼핑 Pay TV 사전 뉴스 증권 부동산 지도 영화 뮤직 책 웹툰 .. 2020. 3. 21. [HTML, CSS] input창 클릭 시 CSS적용하는 방법(focus, animation input focus effect input 태그를 클릭했을 때 요소에 스타일을 적용하는 간단한 예시입니다. 마우스 클릭이나 탭 변환 등으로 커서가 진입했을 때 발생하는 이벤트는 focus입니다. 여기에 스타일을 적용하기 위해서는 css에서 :focus 가상 클래스에 속성을 적용하면 됩니다. 예시 input 태그가 있습니다. .my-input { padding: 10px; width: 250px; outline: none; border: 1px solid gray; } HTML 삽입 미리보기할 수 없는 소스 input 태그에 커서가 들어오면 border 색상을 바꾸고, boder-radius 애니메이션 효과를 주는 코드입니다. .my-input { padding: 10px; width: 250px; ou.. 2019. 12. 29. [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (2) - 미사일 이전글 2019.10.28 - [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 자바스크립트로 게임 만들기 - 포트리스(1) 탱크, 표적 HTML5의 canvas와 자바스크립트를 이용하여 간단한 포트리스 게임을 만들어보겠습니다. 1. 화면 틀 만들기 적당한 크기의 게임판을 만들었습 codingbroker.tistory.com 자바스크립트로 게임 만들기 - 포트리스(2) 미사일 탱크와 표적에 이어서 이번 글에서는 미사일을 구현해 보겠습니다. 다음 순서로 진행합니다. 파워게이지 충전 미사일 발사 판정 먼저 필요한 변수들을 선언합니다. 2019. 10. 29. [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 자바스크립트로 게임 만들기 - 포트리스(1) 탱크, 표적 HTML5의 canvas와 자바스크립트를 이용하여 간단한 포트리스 게임을 만들어보겠습니다. 1. 화면 틀 만들기 적당한 크기의 게임판을 만들었습니다. canvas에는 자바스크립트로 로직을 제어하기 위해 id값을 설정했습니다. 이후부터는 HTML 부분은 건드리지 않고 MDN - Canvas API Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용 developer.mozilla.org 2019. 10. 28. [HTML, JAVASCRIPT] 뒤로가기(이전 페이지), 앞으로가기(다음 페이지) 구현 - window.history.back(), forward(), go() 자바스크립트로 뒤로 가기, 앞으로 가기 구현 브라우저의 페이지 이동을 자바스크립트로 제어할 수 있습니다. 이를 위해 window - history 객체의 back, forward, go 메서드를 사용합니다. 예시 5개의 페이지가 있습니다. 모든 페이지의 구조는 동일합니다. one.html One go one go two go three go four go five 1. back 이전 페이지로 돌아갑니다. history.back(); 각 페이지에 누르면 이전 페이지로 돌아가는 을 만들어보겠습니다. One go one go two go three go four go five Back 버튼을 클릭하면 history object의 back() 메서드를 실행하도록 구현했습니다. 브라우저의 뒤로 가기와 동일하게 동.. 2019. 8. 29. [HTML, CSS] input, textarea의 placeholder에 스타일 작업하는 방법(색상 등) ::placeholder 가상 요소 ::placeholder를 사용하여 input과 textarea 태그의 placeholder에 스타일을 적용할 수 있습니다(간단 주의). 방법은 모두 동일하니 input 태그를 예시로 살펴보겠습니다. input 태그가 있습니다. HTML 삽입 미리보기할 수 없는 소스 email-input 클래스의 ::placeholder 요소를 설정합니다. HTML 삽입 미리보기할 수 없는 소스 감사합니다. 2019. 8. 23. [HTML, CSS] 아이콘 추가하는 방법 - fontawesome 사용법 HTML에서 fontawesome 아이콘을 사용하는 방법입니다.(V5) fontawesome에서 제공하는 CDN를 활용하면 쉽고 빠르게 아이콘을 사용할 수 있습니다. 1. head 태그에 아래 script를 추가합니다. 2. fontawesome 사이트에 접속합니다. https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 3. 좌측상단의 검색창에서 원하는 아이콘의 키워드를 검색합니다. 4. 검색된 아이콘을 클릭한 후 태그.. 2019. 8. 22. [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar Scrollbar 스크롤바 디자인 스크롤바 스타일에 관한 웹표준은 존재하지 않습니다. 스크롤의 동작은 overflow와 같은 css 속성을 사용하여 간단히 제어할 수 있지만, 스타일의 경우에는 과거엔 불가능했습니다. 스크롤이 다른 HTML 요소들처럼 태그로 존재하지 않기 때문입니다. 당연히 W3C(World Wide Web Consortium) spec에서도 스크롤바 스타일에 관한 명확한 규정은 찾아볼 수 없습니다. 그러나 각 브라우저에서 스크롤과 관련된 가상요소를 만들어내면서 이제는 간단한 css만으로도 스크롤바 스타일이 가능하게 되었습니다. 이 글에서는 webkit 브라우저(크롬, 사파리, 오페라 등)에서 유효한 css 가상요소를 사용해서 스크롤바를 디자인하는 방법에 대해서 살펴보겠습니다. 스크롤바의.. 2019. 8. 20. [HTML, CSS] 내용이 요소(div 등)를 벗어날 때 스크롤 적용하는 방법 - overflow CSS overflow HTML에서 요소 안의 내용이 요소를 벗어났을 때 스크롤을 생성하는 방법입니다. 다음과 같이 width와 height가 고정되지 않은 div 안에 텍스트가 있습니다. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis nam, nostrum sed vitae corporis quis quia deleniti quod doloremque consequuntur eius magni consectetur earum doloribus. Sapiente voluptas rem dignissimos repellat?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Bl.. 2019. 8. 18. [HTML, JAVASCRIPT, CSS] 마우스 오버 시 HTML 요소(이미지, div 등) 확대(zoomIn) 하는 방법. 옆에 요소 안밀려나게/밀려나게 HTML에서 마우스 오버 시 요소를 확대, 축소하는 방법입니다. 확대, 축소는 아래와 같이 자바스크립트로 CSS를 직접 제어하여 구현할 수도 있지만 function zoomIn(event) { event.target.style.width = "600px"; } 이 작업은 CSS class의 변경만으로도 구현이 가능한 작업이기 때문에 위와 같이 JAVASCRIPT로 style을 직접 제어하지는 않겠습니다. 자바스크립트로 style을 직접 제어하게 되면 요소에 인라인 스타일이 적용되는데, 이후의 코드 관리와 확장성에 부정적인 영향을 끼치는 경우가 많습니다. 예를 들면 inline 스타일은 요소에 적용되는 여러 가지 스타일 중에서 가장 우선순위가 높기 때문에, 이후에 다른 class로 스타일을 적용했을 때 특.. 2019. 8. 18. [HTML, JAVASCRIPT] fetch를 사용하여 데이터 요청 후 화면에 적용하는 방법 ajax fetch를 활용하여 프론트엔드에서 데이터 요청 후 화면에 적용하기 ajax는 Asynchronous JavaScript And XML의 약자로 HTTP 통신을 통해 비동기적으로 JSON(자바스크립트 객체)과 XML 데이터를 받아오는 기능을 말합니다. 현재 XML은 거의 쓰이지 않으니 예시에서는 JSON을 사용하겠습니다. ajax로 가져온 데이터는 DOM에 바로 적용하기 때문에 페이지를 다시 로드하지 않습니다. 예시 fetch API를 사용해서 ajax 통신으로 가져온 유저정보를 화면에 출력하는 기능을 구현해 보겠습니다. 다음과 같이 버튼과 div가 하나씩 있고, div의 id는 userInfo입니다. 클릭 버튼의 onclick 속성에 콜백함수를 설정합니다. 클릭 getUser라는 함수를 달아주었습니다... 2019. 8. 17. [HTML, CSS] div 자식요소 가운데 정렬하는 방법 - margin, text-align, flexbox HTML div 요소의 자식요소를 가운데 정렬하는 방법 HTML에서 자식요소를 가운데 정렬하는 3가지 방법입니다. 각 속성은 레이아웃에 따라 다르게 적용되니 상황에 맞는 방법을 활용해 보세요. margin text-align flexbox 부모 div(outer)와 자식 div(inner)가 있습니다. HTML 삽입 미리보기할 수 없는 소스 1. margin 수평 가운데정렬을 위한 가장 간단한 방법입니다. margin 속성으로 요소의 상하좌우 여백을 지정하면서 요소를 정렬할 수 있습니다. 구문 - 전달하는 인자의 개수에 각각 다음과 같이 적용됩니다. /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로.. 2019. 8. 14. [HTML] video 태그로 동영상 플레이어 만드는 방법 웹 페이지에 동영상 플레이어 만들기 HTML의 태그를 사용하면 간편하게 웹 페이지에 동영상 플레이어를 구현할 수 있습니다. 이 포스팅에서는 태그의 기본 사용법을 알아보겠습니다. 주요 속성 src 동영상 파일의 경로를 지정합니다. poster 동영상이 로드되기 전에 표시될 이미지를 설정합니다. controls 표준 동영상 제어 버튼(재생, 일시정지, 볼륨 등)을 표시합니다. autoplay 페이지 로드 시 동영상이 자동으로 재생되도록 설정합니다 loop 동영상을 반복 재생합니다. muted 동영상의 음소거 여부를 설정합니다. 1. src src 속성에 파일의 경로를, width와 height 속성에 크기를 지정하였습니다. 동영상이 페이지에 나타났습니다. 초기화면은 동영상의 맨 처음 프레임입니다. 2. po.. 2019. 8. 14. [HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제 HTML 요소의 배경화면 투명하게 만드는 방법 CSS의 opacity를 활용하여 HTML 요소를 투명하게 만드는 방법, 특히 자식 요소는 제외하고 배경화면만 투명하게 만드는 방법에 대해서 살펴보겠습니다. div와 그 자식 요소 h1입니다. Hello 배경화면을 흐리게 하기 위해 opacity를 적용하겠습니다. opacity는 0~1 사이의 값으로 설정할 수 있습니다. 기본값은 1이고 0으로 갈수록 투명해집니다. .container { width: 100%; height: 100%; text-align: center; background: url("./images/sunrise.jpg"); opacity: 0.5; } opacity를 0.5로 적용했습니다. 단순히 투명도를 조절할 때에는 이처럼 간단히 해결.. 2019. 8. 14. [HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset HTML에서 최상위 div를 화면 전체로 설정하는 방법 1. % 사용 width와 height를 100%로 설정하면 전체화면이 될 것만 같습니다만, 그렇지 않습니다. %는 부모 요소 길이의 몇%를 차지할 것인지 나타내기 때문에 먼저는 부모 요소의 길이가 설정되어 있어야 합니다. 즉, 다음과 같이 해당 요소만 100%로 설정해서는 전체화면이 되지 않습니다. Hello container의 부모 요소인 body와 html의 width, height를 지정해줘야 합니다. Hello 2. vw(viewport width), vh(viewport height) 사용 %가 부모 요소의 길이를 기준으로 계산된다면, vw, vh는 뷰포트의 길이를 기준으로 계산됩니다. 각각 뷰포트 가로길이의 몇% 인지와 세로길이의 몇% .. 2019. 8. 12. 이전 1 2 다음
