전체 글 35

[Javascript] 자바스크립트 스타일 가이드 가볍게 알아보기

자바스크립트의 스타일 가이드 ( ੭ ̇ᗜ ̇ )੭ 스타일 가이드란 ? 각 프로그래밍 언어마다 권장하는 방법이다. 가독성을 위한 암묵적인 약속이라고 생각하면 된다. 1. 사용할 수 있는 문자 알파벳 ( 대소문자 ) , 숫자 (0~9) , underbar(_) , 달러기호 ($) 를 사용할 수 있다. 2. 변수 - 숫자는 변수의 첫 글자로 올 수 없다. 두번째글자부터 가능하다 ex) 1js (x) js2(o) - 다른 언어에서도 그렇듯이 대소문자는 구별해서 써야한다 myname !== Myname - 예약어는 변수로 사용이 불가능하다. (if, for 등 처럼 이미 기능적으로 사용되고 있는 단어들) - 의미없는 이름들 X 가독성을 위해서 변수이름은 최대한 관련있는걸로 짓는게 좋다. 너무 추상적인 이름도 피하..

[HTML/CSS] CSS 파일을 적용하는 방법

CSS는 웹 사이트의 스타일링을 담당하므로 빼놓을 수 없는 요소다. HTML에 적용하는 3가지 방법에 대해서 알아보자 :D 1. 내부 스타일 시트 ( 에 입력 ) class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 그동안 올린 게시글에서 항상 썼던 방식이다. html파일 안 에 있는 태그 안에 적으면 된다. 2. HTML 태그에 적용하기 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 직접 태그 안에 style=""을 적어서 입력하는 방식이다. 개인적으로는 지저분해 보이고 한 눈에 안 들어와서 별로 안 좋아하는 방식 ! 3. 외부 스타일 시트 마지막 방법은 직접 ..

[HTML/CSS] 기초 개념 ③ 클래스(class), 아이디(id)

클래스 지정하기 클래스는 보통 효과를 따로 주고싶을 때 사용한다 클래스 사용하기 /*클래스 이름은 first*/ class = "클래스 이름" 을 입력하고 클래스 사용하기 두 개의 클래스를 사용하고 싶다면 class=" 클래스 이름명1 클래스 이름명2" 처럼 띄어쓰기만 하고 적어주면 된다 아이디(id) 사용하기 클래스는 . 을 쓰지만 아이디는 #을 적는다. 아이디를 배워보자 이렇게만 보면 .과 #의 차이빼고는 비슷해보이지만 클래스는 중복이 가능하고 아이디는 중복이 불가능하다는 차이점이 있다. 클래스는 여러 태그에 붙여서 연관성과 통일성을 부여할 때 활용할 수 있고 아이디는 하나의 태그에만 붙여서 고유성을 줄 수 있다. 예시 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만..

[HTML/CSS] 기초 개념 ② 링크 넣는법 <a> , 이미지 넣고 가운데 정렬..

웹사이트에 링크 넣는 법 HTML에 대해서 알아보자 구글 위의 코드처럼 주소이름을 입력하면 된다. 주소 이름 부분에는 내가 원하는대로 적으면 된다 !여기서 탭이 따로 열리길 바란다면 target="_blank"을 덧붙이면 된다. 웹사이트에는 이렇게 반영되는 것을 볼 수 있다. 만약에 웹사이트가 아닌 내가 가지고 있는 html파일로 이동하길 원한다면 파일경로를 적어줘야한다. 파일이름 을 입력하면 된다. 대신 자신과 같은 폴더에 있는 html파일로 이동할땐 따로 폴더명을 안 적어도된다 ! 저 위에 practice.html가 그 예시이다. 하지만 폴더가 다를 경우는 경로를 다 적어줘야한다. 또한, 자기자신에게 링크를 걸때는 17번줄처럼 #만 입력하면된다. 웹사이트에 이미지 넣는 법 난 저작권이 없는 무료이미지..

[HTML/CSS] 기초 개념 ① <b>,<i> , 주석 ...

HTML/CSS 이란? ● HTML [HypertextMarkupLanguage] : 웹 문서를 만들기 위한 기본적인 언어 ● CSS [cascading style sheets]: 웹 문서의 전반적인 스타일을 저장해둔 스타일 시트 HTML 기본 태그 (요소) : 웹 브라우저에게 HTML버전을 알려주는 역할 ( 적을시, 자동으로 html5 사용) : 웹 사이트의 제목 : 가장 큰 머리말 (heading 1) : 두 번째로 큰 머리말 (heading 2) : 문단 HTML 기초 태그 : 텍스트를 굵게 만들어줌 ( bold ) HTML을 배워보자 : 텍스트를 날려줌 ( italic ) HTML을 배워보자 : 태그와 똑같이 굵게 표시됨. 감싸고 있는 텍스트가 중요하다고 표시하는것이 목적임 : 태그처럼 날려써짐...