분류 전체보기
-
JavaScript 자바스크립트 기초 - 변수 / 연산자🌐 FrontEnd/JavaScript 2022. 5. 23. 20:55
시작하면서 자바스크립트 기초를 시작합니다. 변수와 연산자에 대해 공부합니다. 1. 자바스크립트 기초 (1) 자바스크립트 선언문 선언문은 스크립트 영역임을 나타내주는 역할을 합니다. // 기본형 (2) 자바스크립트 주석 처리 한 줄 주석은 // 입니다. 여러 줄 주석은 /* 설명 내용 */ 입니다. // 예 // 한 줄 주석 /* 여러줄 주석 입니다 */ (3) 스크립트 외부로 분리하기 HTML 내부에 작성된 자바스크립트를 외부로 분리합니다. 외부로 분리하는 이유는 관리가 용이해지기 때문입니다. // 기본형 // 예 2. 변수 (1) 변수란? 변수(Variables)란 변하는 데이터(값)를 저장할 수 있는 메모리 공간입니다. var / let / const 세 가지로 변수를 선언할 수 있습니다. // 기본..
-
JavaScript 자바스크립트란?🌐 FrontEnd/JavaScript 2022. 5. 23. 19:00
시작하면서 자바스크립트를 이야기 해봅시다. JavaScript 자바스크립트란? 웹 브라우저에서 많이 사용하는 프로그래밍 언어입니다. Netscape 사의 브랜든 아이크(Brendan Eich)에 의해 모카라는 이름으로 만들어진 후 라이브 스크립트라는 이름으로 개발되었습니다. Netscape 사가 Sun Microsystems 와 함께 자바스크립트라는 이름을 붙여주고 본격적으로 발전하게 되었습니다. 문서에 방문자가 방문하여 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어날 수 있도록 해주는 언어입니다. JavaScript 자바스크립트 언어의 특징 자바스크립트는 인터프린터 언어입니다. 인터프린터 언어? 소스코드를 한 번에 한 줄씩 바로 번역하고 실행합니다. 따로 실행 파일이 존재하지 않고 바로 실행..
-
[CSS] 레이아웃을 위한 스타일과 예제🌐 FrontEnd/HTML & CSS 2022. 5. 23. 18:30
시작하면서 레이아웃을 위한 스타일을 예제와 함께 공부합니다. 1. CSS 와 박스 모델 CSS 의 박스 모델 (box model) 은 그림이나 텍스트처럼 사각 영역을 갖는 요소를 통칭합니다. 박스 모델 스타일을 이용하면 여백이나 테두리 등을 자세히 설정할 수 있습니다. 웹 문서에서 다양하게 활용할 수 있습니다. (1) 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 (block-level) 요소 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소입니다. 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 예) , ~, , , , , , , , , 인라인 레벨 (inline-level) 요소 줄을 차지하지 않는 요소입니다. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 그 외의 공간에는 다른 요소가 ..
-
[CSS] 색상/배경 관련 스타일과 예제🌐 FrontEnd/HTML & CSS 2022. 5. 20. 22:20
시작하면서 색상, 배경과 관련된 스타일을 예제와 함께 공부합니다. 1. 웹에서 색상 표현하기 (1) 16진수 표기법 #ffffff 처럼 #과 함께 6자리의 16진수로 표시합니다. 앞에서부터 두 자리씩 빨강, 초록, 파랑의 양입니다. 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시합니다. 사용할 수 있는 값은 000000(검은색)에서부터 ffffff(흰색)까지입니다. /* 예 */ p { color: #000000; /* 글자색 검정 */ } .accent { color: #ff0000; /* accent 클래스 스타일의 색 빨강 */ } (2) rgb와 rgba 표기법 color: rgb(255, 0, 0) 처럼 세 자리의 숫자로 표시합니다. 앞 숫자부터 빨강, 초록, 파랑의 양입니다. ..
-
[CSS] 텍스트 관련 스타일과 예제 - 2🌐 FrontEnd/HTML & CSS 2022. 5. 20. 22:10
시작하면서 텍스트와 관련된 스타일을 예제와 함께 공부합니다. 3. 문단 스타일 (1) direction 속성 텍스트의 쓰기 방향을 지정합니다. /* 예 */ h3 { direction: rtl; /* 제목을 오른쪽에서 왼쪽으로 표시 */ } (2) text-align 속성 - 텍스트 정렬하기 문단의 텍스트 정렬 방법을 지정합니다. 사용할 수 있는 속성값은 left 와 right, center, justify 입니다. 기본 값은 브라우저에 따라 달라지며, 부모 요소의 값을 상속합니다. (2) 예제 텍스트 정렬 Narcissistic, my god, I love it 서로를 비춘 밤 아름다운 까만 눈빛 더 빠져 깊이 (넌 내게로, 난 네게로) 숨 참고 love dive Ooh-ooh, ooh-ooh, lal..
-
[CSS] 텍스트 관련 스타일과 예제 - 1🌐 FrontEnd/HTML & CSS 2022. 5. 17. 22:00
시작하면서 텍스트와 관련된 스타일을 예제와 함께 공부합니다. 1. 글꼴 관련 스타일 (1) font-family 속성 - 글꼴 지정하기 웹 문서에서 사용할 글꼴을 지정합니다. body 태그를 비롯해 p 태그나 hn 태그처럼 텍스트를 사용하는 요소들에서 사용합니다. /* 기본형 */ font-family: "글꼴 이름", "글꼴 이름", "글꼴 이름"; /* 예 */ p { font-family: "굴림"; /* 텍스트 단락의 글꼴을 '굴림'으로 지정 */ } body { font-family: "맑은 고딕", "돋움", "굴림"; } (2) @font-face 속성 - 웹 폰트 사용하기 웹 폰트(web font) 란? 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접..
-
[CSS] CSS 기초🌐 FrontEnd/HTML & CSS 2022. 5. 17. 15:46
시작하면서 CSS 의 기초를 예제와 함께 공부해 봅시다. 1. CSS (Cascading Style Sheets) (1) 왜 스타일을 사용할까? 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있습니다. HTML로는 웹 사이트의 내용을, CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작입니다. 유지보수가 쉽습니다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다. (2) 스타일의 형식 선택자 (selector) 는 스타일 규칙을 어디에 적용할 것인지를 나타냅니다. 기본형 : 선택자 { 속성: 속성 값; } p { /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */ text-align: center; } h1 { /* 제목 1단계의 글자 크기를 10px로, 글자 색상은..