본문 바로가기

전체 글364

JS] 자바스크립트 string - concatenation, length, slicing, extracting concatenation 컨,케'ㅌ네이션 "a" + "b" --> "ab" 로 출력됨 변수 이용해서 내용을 alert로 출력하기 .length 1. 아이템이 하나인 경우 하나의 아이템이 들어있다면 몇 글자인지 세줌 2. 아이템이 여러 개인 경우 아이템이 여러개인 경우 아이템이 몇 개인지 세줌 names 안에 5개의 이름이 들어가 있다. .length로 몇 개의 아이템이 있는지 확인할 수 있다. 3. 트위터에서처럼 몇 글자 썼는지, 몇 글자 남았는지 알려주는 방법 띄어쓰기도 포함됨. 방법1 .length를 따로 var에 담아서 카운팅 코드 더 깨끗하고 한 눈에 보기 편함 var tweet = prompt("Compose your tweet"); var tweetCount = tweet.length; ale.. 2021. 8. 4.
JS] 자바스크립트 변수명 짓는법 | Naming variables 누구나 알아 먹을 수 있고, 기억할 수 있는 이름을 짓자. 키워드를 변수명으로 쓰지않는다 var var = "Jane"; (x) var myvar = "Jane"; (O) 포함은 가능 숫자만있는 변수명을 쓰지 않는다. var 17 = "Jane"; (X) var my17 = "Jane"; (O) 띄어쓰기 들어간 변수명은 쓰지 않는다. var my name = "Jane"; (x) 컴퓨터는 첫번째 my만 변수명으로 인식하고 다음 name은 뭐하는 건지 모른다. 가능한 텍스트는 문자, 숫자, _ (언더스코어), $(달러) 만 가능하고 다은 기호는 안된다. camel casing 가능 첫단어 소문자 + 다음 단어 대문자를 띄어쓰기 없이 적기 myName 2021. 8. 2.
JS] 자바스크립트 variables 변수란? 변수 만드는 법 변수(Variables)란? Variables(변수)는 데이터를 담는 새 컨테이너를 말한다. 새 변수 만들기 var: variable 데이터를 담을 새 컨테이너 myName: 새 컨테이너 이름 Angela: Value Value 바꾸기 var는 컨테이너 처음 만들때만 쓴다 이 전에 있던 Angela는 꺼내서 버리고 새로운 이름이 통 안으로 들어간다. alert로 value가 나오게 하기 1 변수에 Hannona를 담고 2 alert로 변수이름을 부르면 그 안에 들어있는 Hanoona를 보여준다. Prompt에 입력된 내용 저장하기 변수를 이용해서 prompt에 입력한 내용을 저장할 수 있다. prompt만 사용하면 입력창이 뜨는데 내용을 입력해도 저장되는 곳은 없다. 입력한 내용을 저장하려면 변수를 만들.. 2021. 7. 31.
JS]자바스크립트 Alert / Prompt alert alert는 알림 pop up창이다. 입력한 내용을 화면에 보여준다. Prompt Prompt(프롬트)는 사용자가 입력까지 할 수 있게 한다. 입력한 내용이 프로그램에 저장되지는 않는다. 저장하고 싶다면 variable을 사용해야 한다. 2021. 7. 31.
JS] 데이터 타입 | 명령어와 데이터타입 컴퓨터는 어떻게 명령어와 사용자에게 보여줄 말을 구분할까? 앞에 쓰인 말은 컴퓨터가 명령어로 생각하고 괄호안에 든 말은 데이터 타입으로 인식하여 사용자에게 보여줘야할 말로 생각한다. 프로그래밍 언어는 입력, 연산, 출력이 가장 기본 형태로 되어 있다. 사용자에게 내용을 입력 받아 연산을 한 후 다시 사용자에게 내용을 보여주는 과정이 기본 형태이다. 그래서 1. CPU에 최적화된 연산(로직)을 작성하고, 2. 메모리를 최소화하여 사용하는 것이 중요하다. 그렇기에 어떤 데이터 타입을 결정해서 쓰는 지도 중요하다. 데이터 타입 ( Variable Types ) 데이터 타입은 primitive data type 과 object data type (reference values) 2가지로 나눌.. 2021. 7. 30.
JS] 자바스크립트 기본 문법 기본 문법 function: 브라우저에게 무엇을 할 지 키워드를 준다. 브라우저에 입력된 키워드를 입력해줘야 한다. message: 화면에 띄울 메세지 큰 따옴표, 작은 따옴표 상관 없지만 메세지 띄울 때 대부분의 자바스크립트 개발자들이 큰따옴표를 사용한다. 세미콜론: 마침표 역할 2021. 7. 27.
JS] 크롬에서 자바스크립트 콘솔열어 behavior 만들기 크롬에서 자바스크립트 콘솔 여는 법 2가지 방법이 있습니다. 방법 1 view -> 개발자 -> 자바스크립트 콘솔 alert 입력해 보기 세미 콜론 까지 쓰고 엔터를 누르면 팝업창이 뜬다. 잘 되네요!! 팝업 2개 뜨게 하기 하지만 단점이 있습니다. 팝업 2개를 뜨게 하려고 첫 라인 쓰고 엔터를 쳐버리면 바로 팝업이 나와버립니다. 이럴 때 shift+Enter를 쳐야 다음 줄로 내려갑니다. 두 개를 입력 후 엔터를 치면 하나가 나타나고 엔터를 눌러 업애면 다음 팝업이 뜹니다. 방법 2 화면 오른쪽 클릭 -> inspect -> Source -> 작은 화살표 누르기 -> snippets -> New snippet 생성 이 경우에는 여러 줄 입력하고 마지막에 빨간 박스를 클릭하거나 해당 단축키 누르면 작동이.. 2021. 7. 27.
JS] 자바스크립트란? 자바스크립트 간단한 역사 오늘 자바스크립트를 시작하는 날이다. 공부한 내용을 정리해 보겠다. 우선 자바스크립트가 어떻게 시작하게 되었는지 살펴보자. 옛날 옛날? 1990년 대에 우리가 아는 인터넷익스플로어, 크롬, 파이어팍스, 사파리 이 전에 Mosac이라는 브라우저가 있었다. 마크라는 대학생 때 이 Mosac을 파고서 대학 졸업 후엔 팀의 주축으로 Netscape Navigator 브라우저를 만든다. 그 전까지 html에 특별한 기능이 없었다. 서버에 웹페이지를 요청하면 서버가 제공하는 정도였다. 1995년 넷스케이프 팀은 에니메이션도 넣고, 좀 더 다이나믹한 웹페이지를 만들고 싶었다. 그래서 서버가 아니라 브라우저 자체에서 돌아가게 끔 작은 스크립트 언어로 코드를 짜서 아주 심플하고 비개발자도 사용 할 수 있는 쉬운 프로그래.. 2021. 7. 26.
CSS] selector 선택자 문법 여러 태그에 같은 효과 selector1, selector2 { 2021. 7. 25.
CSS] class / id / pseudo class css syntax란 css 언어의 문법을 말한다. 기본 syntax selector{ property: value; } selector 효과 받을 대상 who? property: 무엇을 바꿀까 what? value; 어떻게 또는 얼마나 바꿔줄까 how? property 배열은 알파벳 순서로 한다. Tag selector html에 있는 태그에 효과를 준다. Class selector 예를 들어 이미지 두 개 중 하나에만 효과를 주고 싶을때 img 태그에 효과를 줘버리면 전체 이미지에 같은 효과가 들어가게 된다. 한 군데만 효과를 주고 싶으면 class로 따로 지정해 준다. class selector가 tag selector에 적용된 효과를 덮어버리기에 class에 들어간 효과가 보인다. class 사용.. 2021. 7. 25.
Bootstrap] Media-quary / 폰 화면에 반응형으로 만들기 Media query란 무엇인가? 특정 상황이 됐을 때 적용되는 css 코딩 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp 자주 쓰이는 Media query 타입 Media print h1 {color: red;} 이라하면 화면에서 h1색을 빨간색으로 바꾸라는 것이지만 @media print { h1 {color: red;} } @media print로 감싸면 print할 때만 빨간색으로 하라는 의미가 된다. Media screen break point 사용 화면을 점점 줄였을 때 어느 지점에서 설정된 화면으로 전환할 지 설정 Media (max-widt.. 2021. 7. 22.
CSS] Z-index 제트 인덱스 z-index 사용 전 z-index 사용 후 A 파트가 B 파트 속으로 들어가 보인다. 휴대폰 아래 부분을 아래에 있는 흰바탕 안으로 집어 넣고 싶을 때 z-index를 사용한다. html 기본 포지셔닝 z-index를 사용하기 전에 html 기본 포지셔닝을 알아야 어떤 게 먼저 보이는 게 기본 설정 되어있는지 알 수있다. 1 부모, 자식 태그가 같이 있을 때 자식 태그가 화면 위에 위치한다. 자식 태그는 부모 태그 위에 보여진다. 부모 태그(div)는 보라색, 자식 태그 (h1)은 황토색인데 황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 자식태그가 우선 순위에서 앞선다. 2. 코드가 위에서부터 아래로 내려가는 순서대로 화면 디스플레이도 순서대로 나타난다. html 순서대로 나옴 1,2,3 모두에.. 2021. 7. 20.
Bootstrap, Bootsnipp] 부트스트랩 탬플릿 사용하는 법 탬플릿을 제공하는 사이트 1. Bootsnipp.com https://bootsnipp.com/ 2. Bootstrap Examples Bootstrap Example에서 원하는 템플랫을 선택할 수 있다. https://getbootstrap.com/docs/5.0/examples/ 탬플릿 코드 복사해 오는 법 원하는 탬플릿을 클릭해 해당 페이지에 들어간 후 빈 공간에 오른쪽 버튼 눌러 맨 마지막 inspect를 클릭한다. 가져오고 싶은 태그를 선택한 후 copy -> Copy element 를 눌러 복사한 후 붙여넣기 하여 사용한다. 2021. 7. 20.
Bootstrap] 슬라이드 (Carousel) 만들기 Bootstrap에서 Carousel(슬라이드) 찾는 법 Docs -> Components -> Carousel (카러즐) https://getbootstrap.com/docs/5.0/components/carousel/ 부트스트랩에서 코딩 복사해서 붙이기 carousel 기타 옵션 슬라이드 자동 재생 스피드 조절 interval: 5000ms(5초)로 기본 설정. 5초 후에 다음 슬라이드 자동으로 보여진다. 3초 후로 바꿔보기 data-bs-interval="3000" 마우스 올렸을 때 슬라이드 자동실행 멈춤 data-bs-pause="hover" 슬라이드로 안하고 싶을 때 slide를 클래스에서 삭제한다. 자동 재생 멈추고 싶을 때 ride를 false로 설정해 준다. control button 살펴.. 2021. 7. 20.
CSS] 이미지 기울이기, 사이즈 조절, 원으로 만들기 이미지 기울이기 html 이미지에 클래스 이름을 정해주고 css에서 width를 조절해서 크기를 정해준다. rotate(숫자deg)로 얼마나 회전할 지 정한다. 사각 이미지 원으로 만들기 border-radius: ;로 조절한다. 모서리가 점점 깍인다. border-radius: 20%; 일 때 border-radius: 50%; 일 때 원모양이 되었다. 2021. 7. 19.
아이콘 붙이기 / Font Awesome 아래와 같은 아이콘을 불러와서 아이콘 색과 크기를 변경해 보자. 아이콘 불러오기 1. Font Awesome에서 회원가입(무료)을 해야한다. 유료로 있긴하지만 난 무료만 사용하고 있다. Font Awesome 링크 https://fontawesome.com/ 2. 회원 가입을 하면 CDN 주소을 주는데, 이 CDN을 복사해서 내 html head에 붙여 넣는다. 3. 그리고 나서 원하는 아이콘을 검색한 후 마음에 드는 아이콘을 클릭한다. 4. 아이콘 주소를 복사한다. 5. html 원하는 자리에 붙여넣기 한다. 아이콘 삽입 전 아이콘 삽입 후 아이콘 크기 조절 사이트에서 제공하는 크기를 참고해서 원하는 사이즈를 클래스 안에 적어준다. 아이콘 색 변경 아이콘 색을 바꿀 때는 따로 클래스 이름을 지정해 주고.. 2021. 7. 19.
html] div 태그 div 태그 만약 내가 html에서 I'm Hanoona. 를 만들면 css에서 각 element는 box 형태로 보기에 해당 글자에 박스가 하나 만들어진다. 내가 html에서 a programmer. 를 만들면 또 a programmer. 해당 글자에 박스가 만들어진다. 이렇게 만든 두 박스에 내가 같은 배경색을 넣고 싶다면? 일일이 박스 하나 하나에 효과를 넣는 것이 아니라 두 박스를 담은 더 큰 박스를 만들어 효과를 주면 개고생을 좀 면할 수 있다. 이렇게 여러 박스를 묶어서 더 큰 하나의 박스를 만들 때 div 태그를 이용한다. 이 과정을 코드로 작성해 보자. 1. div로 감싸면 하나의 박스로 감쌀 수 있다. div에 효과를 주면 하나로 묶여서 효과를 받는다. 2. div에 효과를 주어 두 문장.. 2021. 7. 19.
Bootstrap] 버튼 만들기 부트스트랩 버튼 만들기 클래스에서 btn을 입력하면 부트스트랩 버튼을 불러온다. 부트스트랩 버튼 색지정 부트스트랩 위 색깔 표를 보면 각 색마다 이름이 정해져 있다. btn-primary 클래스를 추가하면 이미 설정된 파란색이 나온다. Primary 파랑색 Secondary 회색 Success 녹색 Danger 빨강색 Warning 노랑색 Info 하늘색 Light 흰색 Dark 검은색 Link 링크 밑줄 원하는 색이 없을 때 사용자 색 지정 1. 새로운 클래스(card-btn)를 하나 만들고 css에서 따로 설정해 준다. 2. 그 전에 html head에서 css 링크가 bootstrap 링크보다 아래 위치해 있어야 css가 적용된다. 3. css에서 원하는 색 지정한다. 4. 결과물 보더로만 버튼 만.. 2021. 7. 18.
Bootstrap] container/ container-fluid container 반응형으로 설정된 박스 화면 사이즈 바뀌면 알아서 반응형으로 박스 사이즈도 변형해 준다. 여유 공간도 알아서 바뀌는데 이게 싫을 수 있다. 화면을 꽉차게 해서 내가 원하는 만큼 padding을 주는 것이 더 편리하다. 전체가 꽉차게 하려면 container-fluid를 사용해야 한다. padding은 css에서 준다. container-fluid 화면의 사이즈 변경할 때 마진 없이 꽉참. 항상 width가 100% css에서 여유 공간을 따로 설정할 수 있어 통제가 가능하다. 전체 화면에서 여유 공간주기 내용물들을 큰 박스에 담아 container-fluid를 먼저 주고 나서 css에서 여백 크기를 조절하면 전체 여유 공간 조절하기에 편하다. css에서 위아래, 양옆으로 패딩주기 Boo.. 2021. 7. 11.
Bootstrap] 반응형 만들기 Grid Layout system 반응형이란? 데스크탑-> 태블릿-> 모바일 화면 사이즈가 바뀔 때 화면 배열도 바뀌는 것을 말한다. Bootstrap은 반응형을 만들기 쉽다. 반응형 예시 데스크탑 화면 - 사진 4개 나옴 태블릿 화면 - 사진 3개 나옴 폰 화면 - 사진 2개 나옴 코딩하기 html head에 bootstrap을 연결해준다. bootstrap 홈페이지에 들어가 Get Startd에 들어가면 나오는 아래 내용을 html head에 넣는다. 클래스를 col로만 주었을 때 element 넣은 갯수 만큼 알아서 균등하게 자리를 차지한다. 화면을 줄여도 사이즈는 변하지만 아래줄로 떨어지는 것 없이 그대로 같이 붙어 있는다. 화면을 줄였을 때 클래스를 col-숫자로 주었을 때 클래스를 col-6, col-4, col-3,, 등 c.. 2021. 7. 9.
Bootstrap] 메뉴바 만들기 (네비게이션바) 메뉴바로 가기 부트스트랩에서 docs -> components -> navbar 들어가기 쭉 보면서 마음에 드는 메뉴바 선택한다. navbar(메뉴바) 만들기 navbar -> nav 선택 nav-item : 기본적으로 vertical로 설정되어 있음 navbar-expand : nav-item이 기본적으로 vertical로 설정되어있는 것을 가로로 바꿔줌. navbar-expand-lg : large 데스크탑 사이즈로 볼 때 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-md: medium 태블릿 사이즈까지 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-sm: small 폰 화면 사이즈까지 가로로 메뉴가 다보임.. 2021. 7. 8.
웹디자인에 도움되는 사이트 dribble 색에 따른 디자인등 여러 디자인을 볼 수 있다. https://dribbble.com/?color=E8B730 UI patterns 여러 디자인들 볼 수 있다. http://ui-patterns.com/patterns/Carousel/examples Awwwards. 상받은 디자인이나 다른 프리랜서들의 디자인도 볼 수 있다. https://www.awwwards.com/awwwards/collections/freelance-portfolio/ Sneakpeekit 여러 기기에 화면 디자인 할 수 있는 그리드 제공. 다운받아서 사용 가능. https://sneakpeekit.com/ balsamiq.cloud 여러 기기에 디자인 편하게 할 수 있음 https://balsamiq.cloud/ 2021. 7. 7.
Bootstrap 시작 Bootstrap 트위터에서 무료로 배포한 프리, 오픈 소스 Github에서 두번째로 많은 별을 받은 repository이다. Responsive 기기에 따라 보여 지는 화면 사이즈가 다르다. 그 화면 사이즈에 맞게 레이아웃이 변하는 것을 말한다. adaptable layout Pre-styled Elements 미리 만들어진 것을 복사 붙여넣기 해서 사용한다. Bootstrap 다운로드 https://getbootstrap.com/docs/5.0/getting-started/download/ 다운로드 받으면 dist 파일이 뜨고, 그 안에 보면 css, js 파일이 있다. css 파일에 들어가서 bootstrap.css를 vscode로 열면 이미 정해놓은 css 효과들을 볼 수 있다. 거기에 있는 클래.. 2021. 7. 6.
숀할핀 사이트 클론 2 html DOCTYPE html> Hanoona I'm Hanoona a programmer. Hello I'm a web developer. I'm the founder of the HaNooNa. I like to watch Korean movies and verieties. My Skills Lorem & Ipsum Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros. Lorem Ipsum Dolor Lorem ipsum dolor sit amet, mauris sed c.. 2021. 7. 6.
CSS] float, clear float 사용하기 사진을 왼쪽으로 글씨를 오른쪽으로 위치하고 싶을 때 table을 만들지 않고, float로 할 수 있다. css에서 해당 이미지에 float: left;로 줘서 이미지를 왼쪽으로 가게 하고, 오른쪽 마진을 30px 만큼 주었다. clear 사용하기 이미지 옆에 타이틀은 놔두고, 내용은 밑으로 보낼 때 밑에 보낼 내용을 html에서 클래스로 지정해주고 css에서 그 클래스에 clear: left; 를 준다. clear는 float를 무효화한다. 2021. 7. 5.
CSS] 사이즈 px, %, em, rem 고정된 사이즈 px font-size: 90px 픽셀은 다이나믹 사이즈가 아니다. 고정된 사이즈로 기기 설정에서 폰트를 크고, 작게 하거나 화면을 크고, 작게 만들어도 그에 맞게 변하지 않는다. 다이나믹 사이즈 % font-size: 100%; 이라고 설정하면 기본 값은 16px이다. 90px만큼 원한다면 90/16 = 562.5 % 정도가 된다. font-size: 562.5%; 로 해주어야 한다. em html에서 em태그는 emphasize로 글자를 이탈릭 사이즈로 바꿀때 사용하였지만 크기를 조절할 때는 완전히 다르다. 여기서 em은 M을 발음하는 것이고 예전에 M사이즈 만큼을 말했다고 한다. 지금은 1em(M)= 16px이다. 90px을 원하면 font-size: 5.625em; 또는 %으로 설정.. 2021. 7. 5.
CSS] 폰트 종류, 구글 폰트 연결하기 폰트 자주 쓰는 폰트 1. Serif: 끝에 장식이 들어간 형태이고 2. Sans-serif: 끝 장식이 없는 형태이다 3. monospace: 각 알파벳마다 같은 가로 길이를 가지고 있다. 4. Cursive: 손글씨 느낌 5. Fantasy https://www.w3schools.com/css/css_font.asp Web safe fonts 모든 브라우저와 디바이스에 설치되어 있는 폰트 fallback fonts, font family 내가 설정한 폰트가 디바이스에 없으면 그 다음에 적은 폰트를 찾으라고 설정해 놓다. css에서 font family를 이용하여 우선 순위 대로 나열한다. Tahoma 폰트가 1순위이고 이 폰트가 없으면 Verdana가 2순위 이 것도 없으면 sans-serif 사용... 2021. 7. 5.
CSS] 마진 margin 갯수 설정 자세한 사항 margin/mdn https://developer.mozilla.org/en-US/docs/Web/CSS/margin 벨류 1개 일 때 : 4면 모두에 적용 벨류 2개 일 때 : 위아래 / 양옆 벨류 3개 일 때 : 위 / 양옆 / 아래 벨류 4개 일 때 : 시계 방향 - 위 / 오른쪽 / 아래 / 왼쪽 2021. 7. 4.
CSS] position 속성/ static, relative, absolute, fixed 밸류 알아보기 Postion을 배우기 전에 먼저 html 기본 포지셔닝을 알고 있어야 한다. HTML 기본 설정된 포지셔닝 먼저 html에서 기본 설정되어 포지셔닝은 무엇이 있는지 알아보자. 1. 컨텐츠 사이즈에 따라 박스 사이즈가 결정된다. h1~h6, p 등처럼 기본 설정이 block인 경우에도 가로 길이는 컨텐츠 길이와 상관없이 화면 끝까지 길지만, 세로 길이는 컨텐츠에 따라 길이가 결정된다. 이미지등은 가로, 세로가 이미지 크기에 따라 박스 사이즈가 결정된다. 2. 코드가 위에서부터 아래로 내려가는 순서대로 화면 디스플레이도 순서대로 나타난다. 3 자식 태그는 부모 태그 위에 보여진다. 부모 태그(div)는 보라색 자식 태그 (h1)은 황토색인데 황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 자식태그가 우.. 2021. 6. 29.
CSS] display 속성 / block, inline, inline-block, none Display 속성 display는 컨텐츠(element)의 가로 길이를 정하는 속성이다. block, inline, inline-block, none 4가지 벨류에 대해 알아보자. display의 밸류 4가지 1 Block 가로 길이(width)가 화면 전체를 차지한다. 기본 설정이 block으로 지정되어 있는 태그 html에서 h1을 입력해보면 글자는 몇 개없는데 가로 길이는 화면 끝까지 차지하는 것을 볼 수 있다. html에서 h1은 가로 화면 꽉차게 차지하라고 기본 설정 되어있다. 가로길이가 화면 끝까지 차지하면 그 옆에 다른 컨텐츠가 올 수 없다. h1은 가로 길이가 화면 끝까지 차지하기에 다른 element를 h1 옆으로 나란히 놓을 수 없다. 다른 element는 다음 줄로 내려간다. Hel.. 2021. 6. 28.

티스토리툴바