CSS HTML JAVASCRIPT 웹디자인기능사 Webs298 2023년 웹디자인 기능사 레이아웃 : C-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-1 by @webs 2023. 05. 01. 10 웹디자인 기능사 레이아웃 유형 : C-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. C유형을 작업해보겠습니다. C유형은 예전에 2000년대 초창기때 많이 쓰던 레이아웃입니다. 가운데 정렬이 아닌 왼쪽정렬로 사이트와 컨텐츠로 구성된 레이아웃입니다. 이 레이아웃은 2023년 버전 업 되기 전에 레이아웃이여서 비교적 쉽습니다. 그럼 쨈싸게 끝내고 D유형으로 가보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 C-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. la.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-4 by @webs 2023. 05. 01. 09 웹디자인 기능사 레이아웃 유형 : B-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. B유형의 마지막 B-4유형을 작업해보겠습니다. 기존의 B유형과 마찬가지로 동일한 구조에 푸터구조만 조금 다른 구조입니다. 그럼 마지막으로 복습한다는 생각으로 빠르게 진행해 보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 B-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-4으로 변경해주겠습니다. 상단에 디자인.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-3 by @webs 2023. 05. 01. 08 웹디자인 기능사 레이아웃 유형 : B-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번 유형도 전체 유형과 가운데 유형이 혼합된 레이아웃입니다. B-1, B-2에서는 각각 세션의 container유형을 각각 만들어서 속성을 설정했습니다. 하지만 이번에는 container 속성을 재활용해서 사용해보겠습니다. 재활용를 한다는 것은 여러번 쓸 수 있다는 얘기입니다. 즉 class를 적극적으로 사용한다는 의미입니다. 가령 id라는 선택자는 한번만 사용할 수 있고, class라는 선택자는 여러번 재사용이 가능합니다. 그래서 사이트 .. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-2 by @webs 2023. 05. 01. 07 웹디자인 기능사 레이아웃 유형 : B-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. B유형의 두번째 레이아웃을 만들어보겠습니다. B-1유형의 원리를 이해했다면 B-2유형도 쉽게 만들 수 있습니다. 한번 더 연습해보고 빨리 감 잡을께요! 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 B-2.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-2으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-1 by @webs 2023. 05. 01. 06 웹디자인 기능사 레이아웃 유형 : B-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 B유형을 만들어보겠습니다. B유형은 A유형과 다르게 전체 영역이 들어갑니다. 이런 유형은 실제 사이트에서도 많이 쓰는 부분이기에, 꼭 알고 넘어가는게 좋습니다. 전체 영역이 들어가기 때문에 A유형 보다는 조금 복잡할 수 있습니다. 그래도 반복연습하면 금방 이해가 될거예요! 그럼 시작해보겠습니다. 🥲 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 B-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 .. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-4 by @webs 2023. 05. 01. 05 웹디자인 기능사 레이아웃 유형 : A-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. A유형의 마지막 A-4유형을 만들어보겠습니다. A-4유형도 A-3유형과 동일합니다. 푸터 영역의 위치만 다를 뿐 거의 똑같다고 보면 됩니다. 이번에는 마지막 유형이니 혼자 한번 해보고 저랑 같이 확인해보는 것이 좋을 것 같습니다. 먼저 해보시고 저랑 차이점을 비교해보면 더 좋을것 같네요. 그럼 고고!😗 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 A-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-3 by @webs 2023. 05. 01. 04 웹디자인 기능사 레이아웃 유형 : A-3 난이도 쉬움 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. A-2유형도 A-3유형과 푸터만 빼고 거의 똑같습니다. 하단 메뉴와 카피라이터가 있는 구조로 별로 어렵지 않습니다. A유형은 기본 골격은 같고 푸터만 살짝 다른 유형으로 이루어져 있어서 어렵지 않습니다. 그럼 바로 시작해보겠습니다.😅 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 A-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-2 by @webs 2023. 05. 01. 03 웹디자인 기능사 레이아웃 유형 : A-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사 레이아웃 A-2유형을 작업하겠습니다. A-1유형과 A-2유형은 동일합니다. 안에 내용물만 틀릴뿐 전체적인 구조는 동일합니다. A-1유형에는 div태그를 이용해서 작업했다면, 이번에는 시멘틱 태그1를 통해 작업해보겠습니다. 웹디자인 기능사 시험은 웹표준을 준수하여 작업하라고 명시되어 있습니다. 기본 div 태그를 이용하여 작업하여도, 구성하는데에는 문제가 없지만, 웹 접근성 향상을 위해 이번에는 시멘틱 태그를 이용하.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-1 by @webs 2023. 05. 01. 02 웹디자인 기능사 레이아웃 유형 : A-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사 실기시험에 가장 중요한 레이아웃 연습을 시작하겠습니다. 레이아웃은 2023버전부터 두개의 레이아웃이 추가되었습니다. 새로운 레이아웃이 조금 어려울 수 있지만, 실제 사이트 제작에 있어 많이 활용되는 부분이기 때문에 알아두면 도움이 될 것이라고 생각이 듭니다. 레이아웃은 실제 사이트 제작시 가장 중요한 부분입니다. 레이아웃이 가장 기본이기 때문에 기본을 완벽하게 익히면 어떤 유형이 나와도 코딩하는데 문제가 없을겁니다.. 2023. 5. 6. 2023년 웹디자인 기능사 준비하기 Tutorial/webd 2023년 웹디자인 기능사 준비하기 by @webs 2023. 05. 01. 01 웹디자인 기능사 준비하기 난이도 쉬움 소스 다운로드 완성 화면 보기X 완성 코드 보기X 소개 안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사를 준비하시는 분들을 위한 정보를 제공하는 블로그입니다. 2023버전 웹디자인 기능사에 핵심인 레이아웃 만드는 방법 5가지 유형과 스크립트를 통한 이미지 슬라이드, 탭 메뉴, 팝업 등을 정리하였습니다. 비록 시험을 위한 준비지만, 최신 웹사이트 트렌트에 맞게 최신 문법을 사용하여 제작하였습니다. 이 튜토리얼은 코딩 공부하고 싶은 초보자부터, 이미 경력이 있는 디자이너까지 모두를 위한 정보를 제공합니다. 블로그 내용을 통해 코딩을 처음 접하는 분들도 .. 2023. 5. 6. 자바스크립트 테스트09 정보처리 대비 Tutorial/Test 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변환한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < m.. 2023. 4. 28. 자바스크립트 테스트08 정보처리 대비 Tutorial/Test 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변환한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < m.. 2023. 4. 21. 자바스크립트 테스트07 정보처리 대비 Tutorial/Test 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변현한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let data = [10, 6, 7, 9, 3]; let temp; for(let i=0; i 2023. 4. 14. 자바스크립트 테스트06 복습 Tutorial/Test 일곱번째 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 03. 결괏값을 작성하시오. { funct.. 2023. 3. 31. 자바스크립트 테스트05 재시험 Tutorial/Test 다섯번째 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 다음의 결괏값을 작성하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.inde.. 2023. 3. 24. 자바스크립트 테스트05 Tutorial/Test 다섯번째 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다.. 2023. 3. 24. 자바스크립트 테스트04 Tutorial/Test 세번째 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i 2023. 3. 17. 자바스크립트 테스트01 Tutorial/Test 자바스크립트 테스트 by @webs 2023. 02. 21. 테스트 다음의 스크립트를 보고 결과 값을 작성하거나 빈칸을 채우시오. 01. 결괏값을 작성하시오. { var x = 100; console.log(x); } 02. 결괏값을 작성하시오. { let x = 100; x = 300; console.log(x); } 03. 결괏값을 작성하시오. { const y = 200; y = 100; console.log(y); } 04. 결괏값을 작성하시오. { let x = 100; x += 300; console.log(x); } 05. 결괏값을 작성하시오. { const arr = new Array(); arr[0] = 100; arr[1] = 200; arr[2] = "java.. 2023. 3. 10. 자바스크립트 테스트03 Tutorial/Test 세번째 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } 11. 결괏값을 작성하시오... 2023. 3. 10. 자바스크립트 테스트02 테스트 다음의 스크립트를 보고 결과 값을 작성하거나 빈칸을 채우시오. 01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 03. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 10.. 2023. 3. 3. min-height 속성은 요소의 최소 세로 크기를 설정합니다. Reference/CSS min-height 속성은 요소의 최소 세로 크기를 설정합니다. by @webs 2022. 02. 04. min-height min-height 속성은 요소의 최소 세로 크기를 설정합니다. 박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다. 특징 설명 기본값 min-height: none 적용 box 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) min-height 속성은 요소의 최소 세로 크기를 설정.. 2023. 2. 4. max-height 속성은 요소의 최대 세로 크기를 설정합니다. Reference/CSS max-height 속성은 요소의 최대 세로 크기를 설정합니다. by @webs 2022. 02. 04. max-height max-height 속성은 요소의 최대 세로 크기를 설정합니다. 박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다. 특징 설명 기본값 max-height: none 적용 box 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) max-height 속성은 요소의 최대 세로 크기를 설정.. 2023. 2. 4. height 속성은 요소의 세로 크기를 설정합니다. Reference/CSS height 속성은 요소의 세로 크기를 설정합니다. by @webs 2022. 02. 04. height height 속성은 요소의 세로 크기를 설정합니다. 박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다. 특징 설명 기본값 height: auto 적용 box 버전 CSS1 사용성 ★★★★★ 정의(Definition) height 속성은 요소의 세로 크기를 설정합니다. 비교(Compare) width 속성은 요소.. 2023. 2. 4. min-width 속성은 요소의 최소 가로 크기를 설정합니다. Reference/CSS min-width 속성은 요소의 최소 가로 크기를 설정합니다. by @webs 2022. 02. 04. min-width min-width 속성은 요소의 최소 가로 크기를 설정합니다. 박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다. 특징 설명 기본값 min-width: none 적용 box 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) min-width 속성은 요소의 최소 가로 크기를 설정합니다. .. 2023. 2. 4. max-width 속성은 요소의 최대 가로 크기를 설정합니다. Reference/CSS max-width 속성은 요소의 최대 가로 크기를 설정합니다. by @webs 2022. 02. 04. max-width max-width 속성은 요소의 최대 가로 크기를 설정합니다. 박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다. 특징 설명 기본값 max-width: none 적용 box 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) max-width 속성은 요소의 최대 가로 크기를 설정합니다. .. 2023. 2. 4. width 속성은 요소의 가로 크기를 설정합니다. Reference/CSS width 속성은 요소의 가로 크기를 설정합니다. by @webs 2022. 01. 26. width width 속성은 요소의 가로 크기를 설정합니다. 박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다. 특징 설명 기본값 width: auto 적용 box 버전 CSS1 사용성 ★★★★★ 정의(Definition) width 속성은 요소의 가로 크기를 설정합니다. 비교(Compare) width 속성은 요소의 가로 .. 2023. 2. 4. border-inline-end-width 속성은 인라인(오른쪽) 테두리 두께 속성을 설정합니다. Reference/CSS border-inline-end-width 속성은 인라인(오른쪽) 테두리 두께 속성을 설정합니다. by @webs 2022. 01. 06. border-inline-end-width border-inline-end-width 속성은 인라인(오른쪽) 테두리 두께 속성을 설정합니다. border는 블록(block)과 인라인(inline)을 구분할 수 있습니다. 블록은 위쪽, 아래쪽으로 말하고, 인라인은 왼쪽, 아래쪽을 의미합니다. 블록은 다시 위쪽(start), 아래쪽(end)으로 분류할 수 있으며, 인라인 역시 왼쪽(start), 오른쪽(end)로 분류 할 수 있습니다. 세부적으로는 두께(width), 스타일(style), 색상(color) 등을 설정할 수 있습니다. 특징 설명 기.. 2023. 1. 9. border-inline-end-style 속성은 인라인(오른쪽) 테두리 스타일 속성을 설정합니다. Reference/CSS border-inline-end-style 속성은 인라인(오른쪽) 테두리 스타일 속성을 설정합니다. by @webs 2022. 01. 06. border-inline-end-style border-inline-end-style 속성은 인라인(오른쪽) 테두리 스타일 속성을 설정합니다. border는 블록(block)과 인라인(inline)을 구분할 수 있습니다. 블록은 위쪽, 아래쪽으로 말하고, 인라인은 왼쪽, 아래쪽을 의미합니다. 블록은 다시 위쪽(start), 아래쪽(end)으로 분류할 수 있으며, 인라인 역시 왼쪽(start), 오른쪽(end)로 분류 할 수 있습니다. 세부적으로는 두께(width), 스타일(style), 색상(color) 등을 설정할 수 있습니다. 특징 설명.. 2023. 1. 9. border-inline-end-color 속성은 인라인(오른쪽) 테두리 색 속성을 설정합니다. Reference/CSS border-inline-end-color 속성은 인라인(오른쪽) 테두리 색 속성을 설정합니다. by @webs 2022. 01. 08. border-inline-end-color border-inline-end-color 속성은 인라인(오른쪽) 테두리 색 속성을 설정합니다. border는 블록(block)과 인라인(inline)을 구분할 수 있습니다. 블록은 위쪽, 아래쪽으로 말하고, 인라인은 왼쪽, 아래쪽을 의미합니다. 블록은 다시 위쪽(start), 아래쪽(end)으로 분류할 수 있으며, 인라인 역시 왼쪽(start), 오른쪽(end)로 분류 할 수 있습니다. 세부적으로는 두께(width), 스타일(style), 색상(color) 등을 설정할 수 있습니다. 특징 설명 기본값.. 2023. 1. 9. border-inline-end 속성은 인라인(오른쪽) 테두리 속성을 일괄적으로 설정합니다. Reference/CSS border-inline-end 속성은 인라인(오른쪽) 테두리 속성을 일괄적으로 설정합니다. by @webs 2022. 01. 08. border-inline-end border-inline-end 속성은 인라인(오른쪽) 테두리 속성을 일괄적으로 설정합니다. border는 블록(block)과 인라인(inline)을 구분할 수 있습니다. 블록은 위쪽, 아래쪽으로 말하고, 인라인은 왼쪽, 아래쪽을 의미합니다. 블록은 다시 위쪽(start), 아래쪽(end)으로 분류할 수 있으며, 인라인 역시 왼쪽(start), 오른쪽(end)로 분류 할 수 있습니다. 세부적으로는 두께(width), 스타일(style), 색상(color) 등을 설정할 수 있습니다. 특징 설명 기본값 border-in.. 2023. 1. 9. 이전 1 2 3 4 5 ··· 10 다음
