html29

• 

  [bootstrap] bootstrap modal창 띄우기 목차 bootstrap modal 😄 역시 미래의 내가 보기 위해 부트스트랩을 이용해서 모달창을 띄우는 방법을 기록한다. html 코드와 js로 modal을 띄우는 방법이 존재하는데 여기서는 간단하게 html만으로 띄운다. js로 하는 방법은 아래처럼 코드를 수정하면 된다. button에 id값 주고 해당 버튼 클릭 시 $("#모달아이디").modal("show"); 이렇게 이벤트를 준다. 수정 테스트 환경: 부트스트랩 5.2.3버전 수정 버튼을 누르면 id가 "userModal"인 모달창을 띄우는 예제이다. bootstrap.min.css, bootstrap.bundle.min.css 2개의 파일이 필요하니 직접 다운로드 하거나 CDN으로 불러오거나 하면 된다. 아래 링크에서 다운로드 or CDN Do.. IT/development 2022. 12. 8.

• 

  [JavaScript] javascript 동적 엘리먼트에 feather 아이콘 추가 목차 오늘도 역시 미래의 내가 보기 위해 기록을 남긴다. 동적 엘리먼트에 feather 아이콘 추가 😃 feather 아이콘은 처음 사용해봐서 삽질할게 전혀 아니었는데.. 삽질을 좀 했다. 우선 아래처럼 feather.js를 불러온 다음 만든 엘리먼트에 data-feather를 부여 후 script에서 feather.replace()를 호출하면 아이콘이 이쁘게 생긴다. 물론 아이콘은 data-feather에 포함된 것만 된다. home 동적 엘리먼트에 feather를 추가할 경우엔 아래처럼 하면 된다. 내 경우는 아래처럼 해서 아이콘으로 변환되지 않았었다. 당연히 엘리먼트를 그려주는 스크립트 범위안에서 feather.replace()를 해야 한다. reference: https://github.com/f.. IT/development 2022. 12. 2.

• 

  [HTML]HTML img 요소 목차 HTML img 요소 브라우저는 다른 HTML 요소와는 조금 다른 식으로 img 요소를 처리함 HTML 페이지를 읽고 난 후 웹 서버로부터 각 이미지를 회수한 뒤 보여줌 만약 웹페이지에 큰 이미지가 한 개 이상 있다면 섬네일(큰이미지를 보기 위해 사용자들이 클릭할 수 있는 작은 이미지)을 생성하여 웹 페이지를 좀 더 유용하게 하고 내려받는 속도를 빠르게 할 수 있음 웹 브라우저가 널리 지원하는 이미지의 형식으로는 JPEG, PNG, GIF가 있고 JPEG 형식은 사진이나 다른 복잡한 이미지에 적합 GIF나 PNG형식은 로고나 단색으로 구성된 간단한 그래픽과 선, 텍스트에 적합 JPEG 이미지는 다양한 품질로 압축될 수 있고 필요한 정도에 따라 파일 크기와 품질 사이에 최적의 균형을 맞추어서 사용하길.. IT/HTML&CSS 2022. 11. 30.

• [HTML]html5에서 추가된 새 요소중 중요한 요소 목차 html5에서 추가된 새 요소중 중요한 요소 article: 블로그 포스트, 사용자 포럼, 신문기사처럼 페이지에 있는 독립적인 콘텐츠를 표현 nav: 페이지에서 내비게이션 링크를 의미하는 콘텐츠를 포함 header: 페이지 상단이나, 페이지의 한 구간의 상단에 있는 콘텐츠 footer: 페이지 하단, 혹은 한 구간의 하단에 있는 콘텐츠 aside: 설명메모나 사이드바처럼, 페이지 콘텐츠에 대한 보충정보를 나타내는 콘텐츠를 포함 section: 보통 header나 footer와 함께 주제별로 콘텐츠를 모아 놓은 것 time: 날짜나 시간, 혹은 이 둘 모두를 포함 video: 페이지에 비디오 미디어를 추가할 때 사용 section과 article이 햇갈릴 수 있는데 관련된 콘텐츠를 묶을 때는 sect.. IT/HTML&CSS 2022. 11. 30.

• [HTML]video 요소 목차 video 요소 페이지에 동영상 콘텐츠를 추가할 때 사용되며 사용방법은 video controls autoplay width="512" height="288" src="video/test.mp4" 속성 - controls: 비디오와 오디오 재생을 조정하는 컨트롤을 제공(브라우저에 따라 다름) - autoplay: 속성명에서도 유추 가능하듯 이 속성 명시할 경우 페이지가 뜨자마자 동영상이 자동 재생됨 - poster: 비디오가 시작되지 않을 경우 포스터 이미지를 보여줄 수 있음, img요소의 alt와 비슷한 역할 - id: 아이디 추가해서 스타일 가미 가능 - src: img요소의 src와 흡사한데, 비디오 파일 원본의 위치가 담긴 url을 설정 - preload: 보통 최적화를 목적으로 비디오를 어.. IT/HTML&CSS 2022. 11. 30.

• 

  [HTML]html fieldset & legend 목차 html fieldset & legend html의 form이 더 커지기 시작하면 요소를 시각적으로 묶는 것이 도움이 되는데 이때 사용하는 것이 fieldset과 legend요소임 field요소는 input요소의 세트를 둘러싸고, legend는 input 그룹에 대한 라벨을 제공 selectbox에서 다중 선택이 필요할 경우 select 태그에 multiple을 추가하면 됨 해당 필드를 필수입력으로 해야 할 경우 태그에 required을 추가하면 됨 html은 플러그인 없이도 audio요소를 사용해 페이지에서 오디오를 재생하는 표준방법을 제공하고 있음 사용방법은 video요소와 매우 흡사함 audio src="songs/최재훈-비의랩소디.mp3" id="boombox" controls(볼륨 조절, .. IT/HTML&CSS 2022. 11. 30.

• 

  [CSS] html+css 활용 예제 풀기(2021-10-26) Home>우정복지증진>복지포털사이트 맞춤형 복지제도로 일방적으로 제공되는 기존 복지 서비스와는 달리 우정사업본부 복지포탈 사이트를 통해 우정종사자들의 선호와 필요성에 따라 개별적으로 자신에게 적합한 혜택을 선택하여 복지접수를 사용하는 제도에 초점을 맞춰맞춤형복지,복지플라자, 수련원예액,커뮤니티 활동, 복지정보 등 다양하고 알찬메뉴를 종합적이고 체계적으로 제공하고 있습니다.앞으로도 지속적으로 우정종사라 여러분들의 보다 풍요로운 삶의 질적 향상과 건전한 여가활동 증진을 위한 구심점 역할을 충실히 수행하도록 하겠습니다. 분야 내용 맞춤형복지 나의 복지점수, 사용내역조회 서비스 및 사용법, 복지카드에 대한 다양한 정보를 제공합니다. 복지플라자 우정종사자들을 위한 각종 제휴서비스를 한눈에 확인하실 수 있습니다. .. IT/HTML&CSS 2021. 11. 25.

• 

  [CSS] box-sizing / 가상태그 After, Before / 순서선택자(2021-10-21) box-sizing 태그의 규격을 정하는 기준 기본값은 content-box로 설정 되어있다. A-box B-box 가상태그 After/Before 선택된 태그의 첫번째 혹은 마지막 자식 태그를 css 문법을 통해 만들 수 있는 방법(css문법) list1 list2 list3 list4 순서선택자 형제 태그의 순서를 사용하여 선택자로 지정할 수 있다. *{margin: 0;padding: 0;} .abox{ width: 400px; /*기본값 : width는 테두리(border)를 뺀 콘텐츠 박스 너비를 의미한다!*/ height: 150px;/*기본값 : height는 테두리(border)를 뺀 콘텐츠 박스 높이를 의미한다!*/ border: 20px solid black; padding:10px; .. IT/HTML&CSS 2021. 11. 25.

• 

  [CSS] 박스모델 예제_Box model 공부(2021-10-12) box-model 모든 태그는 브라우저마다 조금씩 다르지만 기본적으로 마진과 패딩이 설정되어있다. margin 테두리 기준 바깥쪽 여백 padding 테두리 기준 안쪽 여백 list1 list2 list3 /* 스타일 초기화 = reset style */ *{margin:0;padding:0;} /* *은 '모든 태그'라는 뜻 */ /* h1{border:1px solid red;margin:0;padding:0;} h2{border:1px solid red;margin:0;padding:0;} p{border:1px solid red;margin:0;padding:0;} ul{border:1px solid blue;margin:0;padding:0;} /* ul 자체 padding left가 적용되어 .. IT/HTML&CSS 2021. 11. 24.

• 

  [CSS] Background_배경 스타일 넣기(2021-10-07) Background 백그라운드 속성은 해당하는 태그의 영역에 이미지 또는 색상을 입력할 수 있는 css 속성 백그라운드로 적용한 이미지 또는 색상은 컨텐츠가 아니기 때문에 자리를 차지하지 않는다. .box{ /* 블록레벨요소는 포함하는 컨텐츠에 따라 높이가 자동으로 조정됩니다. 블록레벨요소는 가로/세로 사이즈를 자유롭게 조절할 수 있습니다. 배경이미지는 컨텐츠가 아니기 떄문에 자리를 차지하지 않는다. so, 이미지가 전체적으로 안나오고, 반복되며 다른 컨텐츠를 밀어내거나 영역을 늘리지 않는다. = 순전히 장식용으로 사용! */ width:800px; height:800px; /* height의 기본값은 auto >> 들어가는 컨텐츠에 따라 자동 조절됨 */ background-color:#a5f3f1;/.. IT/HTML&CSS 2021. 11. 18.