코딩 시작하기 썸네일형 리스트형 [javaScript] 자바스크립트 데이터형 데이터형 변수에 담기는 데이터의 형태 데이터형의 종류 ● 문자형 string " 큰따옴표 " , ' 작은따옴표 ' 로 표시 var str1 = "Hello World"; var str2 = 'Nace to meet you'; //숫자도 따옴표 안에 작성하면 문자형으로 인식함 var str3 = "10"; TIP! 문자형 작성 시 큰따옴표와 ㅈ가은 따옴표를 구분하는 것이 중요! // 큰따옴표와 작은따옴표를 함께 사용한 경우 > 인식하지 못함 var str1 = "He is a tall'; // 중간에 따옴표(줄임표시를 위해)가 있는 경우 > 중간까지만 인식 var str1 = 'He's a tall'; // 중간에 따옴표(줄임표시를 위해)가 있는 경우 사용하는 방법 // 중간에 있는 따옴표와 다른 종류의 .. 더보기 [javaScript] 자바스크립트 기본 자바스크립트 동적인 웹사이트를 제작 시 사용되는 프로그래밍 언어 사용자로부터 data를 받아 처리함 웹사이트를 제작 시 많이 사용되는 언어들로 HTML > 틀 CSS > 꾸미기 javaScript > 동적인 이벤트 를 생성함 TIP! - keyword (=예약어 : 미리 지정되어 있는 언어, 내장 객체등, 변수로 사용 불가) 중요 - 관습코딩 (카멜표기법) : 단어와단어를 합친 단어일 경우 시작은 소문자, 두번째 단어의 시작은 대문자 - 구조가 변경되어도 스크립트에는 영향이 없도록 코딩 (재 활용하여 사용하기 쉽게 함) 자바스크립트의 활용 범위 IoT 하이브리드 앱 (앱과 모바일웹을 합쳐 놓은 것) 서버 개발 스크립트 연결 방법 ● 내부 스크립트 연결 태그 사이에 작성 ● 외부 스크립트 연결 .js 확장.. 더보기 [CSS] 벤더 프리픽스 알아보기 (Vender Prefix) 이전 크로스 브라우징 포스트에서 Vender Prefix에 대한 이야기가 나왔습니다 오늘은 이에 대해 더 자세히 알아보도록 하겠습니다 CSS들을 사용할 때 최신 브라우저에서는 대부분의 CSS를 지원하고 있지만 오래된 브라우저에서는 지원하지 않는 경우도 있습니다 벤더 프리픽스 (Vender Prefix) prefix는 접두사라는 의미 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른방식으로 지원되므로 접두사를 붙여 브라우저별로 구분 css 미지원 브라우저 기본 속성 초기 모던 브라우저 prefix 붙여서 속성 작성 최신 모던 브라우저 접두사 없이 속성 작성 접두사 종류 접두사 호환 브라우저 -webkit- 사파리, 크롬 -moz- 모질라, 파이어 폭스 -o- 오페라 -ms- 인터넷 익스플로저 TIP! .. 더보기 [HTML/CSS] 크로스 브라우징 알아보기 (Cross Browsing) 구인구직을 하다 보면 크로스브라우징을 고려할 수 있는 사람이라는 요건을 적은 회사들이 많습니다 그럼 이 크로스브라우징이 무엇인지 알아보록 하겠습니다 크로스 브라우징 (Cross Browsing) W3C의 웹 표준을 활용해 웹 사이트를 제작하여 모든 브라우저에서 깨지지않고 의도대로 표현되게 하며, 다양한 웹 브라우저에서 브라우저에 상관없이 사용자가 받는 정보가 동등하게 하는 것 크로스 브라우징을 해야 하는 이유 Source: StatCounter Global Stats - Browser Market Share 그래프를 보면 각 브라우저의 점유율을 확인했을 때 70%의 사용자가 크롬을 이용 크롬을 기준으로 코딩을 할 경우 다른 브라우저에서는 표현이 되지 않을 수 있어 이 다른 브라우저를 사용하는 30%의 사.. 더보기 [HTML/CSS] 배경 삽입하기 (Background) 웹 바탕을 꾸며는 배경을 넣는 방법에 대해 알아보도록 하겠습니다 배경 관련 속성 1. background-color 배경에 색을 지정하는 속성 기본 문법 예시 background-color : transparent | ; 속성 값 설명 기타 transparent 투명 배경 기본값 원하는 컬러 지정 16진수, RGB, color name 등 TIP! background-color 속성을 예외적으로 자식요소에 상속이 되지 않습니다 위와 같이 보이는 이유는 상속되어서가 아니라 요소의 배경색 기본값이 투명이기 때문입니다 2. background-image 배경에 이미지를 삽입하는 속성 기본 문법 예시 background-image : none | url ('이미지 경로') ; 속성 값 설명 기타 none 배경이.. 더보기 [HTML/CSS] 그림자 효과 만들기 (Text-Shadow, Box-Shadow) 코딩으로 그래픽 효과처럼 만들 수 있는 방법 중 하나로 텍스트나 요소에 그림자를 주어 꾸며줄 수 있습니다 텍스트 그림자 효과주기 text-shadow 기본 문법 예시 text-shadow : none | 속성 값 기능 기타 none 그림자 없음 기본값 *가로 거리 (hoff) 텍스트와 그림자 사이의 가로 거리 양수 값 : 글자의 오른쪽 음수 값 : 글자의 왼쪽 *세로 거리 (voff) 텍스트와 그림자 사이의 세로 거리 양수 값 : 글자의 아래쪽 음수 값 : 글자의 위쪽 번짐 정도 (blur) 그림자가 번지는 정도 양수 값 : 글자 밖 음수 값 : 글자 안 기본값 : 0 색상 그림자 색상 현재 글자색이 기본값 텍스트에 기본 그림자 효과주기 예시 See the Pen Untitled by haru (@har.. 더보기 [HTML/CSS] 박스 모델 알아보기 & 관련 속성 알아보기 (Box Model) 콘텐츠를 박스 형태로 정의 하는 방법을 박스 모델이라고 합니다 요소들을 원하는 위치에 배치하기 위해서는 박스 모델에 대해서 알아야 합니다 박스 모델에 대하여 알아보기 전에 블록 레벨 요소와 인라인 레벨 요소에 대하여 알아야 합니다 관련 포스트 [HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element) 박스 모델 (Box Model) 박스 형태의 콘텐츠로 이와 같은 형태인 요소를 박스 모델 요소라 함 블록 레벨 요소는 전부 여기에 속함 박스 모델 구성 분류 콘텐츠 영역 (contents) 패딩 (padding) 테두리 (border) 마진 (margin) TIP! 박스의 기본 값 상태를 static 상태라고 합니다 박스 모델 구성 요소 ●.. 더보기 [CSS] 테두리 만들기 (Border) 테두리는 박스 요소뿐만 아니라 다양한 요소에 넣을 수 있습니다 테두리 기본 속성 ● border-style 테두리 스타일을 지정하는 속성 기본 문법 예시 border-style : none | solid | dashed | dotted | double 속성 값 설명 기타 none 선을 표시하지 않음 기본값 solid 실선으로 표시 dashed 짧은 선으로된 점선으로 표시 dotted 점선으로 표시 double 두 줄로 표시 두 줄 사이의 간격은 border-width로 지정 이 외에 속성값 알아보기 ● border-width 테두리 두께를 지정하는 속성 기본 문법 예시 border-width : | thin | medium | think border-top-width : | thin | medium | .. 더보기 [CSS] 텍스트 스타일 알아보기 2 (TEXT) 전 포스트는 텍스트 스타일 중 글자, 단어와 돤련된 속성들이였습니다 이번에는 문단과 관련된 속성들에 대하여 알아보겠습니다 텍스트 스타일 관련 속성 1. text- align 글의 수평 정렬을 지정하는 속성 기본 문법 예시 text-align : left | right | center | justify 2. text- align-last 선택한 요소에서 마지막 라인만 수평 정렬 지정하는 속성 기본 문법 예시 text-align : auto | left | right | center | justify 속성 값 기능 left 좌측 정렬 right 우측 정렬 center 가운데 정렬 justify 양쪽 정렬 3. direction 글을 쓰는 방향을 지정하는 속성 기본 문법 예시 direction : ltr | .. 더보기 [CSS] 텍스트 스타일 알아보기 (TEXT) 이전에 포스트한 적 있지 않나? 라고 생각하실 수 있겠지만 폰트 스타일과 텍스트 스타일은 다른 개념입니다 폰트 스타일은 글꼴, 폰트와 관련된 개념이였다면 텍스트 스타일은 글자, 단어그리고 문단과 관련된 개념입니다 텍스트 스타일 관련 속성 1. color 글자에 색을 지정하는 속성 기본 문법 예시 color : color-name | 16진수 | rgb | hsl 2. text-decoration 텍스트에 장식줄 표시하는 속성 기본 문법 예시 text-decoration : 속성 기능 속성 값 기능 기타 text-decoration-line 선의 위치 지정 none 밑줄 없음 기본값 underline 밑줄 표시 링크 기본값 overline 윗줄 표시 line-through 가로지르는(취소줄) 표시 text.. 더보기 [Coding Tool] CodePen 사용 방법과 Tistory에 삽입하기 코딩 연습하기 좋은 CodePen 알아보기 CodePen은 html, css, javaScript 등의 코드를 입력하면 바로 적용되어 확인 할 수 있다는 장점이 있어 코드 연습 시 편리합니다 CodePen 사용하기 1. 회원가입하기 해당 사이트에 접속하기 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 사이트 우측 상단의 Sign Up 클릭 해당 방법들 중 하나를 선택해 회원가입 2. 새 .. 더보기 [CSS] 절대 크기와 상대 크기 알아보기 CSS에서 크기를 지정하는 방법으로 절대 크기와 상대 크기가 있습니다 각각의 장단점을 알고 활용할 수 있어야 합니다 절대 크기와 상대크기 비교 절대 크기 상대크기 정의 지정된 크기 주변 요소에 상대적인 크기 차이점 사이즈가 바뀌지 않는 요소 일 때 유용함 접근성의 문제가 있음 주변 요소에 따라 크기가 달라져 비율을 일정하게 유지 가능 사용자가 직접 읽기 적합한 환경을 설정 가능 절대크기 주변 요소에 영향을 받지 않는 지정된 크기 ● px 기본적인 단위 브라우저 기본 글꼴 크기 : 16px TIP! px값은 지정된 크기에서 변하지 않아 코딩 시 틀을 잡을 때 유용합니다. 브라우저 확대/축소로 인한 크기 조절은 가능합니다 상대크기 주변 요소에 따라 지정되는 크기 사용자가 브라우저 메뉴에서 크기를 변경할 수 .. 더보기 이전 1 2 3 다음
