본문 바로가기
반응형

전체 글256

브라우저 스타일 초기화 크로스 브라우징이 필요한 이유에 대해 알아봅시다. 크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 위와 같이 라는 태그에만 style을 지정해준 예시를 살펴보겠습니다. 해당 html 문서를 실행하여 웹사이트에서 '개발자도구'를 통해 확인해보면 아래와 같이 body 태그에는 아무런 스타일지정을 하지 않았음에도 Styles에 margin:8px; 가 설정되어있는 것을 볼 수 있습니다. 여기서 body 태그에 지정된 styles은 크롬 브라우저에서 제공하는 설정이며, 동일한 웹페이지를 다른 브라우저에서 열게되면 조금씩 상이하게 style이 확인될 수 있습니다. 그래서 개발을할때에 브라우저의 기본적인 styles을 .. 2021. 10. 16.
codepen.io / HTML,CSS,JavaScript 학습 HTML, CSS, javascript 코드를 작성하고 테스트해볼 수 있는 사이트 https://codepen.io/pen/ Create a New Pen ... codepen.io HTML은 태그 안에 입력한다는 기준으로 작성. (html 문서기본정보 선언할 필요 없음) 로그인 없이도 테스트 가능하나 작성한 내용을 저장하기를 원하는 경우 로그인 필요. 2021. 10. 16.
무작정시작하기_HTML // HTML의 버전을 설정 //문서의 전체범위, Html 문서가 어디에서 시작하고 끝나는지 알려주는역할. HTML 문서에 JS문서 연결하는 방법 * 웹사이트가 열릴때 영어/한국어 번역 선택하도록 나오는 경우, 일반적으로 한국어 사이트를 제작하기때문에 번역을 묻는 팝업이 나오지않도록 하는 방법. // lang(language의 약어)은 지정할 문서의 언어를 명시하는 HTML 속성. // 한국어로 동작시키는 경우 lang을 ko로 수정할 것. 정보를 의미하는 태그 살펴보기(feat. head 태그) 화면에 이미지 출력하기 의 형태로 코드 작성. (프로젝트 폴더에서 사용할 이미지파일들을 images 폴더를 별도로 생성하여 관리하는 것을 권장. 상대경로 ./ (작성된 파일 기준 주변파일 찾기, 생략가능) .... 2021. 10. 16.
VS Code Extensions / 단축키 Visual Studio code - Activity Bar - Extensions(플러그인 개념) 설치 1) korean language pack for visual studio code 설치 (한글화 기능-메뉴바 한글로 변경됨.) 2) Beautify 설치 : 코드정리 설치 후 [기능기여도] 탭의 명령 부분의 "HookyQR.beautify" 이름을 복사 →[파일]-[기본설정]-[바로가기 키]에서 상단의 HookyQR.beauty로 검색 →Beautify selection (HookyQR.beauty) 키조합 (alt+ctrl+L)으로 단축키 설정. 왼쪽 예제처럼 코드 들여쓰기가 정리되어있지 않을때 위의 단축키를 실행하면 아래예제와 같이 자동으로 정돈된다. 3) Auto Rename Tag 설치 : .. 2021. 10. 16.
프론트엔드/기본개념/특수문자 정리 프론트엔드개발 HTML, CSS, JS를 사용해 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호작용할 수 있도록하는 것. HTML(Hyper Text Markup Language) : 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당. CSS(Cascading Style Sheets) : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적) 스타일을 담당. JavaScript : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당. 웹표준 : 웹표준(Web Standard)이란, '웹에서 사용되는 표준기술이나 규칙'을 의미, W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술. 크로스 .. 2021. 10. 16.
Java Script를 이용한 계산기 만들기(table,eval) Java Script를 이용해 계산기를 만들어보자! STEP 1. 계산기 뼈대 만들기 사용자가 입력한 값 계산 결과 초기화 / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = 위와 같은 형태로 계산기를 만든다고 생각해보자. 형태로 만들것이기 때문에 행x열을 그려보면 7행() * 4열()의 뼈대를 가집니다. 그리고 위의 Form에서 '사용자가 입력한 값', '계산결과', '초기화', 0은 열이 합쳐져 있는 것을 볼 수 있습니다. 에서 열을 합칠때 colspan(가로방향으로 합치기)을 이용하고, 반대로 행을 합칠때는 rowspan(세로방향 합치기)을 이용하면 됩니다. 위 예제에서는 가로방향으로 합쳐졌기 때문에 colspan을 활용하도록합니다. 계산기 디자인에서는 HTML과 CSS를 이용해 계산기의 뼈대.. 2021. 10. 15.
반응형