본문 바로가기

반응형

전체 글

(501)
Javascript 제어문(생활코딩) ▶ 비교 연산자 === (이항 연산자) -> 좌항과 우항을 결합해서 그 관계에 따라 하나의 결과, 즉 True인지 False인지를 만들어냄 ▶ 비교 연산자 HTML에서는 이 꺽쇠 기호()가 태그를 나타낼 때 쓰이기 때문에 혼란을 줄 수 있기 때문 12 출력 ▶ 조건문을 활용한 토글 만들기 if(document.querySelector('#night_day').value === 'night') { document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; } else { document.querySelector('bod..
웹과 자바스크립트(생활코딩) Javascript를 이용하면 웹 브라우저를 제어! ▶ Script 태그 HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있음 -> HTML 코드 안에 Javascript 넣기 변화할 필요가 없는 페이지의 뼈대는 HTML로 작성 -> 동적 유저와 상호작용이 필요한 요소들을 그 위에 Javacript로 작성 ->정적 ▶Javascript와 사용자의 상호작용, 이벤트(Event) : 웹 브라우저에서 일어나는 중요한 사건 예시) onclick : 사용자가 어떤 것을 클릭하는 사건을 의미 onchange: 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 ..
삐약쓰의 8월 스터디 계획 1. 자바스크립트 스터디 네이버 부스트코스 생활코딩 강의 수강 추천받은 링크보며 정리(모던 자바스크립트) 2. lg aimers 데이콘 프로젝트 팀 구성 완료.. 수료 꼭 하기 경험, 포폴(플젝) 쌓기 3. py4e 스터디 마무리 파이썬 개념 복습 철저히 하기 끝나면 백준 알고리즘 풀이 시작할 것 ※ 부트캠프 결과 확인 -> 합격 시 테스트 준비.. (자스, hmtl/css)
CSS 문법5 # 미디어쿼리 ■ 미디어쿼리 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것 @media(at media) @media mediaqueries { /* style rules */ } 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있음 □ 미디어 타입 all, braille, embossed, handheld, print, projection, screen, speech, tty, tv □ 미디어 특성 width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, mono..
CSS 문법4 # 레이아웃 ■ display 요소의 렌더링 박스 유형을 결정하는 속성 display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ ■ visibility 요소의 화면 표시 여부를 지정 vi..
CSS 문법3 # 폰트, 텍스트 ■ typhography •em : 폰트의 전체 높이를 의미 •ex ( = x-height ) : 해당 폰트의 영문 소문자 x의 높이를 의미 •Baseline : 소문자 x를 기준으로 하단의 라인을 의미 •Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다름( g, j, p, q, y ) •Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미 ( b, d, h, l ) ■ font family font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할..
CSS 문법2 #단위, 속성, 구문 ■ 단위 1. 절대길이 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음 px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임 2. 상대길이 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함 %: 부모의 값에 대해서 백분율로 환산한 크기를 가짐 em: font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능 rem: root의 font-size를 기준으로 값을 환산 vw: viewport의 width값을 기준으로 1%의 값으로 계산 ■ color h1 { color: 색상 값;} heading ..
CSS 문법 # CSS (Cascading Style Sheets) 문법 CSS : HTML(마크업 언어)을 꾸며주는 표현용 언어 HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인 ! ■ CSS 구문 h1 { color: yellow; font-size:2em; } 선택자(selector) - "h1" 속성(property) - "color"값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ color: yellow; font-size:2em; } 규칙(rule set) - "h1 { color: yellow; font-size:2em; }" ■ 주석 ■ 적용(ht..

반응형