WEB (28) 썸네일형 리스트형 [Web][CSS]Media query 미디어 쿼리와 css선택자 우선 순위 ##목차 미디어쿼리 media query 코드리팩토링 선택자우선순위 1.미디어쿼리 media query 미디어 쿼리는 사용자의 단말기의 유형이나 특성 수치등에 따라 웹 사이트나 앱의 스타일을 수정하는 것이다. 특정 조건에 속할 때 다른 스타일을 적용하는 것이다. 그러니까 @을 사용해서 주로@medaia , @import을 사용해서 스타일을 바꾸거나 자바스립트에서 미디어 상태를 판별할 때 html요소중 특정매체만 사용할 때 사용한다. and, not, only등의 논리 연산자를 함께 쓸수 있다. 가장 대표적인 예로 화면의 크기에 따라 설정을 바꿔보자 See the Pen media query by Tae (@Tae54) on CodePen. 화면의 크기가 800px보다 크고 1000px보다 작을 때 h1의.. [Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 4.Carousel 캐러셀/ 카드 캐러쉘이란 콘텐츠의 슬라이드쇼와 비슷하다. 다음 컨테츠로 넘어가는 양식으로 스라이드와 덮어씌우기(fade)가 있다. 카드는 컨테이너의 일종으로 주로 가격표나 게시판처럼 쓴다. 1. 어떤 carousel을 쓰느냐 가장 상위 div으로 css선택자에 id, class, data-bs-ride의 값을 입력한다. id의 값으로 "carouselExample어쩌구" class 의 값으로 "carousel slide" +fade 효과 "carousel-fade"을 공백 다음에 넣어준다. data-bs-ride은 "carousel"이다 2. inner을 꾸려준다. 안에 각 슬라이드쇼 하나마다 넣을 이미지 혹은 문구를 으로 넣어준다. 다음 캐러셀 아이팀으로 넘어가는 지연시간을 변경하려면 data-bs-interval의.. [Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 -3. container와 grid이용하기 Bootstrap grid를 이용해서 컨텐츠 배열을 뷰포트에 따라 반응하도록 만들 수 있다. 1. 1열에 여러행 만들기 1 2 3 4 2. 1행에 여러열 만들기 1 2 3 4 뷰포트에 따른 배치하기 화면의 하나의 셀이 차지하는 공간이 최대 12이라 여기면 col-lg-1~12/col-md-1~12/ col-sm-1~12 으로 나눠서 lg은 pc 화면 md는 패드화면 sm 은 휴대폰 화면일 경우의 뷰포트 크기 설정을 할 수 있다. 예를 들어 가장 첫번째1의 셀이 가로를 모두 차지하고 싶다면 1 와 같이 변경해주면 된다. 이를 이용해서 배치 설정을 다양하게 할 수 있다. 4. container 기본컨테이너는 고정너비 컨테이너이다. 이전 포스팅에서도 grid을 만들 때 container안에 넣어서 저절로 pa.. [Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 2. 내비게이션 만들기 참조 : 공식 홈페이지 https://getbootstrap.kr/docs/5.1/components/navs-tabs/ 내비게이션과 탭 Bootstrap에 포함된 내비게이션 컴포넌트를 어떻게 사용하는지 문서와 예시입니다. getbootstrap.kr 1. 기본 내비게이션 부트 스트랩에서 내비게이션을 만들 수 있는 태그는 뿐만 아니라 으로 만들 수 있다. 홈 소개 문의 연결안함 위와 같은 코드를 보면 내비게이션을 일련의 목록 or 안에 만들어 두었다. : ul의 클래스를 nav로, 하위태그인 : 을 nav-item 클래스로 지정했다. 또 다른 방식으로 을 사용할 수도 있다. .nav 클래스는 display :flex;을 사용하므로 을 사용해도 같은 출력이다. 또한 링크 연결을 안할려면 disabled을 .. [Web][Bootstrap] Bootstrap v5.1(jQuery는 없는) - 1. 다운받거나 불러오기 공식홈페이지 참조 https://getbootstrap.com/docs/5.2/getting-started/introduction/ Get started with Bootstrap Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. getbootstrap.com https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr.. [JS] 기본문법 - 문자열 -정규표현식 정규표현식을 사용하면 많은 코드를 줄일 수 있다. 예를 들어 정규표현식을 사용하지 않은 경우 const string1 = "Kim 010-1234-5678" if ( string1.includes("Kim")|| string1.includes("010")|| string1.includes("-") ){ alert("Kim 의 전화번호는 "+ string1+ "입니다.") } 각각의 문자열들이 변수안에 포함되어있는 가의 조건문을 필요한 만큼 사용해야한다. 만일 정규표현식을 사용한다면 한 줄에 끝난다. const string1 = "Kim 010-1234-5678" if (/010|-|Kim/.test(string1)) { alert("Kim 의 전화번호는 "+ string1+ "입니다.") } /이문자가/.. [JS] 기본문법 - 문자열 const a = "hello" const b = "frontend" 1. 길이 a.length b.length Array.from(a).length Array.from(b).length console.log(a.length); //5 console.log(b.length); //8 console.log(Array.from(a).length); //5 console.log(Array.from(b).length); //8 Array.from(a).length 을 사용하는 이유 문자가 아닌 이모티콘을 문자취급하고 싶을 때 사용한다, 이모티콘은 4바이트로 표현되기 때문에 일반 .length을 사용하면 값이 2 이지만 실제로 차지하는 자리는 1이니까 4바이트 서러게이트쌍을 1로 표시하기 위해 array을 사용한.. [JS] 기본문법-숫자 1. 소수점 다루기 1. 반올림하기 : 소수점 0.5 이상이면 다음 정수 값으로 올려서 반환 Math.round(3.5) Math.round(3.8) 2. 버리기 : 값보다 작은 정수 반환 Math.floor() 3. 올림하기: 값보다 큰 정수 반환 Math.ceil 4. 값의 정수로 반환 Math.trunc() 음의 정수로 변환시에는 올림처리할 때는 절댓값은 적어져도 값은 전보다 0에 가까워지니 값은 커지는 것 2. random숫자 1.Math.random() :0이상 1미만의 수를 임의로 반환 const a=Math.floor(Math.random()*100); //0이상 100미만의 임의의 정수 console.log(a) const b=Math.floor(10+Math.random()*10); //.. 이전 1 2 3 4 다음
