전체 글
basic JS
안녕하세요. 오늘은 기본적인 JS에 대해 알려드리도록 하겠습니다. 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. script를 번역기로 검색해보면 영화나 방송의 대본&각본으로 나오는데요. Java라는 언어의 대본&각본이라고 할 수 있습니다. 이러한 자바스크립트는 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나입니다. HTML은 웹 페이지의 (1) 기본 구조를 담당하고, CSS는 웹 페이지의 (2) 디자인, JavaScript의 경우 웹 페이지의 (3) 동작을 담당한다고 할 수 있습니다. 지금부터 JS를 사용하는 방법을 알아보도록 하겠습니다. JS는 Inline-Script와 Internal-Script와 External-Script방식이 있습니다. Inline-Script : 태그..
[CSS]-3. GRID와 FLEX
안녕하세요. 오늘은 grid와 flex에 관해 알아보겠습니다. 웹에는 레이아웃 영역이 존재합니다. 이러한 레이아웃 영역은 구획 부분에서 그 내용을 알려드렸는데요. 우리는 레이아웃을 통해 우리만의 공간을 만들 수 있습니다. 예를 들어 상단에 로고를 배치한다던지 아니면 메인 영역에 다양한 내용을 포함한다던지 이때 css에서는 display를 통해 해당역역이 어떤 방식으로 배치하는지 설정할 수 있습니다. 이때 우리는 display: grid 혹은 display: flex를 통해 레이아웃 배치되는 영역에 관해 설정 할 수 있습니다. grid와 flex의 차이로는 해당되는 영역의 해당되는 (박스)의 영역에 관해 말할 수 있습니다. grid의 박스의 영역으로는 2차원으로 수직과 수평을 동시에 설정할 수 있는 반면에..
[CSS]-2. POSITION
안녕하세요. 오늘은 position에 대해 적어보겠습니다. *POSITION STATIC(정적 위치) posistion 속성 값을 직접 입력하지 않아도 나오는 기본값 RELATIVE(상대적 위치) position이 static이었을때의 위치를 기준으로 움직인다. (자기 공간에서 움직임) ABSOLUTE(절대적 위치) position이 static이 아닌 가장 가까운 부모 / 선조를 기준으로 움직인다. (모두 static일때는 body에 영향을 받음) FIXED(고정된 위치) 스크롤에 구애 받지 않고 위치를 사수하며 크기나 위치는 문서를 기준으로 한다. (부모 관계가 없음) 1. STATIC body > article > section:first-child { width: 50%; height: 50%; ..
[CSS]-1. 적용방법 및 선택자
오늘부터 CSS를 배우기 시작했습니다. html과 마찬가지로 학원에서 배우는 내용을 중점으로 정리해보겠습니다!! 오늘은 적용방법과 선택자에 대해 간단히 알아보겠습니다 :) HTML 요소에 'style' 속성으로 적용 HEAD 요소 안에 One Two Three Four Five Six 클래스 속성이나 ID 속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성을 가지고 스타일을 지정하는 방법 청춘 고양이 선택자 뒤에 : 를 붙이면 특정 상황마다 적용할 스타일을 설정. 각 선택자 뒤에 클론(:)을 적고 명시 몇 가지의 가상 선택자를 알아봅시다. 가상 선택자 :link 방문한 적이 없는 링크 선택 :visited 방문한 적이 있는 링크 선택 :hover 마우스를 가져다 (롤오버) 둘때 발생 :active 마..
구획, 입력, 폼 HTML
안녕하세요. 오늘은 구획, 입력, 폼에 대해 알아보겠습니다 :) 구획 구획은 header, main, aside, footer, nav, div, span, section, article 태그가 있다. 이러한 구획은 의미가 있는 구획과 의미가 없는 구획이 있는데 header, main, aside, footer, nav, section, article은 의미가 있는 구획으로 할 수 있고 div, span은 의미가 없는 구획으로 말할 수 있다. 각각의 구획 태그를 코드를 통해 알아보자. 자동 로그인 남 여 기타 추가적으로 input 태그 말고 select 태그 또한 다양한 선택지에서 하나의 선택을 할 수 있게 하는 태그이며 select 또한 코드를 통해 알아보자. 통신사 선택 KT SKT LGU+ CJ헬로..
제목, 목록, 표 HTML
안녕하세요. 오늘은 html의 제목, 목록, 표에 대해 간단히 알아보겠습니다. 코드 블록 사용을 모르고 있었어요......... 오늘부터는 코드 블록을 사용해서 같이 코드도 작성해보겠습니다 :) 제목 html의 제목은 h*태그로 구성되어 있다. h1 ~ h6까지 있으며 Heading 태그 문서나 구획, 문단의 제목을 표시하며 SEO의미가 매우 높다. h1은 1번 제목이며 페이지마다 있는 게 좋으며 해당 페이지의 목적, 제목, 페이지당 한 개만 있도록 해야 한다. h2는 각 구획이나 부분별 제목이며 여러 개가 있어도 상관이 없다. h3~h6부터는 사용 빈도가 매우 낮고 중요도가 떨어져 많이 사용하지 않는다. 1번 제목 2번 제목 3번 제목 4번 제목 5번 제목 6번 제목 목록 ol과 ul이 있으며 정렬도에..
HTML
HTML이란 Hyper Text Markup Language 약어로써 웹 페이지를 위한 마크업 언어. 태그 기본적으로 여는 태그와 닫는 태그가 있으며 그 자체를 부를 때 태그라고 한다. 여는 태그(Opening Tag) : 닫는 태그(Closing Tag) : 여는 태그와 닫는 태그 사이 즉, 여는 태그 ~ 닫는 태그에는 태그의 내용의 내용을 담는다. 또 태그에는 스스로 닫는 태그(Self-Closing Tag)가 있으며 닫는 태그를 요하지 않는 태그이며 자식 태그를 가지지 않는다. 요소 그 자체를 변수로서 이용할 때 요소라고 한다. 태그와 요소는 혼용되어 사용되지만 그 차이는 다르다고 볼 수 있다. (이 부분은 아직도 햇갈림) HTML 명명법 속성 값을 제외한 전부 케밥 케이스(전체 소문자, 단어 간 ..