전체 글 102

JS(2) 변수

변수 : 변할 수 있는 수(정보) 변수명을 정할 때 $, _ 을 제외한 공백, 특수문자, 구두점 사용 X 첫 글자 숫자 X 대소문자 구별 예약어 (if 등) X JS 변수의 특징 변수 선언 할 때 var, let, const 키워드 사용 var, let, const 키워드는 변수를 선언 할 때 한번만 사용 var : 초기화 필요없음. 재선언 가능. 키워드 생략 가능 (strict mode에서는 에러). 함수 외부에서 선언되면 전역. 'use strict'; // 엄격모드에서 실행 valueA; // 변수 키워드 생략은 엄격모드에서 에러 var valueA; // 초기화 필요없음. var valueA = "hi"; var valueA = "hello"; // 재선언 가능 valueA = "not hello..

JS 2023.08.23

JS(1) JavaScript 기초

JavaScript? HTML, CSS를 프로그래밍적으로 제어할 수 있는 프로그래밍 언어 웹페이지에서 동작하는 프로그램을 만들 때 사용. 정적인 웹에서 동적인 웹으로. JavaScript를 사용하는 여러가지 방법들 - HTML 파일 내부 삽입하기 인라인 방식 hello Internal 방식 - HTML 파일 외부에 있는 스크립트 파일을 로드 //test.js window.alert('hello world!'); - 브라우저 콘솔창에서 사용 ⌥ + ⌘ + i 브라우저 API (BOM) 브라우저에서 제공하는 API (Browser Object Model) JavaScript 언어에 포함되는 영역은 아니지만 JS가 이 기능들을 사용할 수 있도록 도와줌. window.alert() : 메시지 다이얼로그 띄움 ..

JS 2023.08.23

CSS 실습 - 글쓰기 페이지 CSS로 꾸며보기

CSS에 약한 나를 위해 CSS 실습을 진행한다. 글쓰기 내용을 입력해 주세요 카테고리 일반 공지사항 제목 내용 파일첨부 목록 초기화 작성 미리 만들어 준비된 html 코드. 여기 CSS를 추가해보자. 요런 느낌으로 바꾸자. main요소의 width를 주고 가운데로 정렬 .write{ width: 700px; margin: auto; } 글쓰기(제목) 위에 마진 없애기 .write>.main-title{ margin-top: 0; } 내용을 입력해 주세요 색깔 바꾸고 아래 마진 좀 작게 .write>.main-desc{ color: #767676; margin-bottom: 5px; } 표 좌우로 꽉 채우고 위에 테두리 주기 .board-table{ width: 100%; border-top: 1px s..

HTML&CSS/CSS 2023.08.22

CSS(9) flex

flex - container에 사용하는 속성 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법 부모 요소를 flex-container, 자식 요소를 flex-item 이라고 부름 1차원적 레이아웃(x축, y축)을 위해 주로 사용 flex-direction 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정 row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향 가로) column : 위에서 아래 방향 (주축이 열 방향 세로) row-reverse : 오른쪽에서 왼쪽 column-reverse : 아래에서 위 justify-content 주축을 기준으로 배열의 위치를 조절하거나 아이템 간격 설정 flex-start : 컨테이너 시작쪽으로 정렬 flex-end : 컨테이너 끝쪽으..

HTML&CSS/CSS 2023.08.21

CSS(8) float

float 한 요소가 보통 흐름에서 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치되게 함. left : 왼쪽으로 right : 오른쪽으로 none : 기본값 inline, inline-block 요소에 float속성을 주게되면 block으로 계산되어 적용 float 해제하기 clear: both / right / left; container A B C 주의사항 : 자식 요소들이 모드 float 속성을 갖게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않음. 해결방법 - 부모에게 높이 값 지정하기 - overflow: hidden; .container{ overflow: hidden; } - 부모의 가상 요소 ::after 사용 .container::after..

HTML&CSS/CSS 2023.08.21

CSS(7) form 관련 가상 선택자

:enabled / :disabled 활성화 / 비활성화 상태일 때 아이디 input:enabled { border: 1px solid royalblue; } :read-only / :read-write 사용자가 편집할수 없는 / 있는 상태일 때 :checked input type="checkbox, radio" 유형일때 선택된 상태를 나타냄 약관동의 /* input이 체크되면 input 바로 다음에 오는 형제 요소 lable에 줄이 쳐짐 */ input:checked+label{ text-decoration: line-through; } :required 필수입력값일 경우 ::placeholder 입력에 대한 추가 정보가 있을 경우 /* 이곳은 input입니다 의 글자색이 빨간색으로 변경 */ inpu..

HTML&CSS/CSS 2023.08.20

CSS(6) Box Model

CSS Box Model HTML 요소를 감싸는 상자 웹페이지는 이런 수많은 상자가 모여있는것 요소, 패딩, 테두리, 마진으로 구성 요소 : 텍스트, 사진 등 보여줄 대상 패딩 : 요소 주변 영역 테두리 : 요소와 패딩을 감싸는 테두리 마진 : 테두리 밖의 영역 CSS Box Model은 블록박스에 적용. 인라인 박스는 박스 모델에 정의된 일부 동작만 사용 inline 요소는 width, height, 상하 margin 값이 적용 X width 요소의 너비 설정 기본값은 콘텐츠 영역의 너비이지만, box-sizing 속성을 사용해 테두리 영역의 너비를 설정 auto : 기본값. 브라우저가 계산하여 지정(요소의 부모 크기 기준으로 가득 채우기) height 요소의 높이 설정 auto : 기본값. 브라우저가..

HTML&CSS/CSS 2023.08.20

CSS(5) display 속성 / 단위

display 속성 박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃 설정 주의) CSS 속성으로 시각적인 부분이 바뀔 뿐, 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님 block : 요소 전후에 줄 바꿈을 생성 inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만, block 처럼 box-model의 width, height, margin, padding 값을 모두 설정 가능 flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향으로 설정 grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해 설정 none : 접근성 트..

HTML&CSS/CSS 2023.08.19

CSS(4) 선택자 우선순위

CSS 언어 충돌시 어떤 것을 우선하는지 규칙 이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity) 라고 함 1. 후자 우선의 원칙 2. 구체성(명시도)의 원칙 3. 중요성의 원칙 1. 후자 우선의 원칙 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름 p {color: red; font-size:20px;} p {color: blue;} /* 뒤에 나온 파란색이 됨 */ 2. 구체성의 원칙 (Specificity : 명시도) 어떤 선택자가 더 구체적인가? 구체적인 선택자 .green{color:green;} p {color: red; font-size:20px;} p {color: blue;} /* 구체적인 class 선택자에 따라 초록색 */ (가중치 높음) ..

HTML&CSS/CSS 2023.08.19

CSS(3) 선택자

전체 선택자 universal selector html을 포함한 HTML 문서 내의 모든 요소를 선택 *를 사용하여 선택 *{ margin: 0; } 타입 / 유형 / 태그 선택자 type selector 특정 태그를 선택 h1{ font-weight: bold; } p{ font-size: 24px; } 아이디 선택자 (#) id selector 주의) HTML 페이지 내의 id는 유일해야 함 HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어짐 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많음 ... #hhddrr{ padding: 10px; } 클래스 선택자 ( . ) class selector 클래스 선택자는 한 페이지에 여러 개가 존재 가능 재사용성 높음 Hel..

HTML&CSS/CSS 2023.08.19