[jQeury] jQuery로 CSS 속성 동적으로 추가, 수정, 삭제하기

jQuery로 CSS 속성 동적추가, 수정, 삭제하기 [요약] 기존의 html class에 css style속성 추가, 삭제하기 class 추가후 style 속성 추가하기 class 삭제하기 jQuery를 이용해서 html 요소에 CSS 속성을 동적으로 추가, 수정, 삭제하는 방법을 알아보자. 1. 기존에 html에서 정의되어 있는 id 또는 클래서의 속성에 css의 style 속성을 직접 추가, 삭제하는 방법과 2. html에 class를 새롭게 추가한 후 style 속성을 추가하는 방법, 3.그리고 class를 삭제하는 방법에 대해서 알아보자. [HTML에서 jQuery 로드] 우선 jQuery를 사용하기 위해서는 HTML의 head에서 jQuery를 로드한다. [기존의 HTML class에 styl..

2022.08.29

[CSS] 반응형 웹 미디어쿼리(@media) 디바이스 별 해상도 분기점

CSS 반응형 웹 미디어쿼리(@media) 사용방법 미디어쿼리는 css3에서부터 사용할 수 있으며, 사용방법은 다음의 두가지 방법으로 사용할 수 있다. 1. 가장먼저 HTML head 부분에 meta viewport를 설정해준다. 2-1. style.css 파일에 함께 정리하여 사용하고 link로 호출하여 사용하는 방법. 2-2. 2-1항과는 별도의 media_style.css 파일을 따로 정리하여 사용조건에 부합할때 불러와서 사용하는 방법. 만약 본인이 필요하다고 판단되면 해상도별로 미디어css파일을 따로 만들어서 호출하여 쓰는것도 가능하다. 3. 스타일시트에서 @media 선언후 스타일입력 @media (조건입력) { 스타일 입력 } CSS 반응형 웹 미디어쿼리(@media) 디바이스 별 해상도 분기..

2022.08.25

[HTML+CSS] 반응형 게시판 만들기 무료강좌

[HTML+CSS ] 반응형 게시판 만들기 무료강좌 강사: 렛츠코딩앤플레이 사이트(출처) : https://blog.naver.com/code-ing/222272856716 난이도 : ★★☆ 강의시간 : 총 7강 (1시간 37분) 강의제작년도 : 2021년 추천강도 : ★★★☆ 비고 : 내용은 알차고 좋은데 소리가 넘나 작아서 아쉽네요... 강의내용 HTML과 CSS를 이용한 반응형 게시판을 만들기 무료강좌 완료 예시이미지 강의링크 (링크를 클릭하시면 강의페이지로 이동합니다.) 반응형 게시판 만들기 1 - 전체 구조 설계, 타이틀과 버튼 스타일 반응형 게시판 만들기 2 - 게시판 목록과 페이지 버튼 반응형 게시판 만들기 3 - 글 보기 페이지(+가상선택자를 이용해서 라인 ..

2022.08.14

[CSS] 말 줄임 효과 (한줄 효과, 두줄 효과, 세줄 효과)

말줄임 효과를 통해 글씨를 안보이게 하거나 말줄임표를 표시하여 주는 효과입니다. 한 줄 효과 예시) 동해물과 백두산이 마르고... /* CSS */ .ellipsis1 { width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 두 줄 효과 예시) 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세... /* CSS */ .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 세 줄 효과 예시) 동해물과 백두산이 마르고 닳도록 하..

2021.04.05

[HTML+CSS+JS] 메가박스 영화사이트 클론코딩 무료강의

HTML+CSS+JS 메가박스 영화사이트 클론코딩 무료강의 강사: WEBSTORYBOY 사이트(출처) : wtss.tistory.com/301 강의내용 : 메가박스 영화사이트를 클론코딩하면서 배우는 HTML+CSS+JS 난이도 : 중급 강의편수 : 총 46강 강의제작년도 : 2019년 비고 : - 참고이미지 강의링크 (링크를 클릭하시면 강의페이지로 이동합니다.) 디자인 만들기 기본 셋팅 그리드 시스템 이해하기 360 그리드 만들기 600 그리드 만들기 768, 1280 그리드 만들기 960 그리드 만들기 레이아웃 만들기 헤더 헤더 반응형 배너 배너 반응형 컨텐츠1 컨텐츠1 반응형 컨텐츠1 반응형 수정 컨텐츠 2 컨텐츠 2 반응형 컨텐츠 3 컨텐츠 3 반응형 컨텐츠4 컨텐츠4 반응형 컨텐츠5..

2021.03.20

[HTML+CSS+JS] 코딩연습 003 (메가박스 영화사이트 클론코딩)

HTML+CSS 코딩연습 세번째: 메가박스 영화사이트 클론코딩 사용언어 : HTML, CSS, JavaScript 작업기간 : 2021.03 (2주) 참조 : WEBSTORYBOY wtss.tistory.com/category/SITE/03%20MEGABOX 비고 : - [ Sample Image ] 이미지를 클릭하시면 사이트로 연결됩니다. [ Source Code Download ] 아래 링크를 통해 소스코드를 다운받으실 수 있습니다. github.com/ywc1085/Meboxbox_Website_clone_coding ywc1085/Meboxbox_Website_clone_coding 메가박스 사이트 클론코딩하기. Contribute to ywc1085/Meboxbox_Website_clone_co..

2021.03.20

[CSS] WEB2 - CSS 기초 무료강의

CSS 기초 무료강의 [WEB2] 강사: 생활코딩 사이트(출처) : opentutorials.org/course/3086 강의내용 : CSS에 대한 개요 및 기초 지식에 대한 강의 난이도 : 초급 강의편수 : 총 16강 강의제작년도 : 2017년 비고 : - 참고이미지 강의링크 (링크를 클릭하시면 강의페이지로 이동합니다.) 0. 커버페이지 CSS 등장 이전의 상황 CSS의 등장 혁명적 변화 CSS 속성을 스스로 알아내는 방법 CSS 선택자를 스스로 알아내는 방법 박스모델 그리드 반응형 디자인 CSS 코드의 재사용 수업을 마치며

2021.03.15

[CSS] 텍스트가 넘칠때... (텍스트 한줄효과) text-overflow

텍스트가 넘칠때... text-overflow CSS의 속성 세트가 숨겨진 오버 플로우의 콘텐츠에서 문자열이 넘치는 현상을 다음과 같이 정리할 수 있다. (이 text-overflow의 속성은 인라인에서 블록 컨테이너 요소를 넘쳐나는 콘텐츠에만 영향을 준다.) text-overflow: clip; /* 컨텐츠 영영의 한도에서 텍스트를 자르기 때문에 문자 중간에서 잘릴 수 있음 */ text-overflow: ellipsis; /* 잘린 텍스트를 줄임표 (...)로 표시하여 줌 하지만 줄임표를 표시할 공간이 없으면 역시 잘림...*/ text-overflow: "-"; text-overflow: ""; 텍스트가 컨테이너를 넘치게 하려면 다른 CSS 속성을 설정하도록 한다. overflow: hidden; ..

2021.03.13

[HTML+CSS] 반응형 웹 사이트 만들기 무료강의

HTML+CSS 반응형 사이트 만들기 무료강의 강사: webstoryboys 사이트(출처) : wtss.tistory.com/category/SITE/02%20RESPONSIVE 강의내용 : HTML과 CSS를 이용한 반응형 웹사이트를 따라하면서 만들어보는 강좌. 난이도 : 초급 강의편수 : 총 36강 참고이미지 (완성 예제) 강의링크 (링크를 클릭하시면 강의페이지로 이동합니다.) 기초 시멘틱 태그 미디어 쿼리 레이아웃 반응형 레이아웃1 반응형 레이아웃2 반응형 레이아웃3 반응형 레이아웃4 반응형 레이아웃5 사이트 만들기 문서 셋팅 아웃라이너 헤더 메뉴 헤더 타이틀 헤더 아이콘 헤더 아이콘 공유하기 전체 메뉴 라인 효과 타이틀 헤더 반응형 컨텐츠 레이아웃 컨텐츠 타이틀 메뉴 메뉴 반응형 게시판 한줄 효과..

2021.03.13

[CSS] 패딩값과 보더값을 포함시키는 box-sizing

패딩값과 보더값을 포함시키는 box-sizing 모든 요소는 margin, norder, padding 값을 가지고있다. 즉, width값과 height값을 가지고있다 따라서 기본적으로 요소의 가로값과 세로값은 object + margin + padding + border box-sizing 속성은 패딩과 보더의 포함여부를 설정 a {box-sing: border-box;} /* width값 안에 padding과 border값을 포함. */ a {box-sizing: content-box;} /* width값 안에 padding과 border값을 불포함. */ * box-sizing은 반응형 작업시 %와 px를 같이 쓸 경우 용이. * 처음 reset.css 설정시 box-sizing: border-bo..

2021.03.12