프론트엔드 (54) 썸네일형 리스트형 JavaScript Sec01_2 변수와 상수 변수 선언 : let 키워드 변수는 let 키워드를 이용해 선언한다. 변수 선언 시 규칙 변수명에는 기호를 사용할 수 없다. 예외로, 언더바 ( _ ), $ 는 가능하다. 변수명은 반드시 숫자가 아닌 문자로 시작해야 한다. 변수명으로 예약어 키워드를 사용할 수 없다. 변수는 var 키워드를 이용해 선언할 수도 있다. let과 똑같은 기능을 하지만, let은 전에 사용했던 변수명으로 다시 변수를 선언하면 오류 메시지가 뜨는 반면, var로 선언한 변수는 똑같은 변수명으로 다음 줄에 변수를 선언해도 오류 메시지가 뜨지 않아 프로그램 에러가 날 가능성이 있다. ⇒ 따라서 let 으로 변수 선언을 하는 게 좋다. let age = 25 ; 상수 선언 : const 키워드 상수는 const 키워드를 이용해 선언한.. JavaScript Sec01_1 JavaScript란? JavaScript html, css 와 더불어 웹사이트를 만드는 프로그래밍 언어 중 하나 html이 웹사이트의 구조를, css가 웹사이트의 스타일을 적용하는 역할을 한다면, js는 메시지 창을 띄우거나 데이터를 주고 받는 등 웹사이트가 실제로 작동하도록 하는 역할을 한다. 🧑🏻💻 자바스크립트 엔진 자바스크립트를 실행한다. 자바스크립트 엔진은 chrome, edge, safari, fireforx 등의 웹 브라우저에 포함되어 있다. (대표적인 자바스크립트 엔진은 구글 크롬의 v8이다.) 온라인 웹 에디터인 codesandbox에서 vanila 프레임워크로 실습을 진행함 console.log(”hello”)를 입력하여 콘솔에 출력하는 실습 진행 HTML 07_이미지/비디오/오디오 태그 이미지 태그 태그는 HTML 문서에 이미지를 넣습니다. 위의 예제를 통해 요소의 사용법을 알 수 있습니다. 속성 src 필수이며, 이미지로의 경로를 지정합니다. alt 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다. height 픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다. width 이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다. 절대경로 VS 상대경로 절대경로 리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것입니다. 웹 이미지 절대경로.. HTML 06_Inline/Block , 태그는 웹 페이지의 영역을 구분할 때 사용하는 태그 태그는 주로 분할을 하거나, 어떠한 태그를 담는 컨테이너의 역할을 함 태그는 block level 요소 태그는 특정 텍스트나 문장 영역을 담는 역할을 태그는 inline level 요소 -빨간색은 div태그 (컨테이너) , 노란색은 span태그 (특정아이템) Inline VS Block Element 모든 HTML 태그들은 각 태그의 용도에 따른 default display value(기본 표시 값)를 가진다. 이때 default display value는 블록 레벨 요소(Block-level Elements)와 인라인 레벨 요소(Inline-level Elements) 두 가지 범주로 나뉜다. 예를들면 태그는 블록 레벨 요소이고, 태그는 인라인 레.. HTML 05_SemanticTag Semantic Tag : 의미를 가지는 태그 ex) 태그는 페이지 제목이라는 의미를 갖고 있음. Semantic Tag 의 이점 검색엔진 최적화 (네이버, 구글같은 포털에서 검색을 했을 때 내가 만든 홈페이지가 상단에 올라올 가능성이 높음) 웹 접근성 향상 (화면 낭독기가 semantic tag를 더 강조해서 읽어주는 등) 코드 가독성 향상 페이지 레이아웃을 정의할 때는 그에 맞는 semantic tag를 사용해야 함! HTML Semantic Elements : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다. : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 .. HTML 04_Tag ✏️ part 1 글꼴 태그 ~ Heading 웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을 수록 큰 제목을 표시하는 데 사용합니다. Paragraph 하나의 문단을 표시할 때 사용합니다. Horizontal Rule 가로로 선을 긋는 태그입니다. (종료태그 없음) Break 줄바꿈 태그로 HTML에서 개행 역할을 합니다. (종료태그 없음) Italic 텍스트를 이텔릭체로 표시할 때 사용합니다. Emphasis 텍스트를 이텔릭체로 강조할 때 사용합니다. Bold 텍스트를 진하게 표시할 때 사용합니다. 텍스트를 진하게 강조할 때 사용합니다. ✏️ part 2 목록 태그 Ordered List 순서가 있는 목록을 표현할 때 사용합니다. type 속성으로 글머리 기호를 변경할 수 있다. U.. HTML 03_Emmet Emmet : HTML과 CSS에 자동완성 기능을 제공하여 코드 작성 시간을 단축시켜주는 확장 기능 HTML Emmet HTML 표준 구조 ! ! 입력 후 Tab키 : 간단하고 빠르게 HTML 기본구조를 만들어 줍니다. 자식노드 > div>ul>li 입력 후 Tab키 : >를 사용하여 자식 요소를 생성할 수 있습니다. 형제노드 + div>ul+ol+div 입력 후 Tab키 : +를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다. 반복하기 * div>ul>li*3 입력 후 Tab키 : *를 사용하여 요소를 반복해서 생성할 수 있다. 클래스 부여 . div.title 입력 후 Tab키 : CSS 클래스를 갖을 요소를 생성할 수 있다. (기본이 div 이기 때문에 생략가능) 아이디 # #ite.. CSS 07_float float 속성의 기본 5가지 값 HTML 요소에 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 되고 이에 따라 인접한 텍스트 또는 inline 요소가 그 주위를 자연스럽게 감싸게 됨 none : 기본값으로 요소를 띄우지 않음 left : 요소를 왼쪽에 띄움 right : 요소를 오른쪽에 띄움 inherit : float 속성을 부모 요소로부터 상속받음 initial : 기본값으로 설정함 left 또는 right을 가장 자주 사용한다. clear 속성 float 속성을 적용하면 그 다음 요소들은 계속해서 float 속성이 적용된 요소를 둘러싸게 되는데 이러한 상황을 벗어나기 위해서는 clear 속성을 적용하면 된다. clear : none => 기본값 clear : r.. 이전 1 ··· 3 4 5 6 7 다음
