본문 바로가기

KATEGORIE159

[JAVASCRIPT] 문자열 메서드 : replace( ) / replaceAll( ) 자바스크립트 : 문자열 메서드 : replace() 이번 시간에는 문자열 메서드인 replace()에 대해 알아보겠습니다! 😁 #1. replace( ) replace() 메서드는 String.prototype.replace()의 약자로 문자열을 치환하거나 변환 할 때 사용하는 메서드입니다. 즉 문자열을 부분 문자열로 구분하고 변환하여 새로운 배열로 반환해줍니다. ! replace( ) 사용 방법 ! "문자열"replace("찾을 문자열", "변경할 문자열"); "문자열"replace("찾을 문자열", "변경할 문자열"); "문자열"replace(정규식); "문자열"replace(정규식, "변경할 문자열"); const str1 = "javascript reference"; const cirrentStr.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : split( ) 자바스크립트 : 문자열 메서드 : split() 이번 시간에는 문자열 메서드인 split()에 대해 알아보겠습니다! 😁 #1. split( ) slice() 메서드는 문자열에서 원하는 값을 추출한 뒤 새로운 문자열로 반환합니다. 즉 문자열을 분할하여 부분 문자열 배열을 만듭니다 📖 아래의 코드 예제와 주석을 통해 더 자세히 알아봅시다! 📖 ! split( ) 사용 방법 ! "문자열".split(구분자(separator)); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); //갯수를 설정할 수 있다. const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j','a','v','a','s','c',.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : 대소문자 변경과 공백 제거 자바스크립트 : 문자열 메서드 : 대소문자/공백 지금부터 자바스크립트의 대소문자 변경, 공백 제거 문자열 메소드에 대해 알아봅시다! #1. toUpperCase(), toLowerCase() toUpperCase()는 문자열을 대문자로 변경해주며 toLowerCase()는 소문자로 변경해줍니다. 변경 후에는 새로운 문자열로 반환해줍니다. //01. 대문자 변경 const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); //02. 소문자 변경 const str2 = "JAVASCRIPT"; const currentStr2 = str1.toLowerCase(); 표로 확인해보자! 번호 기본값 메서드 리턴값 1 javascript toUpperCas.. 2022. 8. 18.

[JAVASCRIPT] 템플릿 문자열 자바스크립트 : 문자열 결합 : 템플릿 문자열 지금부터 자바스크립트의 문자열 결합과 문자열 메소드인 템플릿 문자열에 대해 알아봅시다! 1. 템플릿 문자열 템플릿 문자열( )은 문자열 결합 메서드로 내장된 표현식을 허용하는 문자열 리터럴입니다. 문자열을 결합할 때 따옴표 대신 ` ` (backtick_백틱)을 사용하며 변수를 넣고자 하는 부분에 ${}를 사용하여 넣어주면 됩니다. 또한 간단한 자바스크립트 문법을 문자열 안에 사용할 수 있습니다. //01. 문자열(string) 결합 const str1 = "자바스크립트"; const str2 = "제이퀘리"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; //02. 숫자(number) 결합.. 2022. 8. 18.

[SITE] 이미지 유형 만들기 02 Image Type02 이번 이미지 유형에서는 애니메이션과 블러 효과를 주어서 더 동적인 페이지를 실습해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:) 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 이번 유형은 백그라운드에 이미지를 삽입하면 따로 애니메이션과 같은 효과를 주기 어렵기 때문에 img태그를 사용하여 이미지를 삽입하여 작업합니다:) 지난 시간에 작업한 이.. 2022. 8. 18.

[SITE] 웹사이트 - 이미지 유형01 Image Type01 웹페이지 실습을 위한 이미지 유형 페이지 제작해보기! 이번 이미지 유형에서는 background에 image를 넣어서 작업해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:) 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 섹션 태그에 섹션 선택자를 따로 준 이유는 앞으로 만들게 될 유형들 모두 공통적으로 섹션 안에 제목, contents 구조로 .. 2022. 8. 17.

[Search] 검색 유형 사이트 만들기02 includes()를 통해 검색 사이트 제작하기 이번 시간에는 문자열 메서드 중 하나인 includes() 메서드를 통해 검색 사이트를 제작해보겠습니다! 먼저 includes() 메서드에 대해 짧게 알아보고 사이트 실습에 들어가보겠습니다! #1. includes() includes() 메서드는 대소문자를 구분하며 문자열 내에서 검색할 문자의 포함 여부에 따라 불린(true, false)을 반환합니다. ✏️예제 코드 const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); // true const currentStr2= str1.includes("j"); // true const currentStr3= str1.. 2022. 8. 17.

[Search] 검색 유형 사이트 만들기01 indexOf()를 통해 검색 사이트 제작하기 지난 시간에는 indexOf()에 대해 알아보았습니다. 이번 시간에는 심화과정으로 문자열 메서드 중 하나인 indexOf() 메서드를 통해 검색 사이트를 제작해볼까요?! 먼저 indexOf() 메서드에 대해 짧게 알아보고 사이트 실습에 들어가보겠습니다! #1. indexOf() indexOf() 메서드는 문자열에서 특정 문자의 위치(index)를 찾은 후 숫자로 반환합니다. ✏️코드 보기 const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); // 0 const currentStr2 = str1.indexOf("reference"); // 11 (11번째 자리 : .. 2022. 8. 17.

[JAVASCRIPT] 문자열 메서드 : indexOf( ) 자바스크립트 : indexOf() 메서드 이번 시간에는 문자열 메서드 중 하나인 indexOf() 메서드에 대해 알아보겠습니다.😆 #1. indexOf( ) indexOf() 메서드는 문자열에서 추출하고 싶은 문자의 위치를 찾은 후 숫자로 해당 문자열을 반환합니다. 즉 특정 문자가 문자열의 어느 index에 위치하는지 찾는 메서드라고 볼 수 있습니다. ! indexOf() 사용법 ! "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) : 처음 값은 추출하고 싶은 문자열을 작성하고 마지막 값을 그 문자열을 찾기 시작 할 위치로 적으면 된다. ✏️예제 코드 const str1 = "javascript reference" const currentStr1 = str1.indexOf("j.. 2022. 8. 17.

[JAVASCRIPT] 정규 표현식 자바스크립트 : 정규 표현식(패턴) 정규 표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이며 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다! 즉 쉽게 말해서 문자열에서 특정 문자를 찾아내는 도구라고도 볼 수 있습니다! #1. 정규 표현식 객체 주요 패턴 정규 표현식에서 사용하는 기호를 메타(meta) 문자라고 합니다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [A-Z] 알파벳 대문자를 검색합니다. [a-z] 알파벳 소문자를 검색합니다. [.. 2022. 8. 17.

[JAVASCRIPT] 문자열 메서드 : Slice(), substring(), substr() 자바스크립트 : 문자열 메서드 slice(), substring(), substr() slice(), substring(), substr()는 문자열 메서드의 변경 타입으로 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. #1. slice( ) slice() 메서드는 문자열에서 원하는 값을 추출하여 문자열을 반환합니다. ! slice( ) 사용 방법 ! "문자열"slice(시작 위치) "문자열"slice(시작 위치, 끝나는 위치) const str1 = "javascript reference" const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript refer.. 2022. 8. 17.

[CSS] 미디어쿼리 CSS: 미디어쿼리란? 해상도에 따라 css를 분기시키기 때문에 반응형 프로젝트에서 반드시 필요한 기법입니다! #1. !point! 위 코드는 최소 가로폭 1000px, 즉 1000px 보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다! 또한 크롬 개발자 도구를 통해 각 기기마다의 해상도에 따른 예시를 볼 수 있습니다. 해상도 평균 사이즈 표 기기 가로 데스크탑 1920 테블릿pc 768 모바일 480 #2. @media 첫 로딩 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS입니다. @media all and (min-width: 1000px) { /* 모든 기기에서 해상도가 최소 1000px 인 경.. 2022. 8. 16.

[CSS] 기본 문법 CSS 기본 문법 4가지 지금부터 CSS 기본 문법 4가지를 알아보도록 하겠습니다!😀 #1. 내부 스타일시트 HTML문서 안에 이 문장의 색은 빨강입니다. #2. 외부 스타일시트 스타일 속성을 따로 저장하여 HTML문서와 연결할 수 있습니다. 파일의 확장명은 '.css'로 저장해주어야 하며 HTML문서에서는 태그를 사용하여 선언 합니다. 내부 스타일시트 이 문장의 색은 빨강입니다. style.css - 외부 경로 @charset "UTF-8"; p { color: red; } 이처럼 내부 스타일시트와는 달리 외부 스타일시트는 html문서에 경로 선언만 해준다면 모든 페이지에서 동일한 시트를 적용할 수 있다. #3. @import css안으로 다른 css 파일을 불러올 수 있습니다. 여러개를 사용하면 복잡.. 2022. 8. 16.

[HTML] 구성 관련 요소 HTML : 구조 관련 요소 = 시멘틱 태그 시멘틱 태그란 해석 그대로 의미가 있는 태그로도 볼 수 있습니다. 즉 구조를 나타내는 태그로 정보를 구체적으로 선언하여 웹표준과 접근성을 준수하기 위한 태그이기도 합니다. 먼저 구조 요소가 어떤 것이 있는지 살펴본 후 시멘틱 태그를 사용하여 레이아웃을 구성해보도록 하겠습니다. 구조 관련 요소(=시멘틱 태그) 구조 관련 요소에는 , , , , , 가 있습니다. 요소 유형 태그형 태그의 의미 및 특징 블록 레벨 요소 1. HTML문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만,, 태그는 포함할 수 없다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별.. 2022. 8. 16.

[JAVASCRIPT] 내장 함수 자바스크립트 : 내장 함수 내장 함수란? 자바스크립트에 기본적으로 내장되어 있는 함수를 말합니다. 지금부터 내장 함수에 대해 자세히 알아봅시다! 1. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 하는 경우 유니코드 문자가 포함되어 있으면 오류가 걸릴 확률이 높습니다. 때문에 인코딩 함수를 통해 문자를 부호화 시켜서 처리한 후 디코딩 함수를 통해 문자로 다시 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent( ) 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent( ) encodeURIComponent( )의 디코딩 함수 2. 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN( ) 숫자인지 아닌지.. 2022. 8. 16.

[SITE] 웹사이트 - 카드 유형03 CardType03 웹페이지 실습을 위한 카드 유형 페이지 심화ver 제작해보기! 카드 안에 이미지, 키워드란, 텍스트 그리고 사용자 프로필까지 넣어서 제작해보자! 이번 유형에서는 심화 버전인 만큼 그리드 할 요소가 많습니다.😂 차근차근 그리드를 만들어 카드형 페이지를 디자인 해봅시다! 이번 카드형 디자인은 카드 사이에 여백이 없기 때문에 라인을 넣어 카드 영역을 구분 해줍니다. TIP ! 카드 섹션의 디자인이 동일할 경우 comtonent를 이용하면 효율적인 작업이 가능하다. comtonent를 처음 적용시킨 카드가 원본가 되며 원본 comtonent를 수정하면 복제 comtonent들도 함께 수정되어 작업이 훨씬 수월해진다! < HTML 소스 : 레아아웃 구조 파악하.. 2022. 8. 11.

[JAVASCRIPT] 배열 메서드 : join(), push(), pop() 자바스크립트 : 배열 메서드 지금부터 자바스크립트의 배열 메소드인 join() / push() / pop()에 대해 알아봅시다! 배열 메서드들을 이해하게 되면 배열을 좀 더 효율적으로 사용할 수 있게됩니다 :) 1. join( ) join( )은 배열을 변경하지 않고 참조만 하는 메서드로 배열의 모든 요소를 하나의 문자열로 반환합니다. //01 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); //배열의 요소를 전부 이어서 불러온다. const text2 = arrNum.join(' '); //한 칸을 띄우면 join이 여백을 인식해서 한 칸씩 띄워서 표현된다. const text3 = arrNum.join('★'); //별.. 2022. 8. 11.

[CSS] 이미지 표현 방식 : 벡터와 비트맵 벡터와 비트맵 백터와 비트맵은 이미지를 표현하는 방식으로 서로 상반된 방식으로 이미지를 표현합니다. 지금 부터 벡터와 비트맵에 대해 알아보겠습니다! #1. 비트맵(Bitmap) 방식 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능합니다. ! 특징정리 ! • 비트맵 방식은 색상 정보가 담긴 픽셀 하나 하나가 모여 만들어지는 방식으로 보다 정교한 이미지 표현이 가능하다. • 디스플레이는 픽셀의 배열로 구성되어 있으며 픽셀의 배열, 숫자, 비율이 디스플레이의 해상도를 결정한다고 볼 수 있다. 예를 들어서 1920x1080디스플레이가 있다면 이는 가로 1920개 세로 1080개의 픽셀로 구성되어 있는.. 2022. 8. 10.

[SITE] 웹사이트 - 카드 유형02 CardType02 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! - 2줄 유형 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. TIP ! 카드 섹션의 디자인이 동일한데 많을 경우 컴포넌트를 이용하면 효율적인 작업이 가능하다. 컴포넌트를 처음 적용시킨 카드가 원본가 되며 원본을 수정하면 복붙했던 카드들도 함께 수정된다. 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1.구조를 먼저 꼼꼼하게 파악하여 시멘틱한 마크업을 하는 것이 가장 중요하다... 2022. 8. 10.

웹사이트 - 카드 유형01 CardType01 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. 그리드 작업이 완벽해야 후에 코딩을 하는 데 있어서도 오류 및 오차가 생기지 않아 불편해지지 않습니다! 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1. 카드 레이아웃은 보통 웹 메인 페이지의 섹션 부분에 위치한다. 때문에 시멘틱 태그인 요소는 부모와 자식의 관계를 나타낸다. 마찬가지로 요소 + 요소는 형제 관계를 나타낸다.*/.. 2022. 8. 10.

웹 표준성/ 웹 접근성/ 웹 호환성 웹 표준 / 웹 접근성 / 웹 호환성 웹페이지를 만들기 위해서는 지켜야할 규칙이 총 3가지가 있다. 3가지 규칙은 웹표준, 웹 접근성, 웹 호환성으로 웹 표준 하나만 준수 한다고 해서 웹 접근성이나 웹 호환성이 보장되지 않으며 웹 호환성을 준수하더라도 웹 접근성은 보장되지 않는다. 때문에 웹 표준, 웹 접근성, 웹 호환성 3가지 모두를 지키는 것이 중요하다. 1. 웹 표준 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 웹표준은 표준화 단체인 W3C(World Wide Consort.. 2022. 8. 9.

퀴즈 문제 만들기04 퀴즈 객관식 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 객관식 유형 퀴즈로 여러개 제작해보기 하나의 객관식 문제를 자바스크립트를 이용하여 만들어보자! #1. 선택자 자바스크립트 소스 상수에게 해당명칭(ex: quizType)을 선언해주고 쿼리셀랙터(태그, 아이디, 클래스를 선택할 수 있는 것)로 선택한 요소를 찾아서 넣어보자! //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask".. 2022. 8. 8.

요소 선택 자바스크립트 요소 선택 자바스크립트에서 CSS 선택자를 넘겨서 원하는 HTML 요소를 찾을 수 있도록 함수를 제공하고 있다. 대표적으로 querySelector() 함수는 선택자에 부합하는 요소 중에서 첫 번째 요소만을 반환하고, querySelectorAll() 함수는 선택자에 부합하는 모든 요소를 반환한다. 01. 요소를 직접 선택하는 메서드 메서드 속성 입력 방법 : document . 메서드명 ( ' 요소명 ' ) 메서드 설명 getElementById() HTML 요소 중 id 속성인 요소를 선택한다. ex) document.getElementById('header') getElementByClassName() HTML 요소 중 class명으로 선언한 요소를 선택한다. ex) document.g.. 2022. 8. 7.

퀴즈 문제 만들기03 퀴즈 주관식(여러문제) 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 주관식 유형 퀴즈로 여러개 제작해보기 4개의 주관식 퀴즈를 하드 출력, 반복문과 조건문을 이용한 출력으로 나누어 살펴보자! #1. 선택자 자바스크립트 소스 상수에게 해당명칭(ex: quizType)을 선언해주고 쿼리셀랙터(태그, 아이디, 클래스를 선택할 수 있는 것)로 선택한 요소를 찾아서 넣어보자! //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySel.. 2022. 8. 6.

레이아웃05 레이아웃05 전체 영역이 들어간 구조로 세부적인 요소들은 부모컨테이너를 만들어서 가운데 영역으로 레이아웃을 설정한다. 이번 레이아웃은 좀 더 심화과정으로 들어간다. float을 이용한 반응형 레이아웃 CSS 스타일을 효율적으로 주기 위해서는 html 마크업을 깔끔하게 선언할 줄 알아야 한다. 때문에 먼저 레이아웃 분석 및 요소의 이름을 잘 선언하는 것이 중요하다. clearfix를 이용한 float의 영역깨짐 방지 1. 깨지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflowf: hidden을 설정한다. - 애니메이션 효과가 적용되지 않는다. 3. clearfix를 설정한다. - 깨진 레이아웃 요소의 부모요소에게 클래스로 이름을 선언해준다. div class="containe.. 2022. 8. 5.

퀴즈 문제 만들기02 퀴즈 주관식 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 주관식 유형 퀴즈로 제작해보기! 주관식 유형으로 제작한 자바스크립트 소스 퀴즈박스의 번호, 퀴즈 문제, 답 등을 모두 자바스크립트를 통해 보여준다. 함수와 if문을 통해 사용자가 답을 작성할 경우 정답 or 오답에 대한 이벤트가 실행되도록 한다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 cons.. 2022. 8. 5.

퀴즈 문제 만들기01 퀴즈 정답확인하기 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 버튼 형식 퀴즈로 제작해보기! 정답확인하기 유형으로 제작한 자바스크립트 소스 퀴즈박스의 번호, 퀴즈 문제, 답 등을 모두 자바스크립트를 통해 보여준다. 정답확인버튼을 눌렀을 경우 깔끔하게 답만 보일 수 있게 정답확인 버튼을 없애준다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const qu.. 2022. 8. 4.

지역함수와 전역함수 자바스크립트 전역변수 / 지역변수 변수는 함수블록 {}을 기준으로 변수의 선언 위치에 따라 전역변수와 지역변수로 나누어 진다. 전역변수 : 전역 변수는 함수 블록 {} 밖이나 안에서 자유롭게 사용 가능 지역변수 : 지역 변수는 함수 블록 {} 내에서만 사용 할 수 있다. ▶︎ 전역변수와 지역변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수 () { } function 함수 () { var 변수; } 01. 전역변수 예시 문제 kor 변수의 값을 90에서 100으로 바꾸기 { var kor = 90; function getScore() { kor = 100; //전역변수 console.log(kor); } getScore(); console.log(kor); } 결과 보기 100 1.. 2022. 7. 29.

레이아웃04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조이다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정한다. float을 이용한 레이아웃 + 부모요소 컨테이너 사용방법 아이디 클래스 선택자 선언 id : 한 번 정도 사용하는 것이 좋으며 전체적인 틀, 스크립트에서 많이 사용한다. id로 선언할 경우 후에 고치는 것이 까다롭다. class : 두개 이상 (중복 가능)사용이 가능하며 후에 고치는 것이 유동적인 편. 주로 세부적인 영역이나 반복적인 것에 많이 사용된다. *{ margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background.. 2022. 7. 29.

레이아웃03 레이아웃03 메인에 사이드와 아티클 3개가 들어간 구조 float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다. clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다. cl.. 2022. 7. 29.

이전 1 2 3 4 5 6 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바