본문 바로가기

공부46

[VSCode] SCSS 설치 및 설정 방법 SCSS 설치 및 설정 방법 SCSS란, 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS Preprocessor입니다. SCSS의 기능에 대하여 더 자세히 알고 싶으시다면, 여기를 클릭해 주세요. 오늘은 VSCode에서 SCSS를 사용하기 위한 설치 및 설정 방법을 알아보도록 하겠습니다. 1. SASS 설치 먼저, 확장 프로그램(Extenstion, 단축키 Ctrl + Shift + X)에서 Sass를 설치해 줍니다. 하나 더 설치해 줍시다. Live Sass Compiler는 실시간으로 CSS를 Scss로 컴파일해 줍니다. 위와 같이 Scss 파일을 만들었을 때, VSCode의 하단에 나타나는 Watch Sass 문구를 통해 정.. 2022. 9. 19.

자바스크립트 슬라이드 효과 : 버튼 자바스크립트 슬라이드 효과 : 버튼 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 해당하는 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. CSS 소스 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모(움직이는 부분) */ display: .. 2022. 9. 18.

자바스크립트 패럴랙스 효과 : 나타나기 자바스크립트 : 패럴랙스 효과 : 나타나기 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤의 위치에 따라 콘텐츠의 각 내용물들이 순차적으로 나타나는 유형을 작업해 보도록 하겠습니다. 1. JAVASCRIPT로 스크롤 이벤트 만들어 주기 2-1) addEventListener window.addEventListener("scroll", 함수명); 지금까지는 addEventListener로 스크롤 이벤트를 작업해 주었습니다. 그러나, 이 방법은 스크롤을 매번 감지하기 때문에 버벅거림 현상이 나타날 수 있습니다. 따라서 이번에는 재귀함수를 사용하여 작업을 하도록 하겠습니다. 2-2) 재귀함수(Recursion) function scroll(.. 2022. 9. 18.

제이쿼리 : 속성 관련 메서드 제이쿼리 : 속성 관련 메서드 오늘은 JQuery의 주요 메서드들 중, 속성과 관련된 메서드를 알아보도록 하겠습니다. 1. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({href: "http://icoxpublish.com", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각 a 요소 href 속.. 2022. 9. 4.

자바스크립트 : 요소 크기 메서드 요소 크기 메서드 자바스크립트에는 요소의 크기 및 위치를 다양한 방법으로 표현하는 속성과 메서드가 있습니다. 크기 및 위치를 표현하는 속성과 메서드 속성 및 메서드 설명 element.clientWidth 요소의 가로값(margin, border 미포함) element.clientHeight 요소의 세로값(margin, border 미포함) element.clientTop 요소의 Y축 값(부모 기준) element.clientLeft 요소의 X축 값(부모 기준) element.offsetWidth 요소의 가로값(border, padding 포함) element.offsetHeight 요소의 세로값(border, padding 포함) element.offsetTop 요소의 Y축 값(문서 기준) elemen.. 2022. 9. 1.

제이쿼리 : 연결 방법 제이쿼리 : 연결 방법 JQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. JQuery를 이용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 1. JQuery의 장점 1. JQuery는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다. 2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다. 3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다. 4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다. 5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다. 6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있.. 2022. 8. 29.

CSS 애니메이션 만들기 : 빙글빙글 돌아가는 원 CSS 애니메이션 : 빙글빙글 돌아가는 원 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 돌아가는 원을 두 개 만들 것이기 때문에, circle 이름을 가진 span 태그를 두 개 작업해 주었습니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.. 2022. 8. 29.

자바스크립트 슬라이드 효과 : transition 자바스크립트 : 슬라이드 효과 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, slider__img 박스 안에는 이미지 5장을 삽입해 주었습니다. CSS 소스 각각의 이미지가 담긴 slider 클래스에는 absolute와 z-index 속성을 부여함으로써 이미지를 층층이 쌓아, 한 장처럼 보이게끔 작업해 주었습니다. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-item.. 2022. 8. 29.

CSS : 요소 숨기기 CSS : 요소 숨기기 우리가 코딩을 할 때, 때때로 웹 접근성 준수, 탭 효과 등을 이유로 어떠한 요소가 화면에서 보이지 않도록 설정해야 할 필요가 있습니다. 오늘은 CSS로 요소를 숨기는 5가지 방법에 대하여 알아보겠습니다. 1. display로 속성 주기 display: none; display는 요소가 화면에 보여지는 방식을 결정하는 속성입니다. display: none; 속성을 추가하면 요소를 숨길 수 있습니다. 이 방법은 애니메이션을 사용할 수 없고, 요소가 차지하는 영역이 사라집니다. 2. opacity 속성 주기 opacity: 0; opacity는 요소의 투명도를 의미합니다. 요소의 투명도를 0으로 처리하는 이 방식은, 요소가 불투명해지는 애니메이션을 사용할 수 있습니다. 요소가 차지하는.. 2022. 8. 25.

자바스크립트 : 함수의 유형 함수의 유형 자바스크립트에서 함수의 유형은 여러 가지가 있습니다. 오늘은 다양한 함수의 유형에 대하여 알아보겠습니다. 1. 함수와 매개변수를 이용한 형태 자바스크립트에서 함수의 특징은 실행문의 집합체라는 점과, 재활용이 가능하다는 점입니다. 함수와 매개변수를 이용하면, 다음과 같이 함수를 재활용할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " +str2 + "되었습니다.") } func("1", "함수", "실행"); // 매개변수를 str1, str2로 전달 func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 .. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : match() 문자열 검색 메서드 : match() match() 메서드는 문자열(정규식 포함)을 검색하고, 배열로 반환합니다. match() 메서드 1. "문자열".match("검색값") const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); const currentStr2 = str1.match("reference"); const currentStr3 = str1.match("r"); 결과보기 javascript reference r 2. "문자열".match(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1.match(/reference/); co.. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : search() 문자열 검색 메서드 : search() search() 메서드는 문자열(정규식 포함)을 검색하고, 위치값(숫자)을 반환합니다. indexOf() 메서드와 같지만, search() 메서드는 정규식을 사용할 수 있다는 점에서 차이가 있습니다. search() 메서드 1. "문자열".search("검색값") const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); const currentStr2 = str1.search("reference"); const currentStr3 = str1.search("j"); const currentStr4 = str1.search("a"); const currentStr5 = st.. 2022. 8. 22.

HTML : 블록 구조와 인라인 구조 블록 구조와 인라인 구조 HTML 태그를 배우기 전에는 요소의 유형과 성질을 먼저 알아두어야 합니다. 요소의 유형은 '블록 구조'와 '인라인 구조'로 나누어집니다. 블록 구조와 인라인 구조의 특징 요소 유형 특징 블록 구조 1. 블록 구조는 줄 바꿈이 일어납니다. 2. 블록 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 블록 구조 중에는 블록 구조를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. 인라인 구조 1. 인라인 구조는 줄 바꿈이 일어나지 않습니다. 2. 인라인 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 인라인 구조는 블록 구조를 자식 요소로 포함할 수 없습니다. HTML5로 넘어오면서 블록 구조와 인라인 구조.. 2022. 8. 21.

CSS : SCSS 알아보기 CSS : SCSS 알아보기 CSS는 비교적 배우기 쉬운 편이지만, 불편한 점이 많습니다. 프로젝트의 규모가 커질수록, 불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재 등 불편을 느낄 것입니다. 그 불편을 해소하기 위해, 우리는 CSS Preprocessor라고 불리우는 Sass, Less, SCSS 등의 기능을 사용할 수 있습니다. 오늘은 그 중, SCSS에 대하여 알아보겠습니다. SCSS란? CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 .. 2022. 8. 18.

자바스크립트 : 문자열 검색 메서드 : includes() 문자열 검색 메서드 : includes() includes() 메서드는 문자의 포함 여부를 검색하여, 불린(true, false)을 반환합니다. 즉, 배열이 특정 요소를 포함하고 있는지 판별합니다. includes() 메서드 참고! includes() 메서드는 대/소문자를 구분합니다. 1. "문자열".includes("검색값") const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); const currentStr2 = str1.includes("j"); const currentStr3 = str1.includes("b"); 결과보기 true true false 2. "문자열".includes("검색값", 위.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : padStart() / padEnd() 문자열 변경 메서드 : padStart() / padEnd() padStart() / padEnd() 메서드는 주어진 길이에 맞게 앞 / 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. padStart() 메서드 padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); // 현재 문자열의 길이보다 작다면, 채워넣지 않고 그대로 반환합니다. const currentStr2 = str1.padStart(2, "0"); const currentStr3 = str1.padStart.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : split() 문자열 변경 메서드 : split() split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다. split() 메서드 split() 메서드는 문자열에서 구분자가 등장하면, 해당 부분을 삭제하고 남은 문자열을 배열로 반환합니다. 구분자가 등장하지 않거나 생략되었을 경우, 배열은 원본 문자열을 유일한 원소로 가집니다. 1. "문자열".split(구분자) const str1= "javascript reference" const currentStr1 = str1.split(''); const currentStr2 = str1.split(' '); const currentStr3 = str1.split('j'); const currentStr4 = str1.split('a'); const curr.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : repeat() 문자열 변경 메서드 : repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. 즉, 이름 그대로, 선택한 문자열을 반복합니다. repeat() 메서드 다음과 같이, count 안에 문자열을 반복할 횟수(0과 양의 무한대 사이의 정수)를 작성합니다. str.repeat(count); const str1 = "javascript"; const currentStr1 = str1.repeat(0); const currentStr2 = str1.repeat(1); const currentStr3 = str1.repeat(2); 결과보기 javascript javascriptjavascript 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : concat() 문자열 변경 메서드 : concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. concat() 메서드 concat() 메서드는 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다. const str1 = "javascript"; const currentStr1 = str1.concat("reference"); const currentStr2 = str1.concat(" ", "reference"); const currentStr3 = str1.concat(", ", "reference"); const currentSt.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : replace(), replaceAll() 문자열 변경 메서드 : replace() / replaceAll() replace() / replaceAll() 메서드는 선택한 문자열을 변경하고, 변경된 문자열로 반환합니다. replace() / replaceAll() 메서드 replace() / replaceAll() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. 1. "문자열".replace("찾을 문자열", "변경할 문자열") const str1 = "javascript reference" const currentStr1 = str1.replace("javascript",.. 2022. 8. 17.

자바스크립트 : 문자열 결합 : 템플릿 문자열 문자열 결합 : 템플릿 문자열 템플릿 문자열은 어떠한 경우에, 어떻게 사용할 수 있을까요? 다음 예제를 통해 템플릿 문자열에 대하여 알아보도록 하겠습니다. 문자열 결합 일반적으로 문자열을 결합할 때는 "+" 연산자를 사용합니다. 그 사용 방법은 다음과 같습니다. const str1 = "자바스크립트"; const str2 = 100; document.write(str1 + str2 + "제이쿼리" + 100); document.write(str2 + str1 + "제이쿼리" + 100); 결과보기 자바스크립트100제이쿼리100 100자바스크립트제이쿼리100 위 예제에 나타난 것처럼, "+" 연산자를 사용하면 변수와 문자열, 숫자를 쉽게 결합할 수 있습니다. 템플릿 문자열 템플릿 문자열(Template l.. 2022. 8. 17.

웹사이트 만들기 : 이미지 유형 레이아웃02 레이아웃 : 이미지 유형02 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. 이번에는 이미지가 총 세 개이며, 이미지 위에 마우스를 hover하면 '자세히 보기' 버튼이 나타나는 CSS 요소도 추가하였습니다. HTML 소스 먼저, 세 개의 article 태그를 만들어 각각 이미지를 첨부해 주었습니다. article 태그 안에서도 image 부분과 desc 부분을 나누어 작업해 주었습니다. 바다에 사는 생물들 바다에는 어떤 생물들이 살고 있을까요? TTUNG-E 자세히 보기 JingJing-E 자세히 보기 Jibgeo-Sajang 자세히 보기 CSS 소스 폰트는 지마켓 산스를 사용하였고, display: flex를 이용하여 세 개의 이미지를 가로로 배치하였습니다. overflow-hidde.. 2022. 8. 17.

웹사이트 만들기 : 이미지 유형 레이아웃01 레이아웃 : 이미지 유형01 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 카드 유형과 유사하게, 두 개의 카드를 만들어 이미지를 백그라운드 방식으로 삽입했습니다. 웹 표준 준수를 위해, a 태그에는 title을 추가해 주었습니다. 세상의 귀여운 댕댕이 강아지 종류는 매우 다양합니다. 하지만 하나같이 정말 귀엽습니다. 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 CSS 소스 폰트는 넥슨 Lv1 고딕을 사용하였고, display: flex를 이용하여 두 개의 이미지를 가로로 배치하였습니다. /* fonts */ @import url.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : trim() / toUpperCase() / toLowerCase() 문자열 변경 메서드 : trim() / toUpperCase() / toLowerCase() trim() 메서드는 문자열의 공백을 제거해 주고, toUpperCase() / toLowerCase() 메서드는 문자열을 대 / 소문자로 변환해 줍니다. 하나씩 살펴보도록 하겠습니다. trim() 메서드 trim() 메서드는 문자열 양 끝의 공백을 제거합니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다. trimStart() 메서드를 사용하면 앞 공백, trimEnd() 메서드를 사용하면 뒤 공백만을 제거해줄 수 있습니다. 문자열 중간의 공백은 제거할 수 없습니다. const str1 = " javascript " const currentStr1 =.. 2022. 8. 17.

자바스크립트 검색 효과 : includes() 자바스크립트 : 검색 효과 : includes() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 includes() 메서드를 이용하여 CSS의 다양한 속성을 검색할 수 있는 웹사이트를 작업해 보도록 하겠습니다. HTML 소스 HTML로 뼈대를 먼저 잡아주었습니다. 헤더 영역에는 내비게이션 메뉴를, 메인 영역에는 검색창, 하위 목록들을 작성해 주었습니다. 각각의 하위 목록에는 data-type을 추가해 주어, 애니메이션, 보더 등의 유형 이름을 검색해도 결과값이 나타나도록 작업해 주었습니다. 아래 소스는 메인 영역의 HTML 소스로, 나머지 영역의 소스는 하단의 '원본 소스 보기' 버튼을 클릭하면 확인할 수 있습니다. includes()를 이용하여 검색하기 C.. 2022. 8. 17.

자바스크립트 검색 효과 : indexOf() 자바스크립트 : 검색 효과 : indexOf() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. indexOf() 메서드를 이용하여 CSS의 다양한 속성을 검색할 수 있는 웹사이트를 작업해 보도록 하겠습니다. HTML 소스 HTML로 뼈대를 먼저 잡아주었습니다. 헤더 영역에는 내비게이션 메뉴를, 메인 영역에는 검색창, 하위 목록들을 작성해 주었습니다. 아래 소스는 메인 영역의 HTML 소스로, 나머지 영역의 소스는 하단의 '원본 소스 보기' 버튼을 클릭하면 확인할 수 있습니다. indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 전체 속성 갯수 : align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘.. 2022. 8. 17.

자바스크립트 : 문자열 검색 메서드 : indexOf() / lastIndexOf() 문자열 검색 메서드 : indexOf() / lastIndexOf() indexOf(), lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 찾고, 그 위치값을 숫자로 반환합니다. indexOf() 메서드 indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. 1. indexOf() : "문자열".indexOf(검색값) const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); const currentStr2 = str1.indexOf("reference"); const currentStr3 = str1.in.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : slice() / substring() / substr() 문자열 변경 메서드 : slice() / substring() / substr() slice(), substring(), substr() 메서드는 문자열에서 원하는 값을 추출하여 문자열로 반환합니다. 세 가지 메서드는 모두 비슷하면서도, 작동 방법은 조금씩 다릅니다. slice() 메서드 slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 복사본을 반환합니다. 두 가지 방법으로 작동시킬 수 있습니다. 1. slice : "문자열".slice(시작 위치) const str1 = "javascript reference"; const currentStr1 = str1.slice(0); const currentStr2 = str1.slice(1); const currentStr3.. 2022. 8. 17.

CSS : 미디어쿼리(media query) 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 IPhone X 375 812 IPhone 6, 7, 8 375 667 IPhone 6, 7, 8 plus .. 2022. 8. 15.

HTML : 구조 관련 요소 구조 관련 요소 기존 HTML에서는 콘텐츠의 구조를 구분할 수 있는 시멘틱한 요소가 제공되지 않았지만, HTML5에서는 구조를 설계할 수 있는 main, nav, section, article, aside, header, footer 등 다양한 구조 관련 요소가 새롭게 추가되었습니다. 구조 관련 요소 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요 기사 광고 경기도 안산시 단원구 고잔동 어딘가 031)234-5678 mo0647@naver.com 저작권이 뭐지? 결과보기 구조 관련 요소를 사용하여도 HTML만을 이용해 작업하면, 레이아웃이 나타나지 않습니다. CSS로 스타일 속성을 추가해 .. 2022. 8. 15.

이전 1 2 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바