자유롭고 싶은 직장인

이미 모달창(레이어팝업) 만들기는 여러번 소개했다. 2024.04.04 - [IT/Javascript] - 자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기 자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기 모달 창은 사용자와의 상호작용을 요구할 때 사용되는 팝업 창의 한 형태이다. 모달 창이 나타나면 일반적으로 사용자는 모달 창 외부의 콘텐츠에 대한 상호작용을 일시적으로 중지하고 모달 aortm2.tistory.com 2024.03.20 - [IT/JQuery] - 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기 모달창이란? 우리가 흔히 화면을 개발할 ..

요즘 웹 서핑을 하다보면 상단의 메뉴가 따라다니는 것을 심심치 않게 볼 수 있다. 이를 플로팅 메뉴라고 한다. 필자는 처음 퍼블리셔를 시작하고 이 메뉴를 처음 봤는데 '복잡한 자바스크립트나 제이쿼리가 들어가겠지?' 라고 생각했지만, CSS만으로도 충분히 쉽게 만들 수 있던 기능이어서 충격을 받았었다. 물론 자바스크립트나 제이쿼리로 못 만든다는 것은 아니다. 플로팅 메뉴는 왜 사용하는가? 사용자 경험 향상: 플로팅 메뉴는 사용자가 웹 페이지를 스크롤할 때 항상 메뉴에 쉽게 액세스할 수 있도록 한다. 이렇게 함으로써 사용자는 내비게이션을 찾기 위해 맨 위로 스크롤할 필요가 없어지므로 사용자 경험이 향상 된다. 내비게이션 효율성 증대: 긴 페이지에서 사용자가 내비게이션 메뉴를 지속적으로 사용할 수 있도록 함으..

HTML 태그 중 input checkbox, radio는 기본적인 디자인은 매우 심플하게 보여진다. 브라우저에 따라 다소 차이는 있지만, 사이트의 디자인이나 컨셉에 따라 디자인을 변경해야 하는 경우가 있다. 하지만 기본적으로 input을 직접 css로 바꾸는데에는 한계가 있기 때문에 label을 이용한다. input 체크박스와 라디오 태그는 지난번 글에서 설명했는데, 아직 checkbox나 radio가 궁금하다면 아래 링크를 타고 봐도 좋을 것 같다. 2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성 HTML 체크박스(checkbox) 만들기 input checked 속성 체크 박스와 라디오 박스는 비슷하면서도 다른 요소이다..

라디오 버튼은 여러 옵션 중에서 단 하나의 선택만을 허용하는 입력 요소이다. 체크박스와 유사하지만, 라디오 박스는 한 그룹 내에서 하나의 항목만 선택할 수 있다. 2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성 라디오(radio) 버튼을 사용하는 이유 단일 선택 강제: 라디오 버튼은 여러 옵션 중 하나만 선택할 수 있도록 강제한다. 이것은 사용자가 반드시 단 하나의 옵션을 선택해야 하는 상황에서 편리하다. 직관적 사용자 인터페이스: 라디오 버튼은 사용자에게 여러 옵션 중에서 단 하나의 옵션을 선택할 수 있도록 직관적인 인터페이스를 제공한다. 사용자가 명확하게 단일 선택을 해야 하는 경우에 적합하다. 정보의 명확한 표시: 라디..

체크 박스와 라디오 박스는 비슷하면서도 다른 요소이다. 체크박스와 라디오 박스는 웹 양식에서 사용자에게 선택 옵션을 제공하는데 사용된다. 체크박스(checkbox)를 사용하는 이유 다중 선택: 체크박스는 여러 항목 중에서 사용자가 필요한 항목을 선택할 수 있다. 이를 통해 사용자가 여러 옵션 중에서 필요한 것들을 동시에 선택할 수 있다. 명확한 시각적 표시: 체크박스는 사용자에게 선택 가능한 항목을 명확하게 시각적으로 표시한다. 사용자는 체크박스를 보고 선택할 수 있는 항목들을 쉽게 인식할 수 있다. 유연성: 체크박스는 선택 사항을 제공함으로써 사용자에게 유연성을 제공한다. 사용자는 필요한 항목을 선택하거나 선택하지 않을 수 있으며, 필요에 따라 선택 사항을 변경할 수 있다. 간편한 사용: 체크박스는 단..

드롭다운 메뉴란? 드롭다운 메뉴는 웹 페이지에서 사용자가 메뉴 아이템을 선택할 때 추가적인 옵션들이 드롭다운 형태로 나타나는 메뉴이다. 주로 웹페이지 상단 메뉴에서 사용되며, 메뉴 항목을 클릭하거나 마우스 호버하면 하위 메뉴 항목들이 펼쳐지는 형태이다. 필자도 javascript나 JQuery에 익숙치 않을 때 많이 쓰던 방식인데, CSS로 만든다고 해서 기능이 떨어지진 않는다. 드롭다운 메뉴 만들기 단순히 CSS만으로는 드롭다운메뉴를 만들 수는 없다. 먼저 HTML을 작성해 준다. menu01 submenu1 submenu2 submenu3 menu02 submenu1 submenu2 submenu3 menu03 submenu1 submenu2 submenu3 menu04 submenu1 submenu..

CSS 변수란? 놀랍겠지만 SCSS, SASS처럼 CSS도 변수를 지원한다. 지원 한지는 꽤 되었지만, 국내에서 적용을 못했던 이유는 바로 인터넷 익스플로러 때문이다. 필자도 프로젝트를 하면서 IE11을 크로스브라우징 해달라는 요청이 많이 받았었다. 하지만 2021년 8월에 IE11의 지원이 중단되면서, 변수를 사용할 수 있게 되었다. CSS 변수는 CSS에서 사용되는 값을 저장하고 재사용할 수 있도록 하는 기능이다 CSS 변수는 사용하기 전에 정의되어야 하며, 변수 이름 앞에 두 개의 대시 기호(--)를 사용하여 정의된다. 변수 선언 변수선언 방법은 간단하다 --변수명: 값; 변수를 어디에 선언하느냐에 따라서 전역변수와, 지역변수로 나뉘게 된다. 전역변수 선언은 root에 선언을 하면 된다. :root..

head 태그란? HTML 문서상단에는 로 끝나는데, 문서의 대한 정보가 들어 있습니다. 쉽게 생각하시면 문서의 머리말이라고 생각하시면 됩니다. title 태그 title 태그 태그는 말 그대로 웹페이지의 제목입니다. 태그안에 내용을 넣으면 내용이 바뀌게 됩니다. 한 문서 안에서 한번만 사용할 수 있습니다. 위와 같은 코드를 넣었을때 아래의 이미지와 같은 결과를 얻을 수 있습니다. 웹브라우저의 제목이 바뀐것을 확인 할 수 있습니다. meta 태그 태그는 HTML문서를 설명하는 태그로, 직접적으로 페이지에 표시가 되지 않습니다. 사람의 위한 것이라기 보단 프로그램이나 검색엔진을 위한 정보라고 생각하시면 좋을 것 같습니다. 위 코드에 나오는 는 문서에서 허용하는 문자들의 집합을 정의해주는 것입니다. UTF-..

저번에는 글에 HTML의 기본구조에 대해서 소개해 드렸습니다. 이번에는 HTML의 태그에 대해 소개해드리려고 합니다. HTML은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어갑니다. HTML 태그는 요소 이름, 또 그 요소를 둘러싸는 꺽쇠가로()로 이루어지며, 종료 태그 또한 꺾쇠괄호를 연 뒤 슬래시를 넣어 시작 태그와 구별합니다. 아래 그림은 웹페이지에서 많이 사용 되는 태그들을 순서대로 표시한 것인데, 참고용으로 보시면 될거 같습니다. h1 ~ h6 (제목 태그) h1~h6는 웹페이지에서 많이 사용되는 태그 중 하나인데, 그 중 h1은 로고를 삽입할때 많이 쓰는 태그중 하나입니다. 제목1 입니다. 제목2 입니다. 제목3 입니다. 제목4 입니다. 제목5 입니다. 제목6 입니다. 사용방법은 위..

HTML은 웹 페이지를 만들기위한 표준 마크 업 언어입니다. HTML이란? HTML은 Hypertext Markup Language의 약자로 웹개발의 가장 기본이 되는 언어입니다. 웹언어 중 가장 쉬운 언어라서 초보자도 쉽게 배울 수 있으며, 홈페이지를 작성하는데 쓰입니다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호""로 되어 있으며 종료 태그의 이름은 슬래시 문자 "/"로 시작됩니다. HTML기본구조 HTML은 특정 기능을 지원하는 태그 문법을 사용하는데, 그 종류는 100개가 넘습니다. 하지만 실제로 사용하는 태그는 한정적입니다. HTML의 기본 구조는 아래와 같습니다. 내용 : 현재 문서가 HTML5 문서임을 정의합니다. 모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 ..