본문 바로가기

전체 글

 (107)
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..
CSS 06_display display 속성의 기본 4가지 값 display 속성은 HTML 요소를 어떻게 표시할지 결정한다. none : 요소를 보이지 않게 설정한다 visiblity : hidden => 영역은 차지하지만 스타일이 보이지 않음 display : none => 영역도 차지하지 않음 block : 가로 영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임 width, height 속성을 지정할 수 있음 div , p , heading (h1~h6) 태그 등이 이에 해당됨 inline : 컨텐츠만큼의 영역만을 차지하며 block과 달리 줄바꿈이 되지 않음 width, height 속성을 지정할 수 없음 inline-block : block과 inline의 중간 형태로 요소는 inlin..

티스토리툴바