HTML/CSS/Javascript 15

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 07

07-1 텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일 (앞에 font 로 시작함) font-family : 글꼴 종류를 지정 font-size : 글자 크기를 지정 font-style : 글자를 이탤릭체로 표시할 것인지를 지정 font-weight : 글자의 굵기 지정 웹 폰트 사용자 시스템에 설치되지 않은 폰트를 내가 사용하려 할때 폰트에 대한 정보를 웹 서버에 올려놓고 사용자가 웹사이트에 접속했을때 폰트 정보까지 함께 다운로드하게 하는 방법. 폰트를 가지고 있다면 서버에 업로드할 수도 있고, 이미 웹상에 올라온 폰트를 사용할 수도 있지만 이는 네트워크의 속도 영향을 많이 받음. 독특한 폰트를 사용하고자 하는 경우, 구글 웹폰트를 많이 사용함 구글 폰트 사용하기 language 옵션에서 한국어 선..

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 06

06-1 CSS의 기본 스타일이란... form을 이용해 회원가입 양식을 만들었을 때, 스타일을 적용하면 정렬, 마우스를 가져가면 색이 바뀌든지, 배치방법, 글꼴 등 보여지는 방식을 정해줌. 내용과 디자인을 분리하기 위해 html과 css를 구분함 스타일을 적용하기 위해서, head 태그 안에 추가해줬을 뿐임 반응형 웹 디자인 스타일시트를 사용하는 또다른 목적은 여러 기기에 탄력적으로 반응하는 문서를 만들기 위함임 요새는 웹사이트에 pc, 태블릿, 스마트티비, 스마트폰 등 여러 기기들이 접근함. 따라서 각 기기별로 화면 크기에 맞게끔 웹사이트 배치를 바꿔줘야함 이또한 css의 미디어쿼리를 이용하는 것임 스타일 작성하기 스타일은 각 하나하나를 말함 스타일시트 문서 하나 안에 여러 스타일을 모아놓은 것 스타..

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 01~05

01 웹 개발 시작하기 클라이언트 -사용자가 웹 사이트에 접근할 때 사용하는 기기 -좁은 의미로는 웹 브라우저를 의미함 ->클라이언트 개발 = 프런트엔드 개발 서버 -인터넷에 연결된 컴퓨터 -웹 요소와 여러 정보가 저장됨 ->서버 개발 = 백엔드 개발 html (html5) css(css3) 반응형 웹디자인 구현에 필요 자바스크립트 지금은 html5안에 모든 기능이 다 포함되어있지만, 내용 부담을 줄이기 위해 따로 분류함 02 웹 개발 환경 만들기 웹 브라우저(크롬)와 웹 편집기(vs code)가 필요 vs code 설치 > 한국어 팩 설치 후 vs code 재실행(자동 업뎃 후 한글 적용 안될시에도 재실행하면 됨) > 배경색 변경은 관리 아이콘(톱니바귀)에서 색 테마 선택 작업폴더 지정 => 파일>폴더..

[javascript] 기본 문법

코드 구조 여러개의 구문은 세미콜론을 기준으로 구분함 줄 바꿈으로도 구문을 구분할 수 있음(세미콜론 자동 삽입) but 세미콜론 자동 삽입이 동작하지 않을 때도 있음 함수 선언문, 반복문 등 코드블록({...}) 안에서는 세미콜론 안붙여도 괜찮음 엄격 모드 모던 자바스킙트에서 지원하는 모든 기능을 활성화하기 위해서는 스크립트 맨 위에 'use strict'를 적어줘야 함 'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 함 이게 없어도 코드는 정상적으로 동작하지만, 모던한 방식이 아니라 옛날 방식으로 동작함. 몇몇 모던 기능과 클래스는 엄격 모드를 자동으로 활성화함 변수 -변수 선언 시 사용하는 키워드 let const - 상수 정의 시 사용(한번 값을 할당하면 더는 값을 바꿀 수 ..

[HTML] <form> 태그

- Form 태그 : 입력된 데이터를 한번에 서버로 전송함. 전송된 데이터는 웹서버가 처리하고, 결과에 따른 또다른 웹페이지를 보여줌. - Form 태그 동작 방법 1) 폼이 있는 웹페이지 방문 2) 폼 내용 입력 3) 폼 안의 데이터를 웹서버로 보냄 4) 웹서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김 5) 웹 프로그램이 폼데이터 처리 6) 처리결과에 따른 새로운 html 페이지를 웹서버로 보냄 7) 웹서버는 받은 html 페이지를 브라우저에 보냄 8) 브라우저는 받은 html 페이지를 보여줌 - Form 태그 속성 action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 name : 폼을 식별하기 위한 이름을 지정 accept-charset : 폼 전송에 사용할 문자 인코딩을 지정 t..