100S00

텍스트 관련요소 01. 텍스트 관련 요소 em태그는 강조하고 싶은 텍스트를 기울기로 표시한다 strong태그는 중요한 텍스트를 굵은체로 표시함 mark태그는 중요한 부분을 노란색으로 강조한다 b태그는 텍스트를 단순히 굵은체로 표시한다 small태그는 주의사항, 법적 제한, 저작권 등을 정의한다 sub태그는 아래첨자 텍스트를 정의한다 sup태그는 위첨자 텍스트를 정의한다 02. 목록 관련 요소 ol,li 태그 - 순서 목록 html css javascript jquery ul,li 태그 - 비순서 목록 html css javascript jquery dl,dt,dd 태그 - 설명 목록 html Hypertext Markup Language version html4.0. xhtml1.0, html5 css ..

시멘틱 마크업 & 논리적인 순서 마크업 시멘틱 마크업 시멘틱 마크업(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다. 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지이다. 시멘틱 마크업은 적절한 HTML 요소를 올..

inline / block가 무엇일까? HTML에서 inline 구조는 주로 텍스트나 이미지 같은 작은 요소들을 나타내기 위해 사용됩니다. 예를 들어, 태그는 inline으로 적용되며, 특정 영역에 스타일을 적용하기 위해 사용될 수 있습니다. 태그도 inline으로 적용되며, 이미지를 문서 내에 삽입하는 데 사용됩니다. 다른 일반적인 inline 요소로는 , , , , , , 등이 있습니다. 이러한 요소는 텍스트 내에서 자연스럽게 흐르며, 다른 inline 요소와 함께 사용될 수 있습니다. 반면에, block 구조는 주로 문단이나 섹션 같은 큰 요소들을 나타내기 위해 사용됩니다. 예를 들어, 태그는 block으로 적용되며, 다른 요소들을 묶어서 스타일을 적용하기 위해 사용될 수 있습니다. 태그도 bloc..

태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 주제별로 제목 요소를 사용하는 것이 좋으며, 문서의 스타일링 요소나, 그룹화 요소가 아닙니다. 스타일 지정 목적이나 그룹화가 필요하다면 태그를 사용합니다. 주요 콘텐츠와 단독으로 콘텐츠를 표현하고 싶다면,요소를 사용하는 것이 적절합니다. 섹션과 관련된 태그(Section Related Tag) 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 헤더 영역 주제별 영역 내용 독립된 주제 영역 내용 사이드 영역 내용 푸터 영역 섹션 레이아웃 예제

float - 방식 float는 CSS의 속성 중 하나로, 요소를 왼쪽이나 오른쪽으로 떠서 배치하는 방식입니다. float를 이용하여 요소들을 배치하면, 다음 요소가 float된 요소 주위로 배치됩니다. 이 방식은 과거에 많이 사용되었으나, 요소의 높이가 자동으로 조절되지 않기 때문에 레이아웃이 깨질 위험이 있습니다. 아래의 이미지 코드 예시 입니다. 위 코드의 결과 레이아웃 입니다.

1. 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 태그 안에서 정의해야 하고 태그 사이에 작성합니다. Korea Japan China 2. 외부 스타일 시트 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css' 라는 파일 확장자를 사용합니다. 외부 스타일 시트를 연결할 때는 )를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다. 이런 방법을 '인라인 스타일'이라고 합니다. 스타일을 적용하..

CSS id & class의 차이 id 속성 id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다. class 속성 id 속성과 다르게 여러 번 반복해서 사용할 수 있습니다. 반복적으로 쓰이는 유형들을 유형별로 동일한 class로 분류하여 쉽게 관리할 수 있습니다. id 속성은 태그에 유일한 이름을 붙이고 싶을 때 씁니다. class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 씁니다. .container { width: 1200px; height: inherit; background-color: rgba(0, 0, 0, 0.2); margin: 0 auto; 수업시간에서 사용한 class = "container" 가 예시 입니다. css에서의 차이 CSS에서 id 속성..

CSS Float 사용방법 정리 CSS Float는 요소를 좌우 방향으로 이동시켜 다른 요소들과의 배치를 조정하는 속성입니다. 이를 이용하면 웹페이지의 레이아웃을 구성하거나 이미지와 텍스트를 함께 배치하는 등 다양한 디자인을 구현할 수 있습니다. Float 속성 사용 방법 Float 속성은 CSS의 속성 중 하나로, float 값을 이용하여 설정합니다. 일반적으로 left 또는 right 값을 사용하며, none은 float 속성을 취소합니다. /* 요소를 왼쪽으로 이동시키는 예시 */ .box { float: left; } /* 요소를 오른쪽으로 이동시키는 예시 */ .box { float: right; } /* float 속성을 취소하는 예시 */ .box { float: none; } 주의사항 Fl..

Type 선택자 타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다. 예를 들어 다음은 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다. p { color: blue; } Id 선택자 아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어 다음은 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다. #abc { color: red; } Class 선택자 클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(elemen..

문자 관련 스타일 정리 color: 문자의 색상을 지정합니다. color: red; font-family: 문자의 폰트를 지정합니다. font-family: Arial, sans-serif; font-size: 문자의 크기를 지정합니다. font-size: 16px; font-weight: 문자의 굵기를 지정합니다. font-weight: bold; text-align: 문자의 정렬을 지정합니다. text-align: center; text-decoration: 문자의 장식을 지정합니다. text-decoration: underline; text-transform: 문자의 대소문자 변환을 지정합니다. text-transform: uppercase; letter-spacing: 문자 사이의 간격을 지정합니..

자료형이란? 사람은 10이나-15를 보면 숫자라는 것을 알 수있고, 안녕하세요? 를 보면 문자열이라는 것을 금방 알 수 있습니다. 하지만 컴퓨터에게 일을 시킬 때는 이것은 숫자이니 더하거나 뻬야하고, 저것은 문자열이니 더하거나 뺄 수 없다는 것을 따로 알려주어야 합니다. 이렇게 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해야 하는데, 이러한 자료의 형태를 '자료형'이라고 합니다. 자바스크립트의 자료형은 크게 '원시형 유형'과 '객체' 로 나뉘어집니다. 원시 유형은 하나의 값만 저장하는 자료형으로, 숫자와 문자열, 논리형, undefined,null, symbol 유형이 있습니다. 그리고 원시 유형 외에는 모두 객체 입니다. 숫자형 숫자형은 모든 프로그램에서 가장 기본이 되는 자료형 입니다. ..

연산자 01. 산술 연산자 산술연산자들의 기본적인 용도는 덧셈을 할 때 입니다. +연산자 산술 연산자 중 ' +'연산자는 '+'를 기준으로 좌변과 우변에 숫자가 아닌 문자나 변수등이 오면 더하기 연산이 아닌 연결 연산을 합니다. var subject = 'css'; var score = 100; console.log(subject + ;과목 성적은 ' score'); //css과목 성적은 100 %연산자 %(나머지) 연산자는 '반복적인' 숫자 구간의 패턴' 조건문을 이용한 ' 짝 - 홀수 판단, 배수 판단' 등의 식을 만드는데 사용합니다. //var dividend = 0 //var dividend = 1 //var dividend = 2 //var dividend = 3 //var dividend = ..

반복문 for문 자바스크립트에서 가장 많이 사용하는 반복문이며, for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for(초기값;조건; 증가식;){..} 초기값: 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화 합니다. 초기값은 0이나1부터 시작합니다 조건: 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for문에 있는 명령을 반복 할 수있습니다. 증가식: 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다. ps. for문에서 반복 횟수를 알기 위해 배열의 갯수를 알아야 할 때는 length를 사용합니다. console.log(x.leng..

데이터 저장하기 01. 변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. var x = 100; //변수 X에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저정함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); 결과 값 100 200 "javascript" 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장 할수도 있지만 변경도 가능하다. let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.lo..

조건문 if문 자바스크립트에서는 if문을 사용하여 조건문을 작성할 수 있습니다. 기본적인 if-else문의 형태는 아래와 같습니다. if (조건식) { // 조건식이 참일 경우 실행되는 코드 블록 } else { // 조건식이 거짓일 경우 실행되는 코드 블록 } 또한, else if문을 사용하여 여러 개의 조건식을 체크할 수 있습니다. if (조건식1) { // 조건식1이 참일 경우 실행되는 코드 블록 } else if (조건식2) { // 조건식1이 거짓이고, 조건식2가 참일 경우 실행되는 코드 블록 } else { // 조건식1과 조건식2가 모두 거짓일 경우 실행되는 코드 블록 } 위 예제의 코드는 사용자가 입력한 값에 따라 다른 결과를 출력하는 예제입니다. 입력한 값이 100일 경우 "당신은 백점짜..

데이터 제어하기 01. if문 if문은 조건에 따라 실행될 코드 블록을 결정하는 제어 구조입니다. if(""){ document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(true)") } 02. if문 생략 위 if문을 아래 if문으로 생략하여 쓸수있다. const num = 100; if(num) { document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(false)"); } if(num) document.write("실행되었습니다.(true)"); else document.write("실행되었습니다.(false)") 03. if문 삼항연산자 위의 코드와 아래 코드는 같지만 더..

0, 양수, 음수 구별 프로그램 자바스크립트를 이용하여 입력된 숫자가 양수인지, 음수인지, 또는 0인지 구분하는 예제 코드입니다. 이 코드는 prompt 함수를 이용하여 사용자로부터 숫자를 입력받습니다. 그리고 if/else 문을 이용하여 입력된 숫자가 양수인지, 음수인지, 또는 0인지를 판별하여 결과를 콘솔에 출력합니다. See the Pen Untitled by hyeonbeen97 (@hyeonbeen97) on CodePen. 두 수의 최대 공약수 구하기 function getGCD(a, b) { while (b !== 0) { let r = a % b; a = b; b = r; } return a; } let result = getGCD(234, 261); console.log(result); ..

마무리 예제 따라하기 마무리 예제 1 const arr 에 있는 배열을 for문을 이용하여 반복 시키고 if문으로 10보다 큰 값이라는 조건을 부여한다. const arr = [1,3,5,7,9,11,13,15,17,19] //배열을 아용하여 숫자를 저장한다. for(i=0 ; i 10) //if문으로 예제에 맞는 조건을 추가한다. document.write(arr) //결과 값 출력. } 마무리 예제 2 prompt() 함수는 사용자에게 윈도우 창을 띄워 데이터를 입력받을 수 있는 함수입니다. for문을 이용해 입력한 값이 조건에 맞으면 그 조건까지 계속 출력시키지만 if문으로 짝수만 출력하게 설정합니다. 그 후 sum 은 1부터 i를 더한 값이 나오도록 합니다. See the Pen Untitled ..

for in,for of 의 차이점 for-in for-in 루프는 객체의 속성을 반복하는 데 사용됩니다. for-in 루프는 객체의 속성 이름을 열거하고, 해당 속성의 값을 사용할 수 있습니다. const person = { name: "John", age: 30, address: "123 Main St" }; for (let property in person) { console.log(`${property}: ${person[property]}`); } 위의 코드는 person 객체의 속성을 반복하며, 각 속성의 이름과 값을 출력합니다. 출력 결과는 다음과 같습니다. name: John age: 30 address: 123 Main St for-in 루프는 객체의 모든 속성을 열거하기 때문에, 프로토..

1.while문 while문은 조건식이 참(true)인 동안 반복해서 코드 블록을 실행하는 반복문입니다. while문의 기본 구문은 다음과 같습니다. while (조건식) { // 반복해서 실행할 코드 블록 } let i = 0; while (i < 5) { console.log(i); i++; } 결과 값 0,1,2,3,4 for문이랑 차이점이 무엇일까 생각해보았고 검색을 해보았다. for문은 반복 횟수가 정해져 있을 때 주로 사용되며, 반복 변수의 초기값, 조건식, 증감식을 한 줄에 작성할 수 있어 가독성이 좋습니다. 반면에 while문은 반복 횟수가 정해져 있지 않을 때 사용하며, 코드가 간단하고 직관적입니다. for문과 while문은 상황에 따라 적절히 선택하여 사용하면 됩니다. 2.element..

01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답: x, y, z+y 해설: 결과 값 100이나 오려기 위해선 실행문에 var x = 100이 출력이 되게 해야한다. 그러므로 빈칸엔 x가 들어간다. 결과 값 200이나 오려기 위해선 실행문에 var x = 200이 출력이 되게 해야한다. 그러므로 빈칸엔 x가 들어간다. 결과 값 300이나 오려기 위해선 실행문에 var x = 100와 var ㅛ = 200을 합친 값이 출력되게 해야한다. 그러므로 빈칸엔 x+y가 들어간다. 02. 다음의 출력..